SpreadJS在线表格编辑器添加自定义字体

收藏

背景：

在某些行业中，有一些使用特殊字体的场景，这些特殊字体默认浏览器中是没有的，无法正常显示，希望SpreadJS中可以正常显示此类特殊字体，并且提供字体选择供用户选择，例如客户有一个特殊的字体：SJQY。希望 SpreadJS 在线表格编辑器的字体选择列表中可以选择这个字体，并且能够正确显示在表格中。

解决方案：

我们先来分析一下需求，客户的需求可以分解为两点：
1. 在 SpreadJS 在线表格编辑的字体选择列表中可以选择该字体
2. 字体的内容可以正确的显示在表格中

首先，基于第一点需求，SpreadJS本身没有内置字体库，设置字体显示这块依赖的是浏览器自身的适配。字体选择列表其实就是一个下拉菜单，那么第一个需求就转换成了如何给下拉菜单添加一个字体。
如何添加字体这部分可以参考下面的两篇博客：

SpreadJS在线表格编辑器自定义功能 - 开始菜单添加字体选项

SpreadJS在线表格编辑器自定义功能 -- 单元格格式对话框添加字体选项

接下来是第二点需求，上面说到SpreadJS本身没有内置字体库，设置字体显示这块依赖的是浏览器自身的适配。那么我们就需要在浏览器的适配字体中添加对应的字体，做法很简单，就是打开对应字体ttf之后，直接安装该字体。
image.png214114989.png