SpreadJS V12 支持了单元格富文本的功能，不仅可以导入导出Excel中的富文本内容，也可在线通过API设置富文本。

SpreadJS V12 支持单元格富文本的功能

富文本的支持不仅可以很好的解决文档中上下标的问题，也很好的解决了单元格内导出PDF时特殊字符乱码的问题。对于像“®”这样的特殊符号我们可以在字符集中找到，但是对于其他特殊的带圈字符，或者某些行业的特殊符号在字符集中无法找到，通常是通过图标的方式解决，但是在Excel中插入浮动图片存在定位的问题。

实际上可以通过在字体中自定义字符的方式解决此类问题。前端常用的Font Awesome就是采用的此种方式。使用字符的优势再有便于编辑并且矢量的字符在打印时也更加清晰，也可快速设置字符颜色大小。

核心问题就是如何生成字体文件，下面我们通过介绍几个开源项目了解如何生成字体，并在SpreadJS中使用自定义的字体。

以圈+壹为例，生成下面的符号的字体。

符号字体“壹”

首先需要制作一个圈壹的svg图片。

  1. 导出“○”和“壹“ 的svg

    访问http://fontstore.baidu.com/static/editor/index.html 这个网站可以在线编辑字字体，从系统中找到simhei.ttf导入后，通过搜索功能找到“○”和“壹”，导出这两个字符的svg文件。

  2. 合并两个svg文件，生成圈壹svg

    在线搜素“svg在线编辑”通过svg在线编辑器导入“○”和“壹“两个svg文件，调整位置生成圈壹svg。

生成圈壹的svg后，用https://icomoon.io/app/#/select/font这个网站可以通过svg生成字体。

  1. 上传SVG，选中上传的图标

    上传SVG

  2. 导出字体文件

    导出字体文件

    点击Download下载生成的字体，字体包里包含了字体文件ttf和woff。以及示例css

在页面使用这个这个字符是只需要在css中引用字体并在页面设置字符对应字符的字体为这个新生成的字体。

  1. 通过css引用字体，根据项目实际需求设置需要使用的设置

    @font-face {
 font-family: 'GrapeCityFont';
 src:  url('fonts/GrapeCityFont.eot?oid8f2');
 src:  url('fonts/GrapeCityFont.eot?oid8f2#iefix') format('embedded-opentype'),
   url('fonts/GrapeCityFont.ttf?oid8f2') format('truetype'),
   url('fonts/GrapeCityFont.woff?oid8f2') format('woff'),
   url('fonts/GrapeCityFont.svg?oid8f2#GrapeCityFont') format('svg');
 font-weight: normal;
 font-style: normal;
}

  2. 设置字符

在浏览器console里输入： String.fromCharCode(parseInt("E900",16)); 会将十六进制字符编码转为字符，console显示的是一个“”小方块，不过直接复制就行了。

sheet.getCell(2, 0).value("").font('50px GrapeCityFont')

包括富文本单元格也可以直接使用，运行结果如下：

运行结果

前端导出PDF是也可以直接注册ttf字体。ttf字体的使用请参考博客《如何彻底解决SpreadJS导出PDF字体乱码问题》。

导出效果：

导出效果

同样，如果需要使用Spread表格组建在服务端导出PDF也只需要在表格组建中设置含有新字体文件的目录，或者在服务器安装此字体。