使用符号字体

问题：如何在SpreadJS中使用符号字体

背景：

在程序开发以及编写文档时，偶然会遇到一些特殊图形，针对这些图形，可以使用图片，还可以使用特殊的符号字体。相对于图片，矢量符号字符容易控制大小，颜色和位置。

如下图Webdings就是常用的一个符号字体，在SpreadJS在线表格编辑器中，通过在富文本单元格中使用Webdings字体，将字符“4”显示为三角符号“4”。

Webdings作为系统自带字体，在网页中可以直接使用，那么如何使用非常规字体，打开网页机器没有安装对应字体该如何处理呢？

解决方案：

以前端常用的font awesome字体图标为例，在网页中使用font awesome 图标时只要在class加入 对应图标的class即可，例如：

<i class="fa fa-rmb" aria-hidden="true"></i>

但是在SpreadJS中，并无法使用class。那么将通过字符的方式使用图标。具体步骤如下：

1、网页引用font awesome css样式文件，在页面中引入font awesome，可以直接使用cdn：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

css中会通过使用@font-face自动加载字体到浏览器，无需用户安装font awesome字体

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

2. 获取图标字符。

在font awesome页面直接复制字符，

3. SpreadJS设置font awesome字体，粘贴字符。

sheet.getRange(0, 0, 2, 2).font("24px FontAwesome")

未设置字体则显示方框，也可在SpreadJS在线表格编辑器的富文本单元格编辑框中直接粘贴该字符。

4. 如有使用GCExcel导出PDF，则需要将fontawsome字体安装至服务器，或者给GCExcel 指定含有fontawesome字体的文件夹路径

指定路径：

Workbook.FontsFolderPath = "/pdfFont"; //包含文档中需要使用到的字体

导出PDF效果：

如果各种符号字体中没有需要的符号，也可以通过自定义符号字体的方式支持，具体可参考SpreadJS通过自定义字体解决文档中特殊字符的问题

作者: Dexter.Yao| 审核：Clark.Pan | 更新时间：2023.09.26