SpreadJS在线表格编辑器添加自定义字体
背景:在某些行业中,有一些使用特殊字体的场景,这些特殊字体默认浏览器中是没有的,无法正常显示,希望SpreadJS中可以正常显示此类特殊字体,并且提供字体选择供用户选择,例如客户有一个特殊的字体:SJQY。希望 SpreadJS 在线表格编辑器的字体选择列表中可以选择这个字体,并且能够正确显示在表格中。
解决方案:
我们先来分析一下需求,客户的需求可以分解为两点:
1. 在 SpreadJS 在线表格编辑的字体选择列表中可以选择该字体
2. 字体的内容可以正确的显示在表格中
首先,基于第一点需求,SpreadJS本身没有内置字体库,设置字体显示这块依赖的是浏览器自身的适配。字体选择列表其实就是一个下拉菜单,那么第一个需求就转换成了如何给下拉菜单添加一个字体。
如何添加字体这部分可以参考下面的两篇博客:
SpreadJS在线表格编辑器自定义功能 - 开始菜单添加字体选项
SpreadJS在线表格编辑器自定义功能 -- 单元格格式对话框添加字体选项
接下来是第二点需求,上面说到SpreadJS本身没有内置字体库,设置字体显示这块依赖的是浏览器自身的适配。那么我们就需要在浏览器的适配字体中添加对应的字体,做法很简单,就是打开对应字体ttf之后,直接安装该字体。
安装之后,可以在浏览器自身的设置中查看一下,是否安装成功,以chrome为例,打开chrome的设置,在自定义字体中打开下拉的字体列表
如果安装成功,那么在列表中是可以找到该字体的。
这里有一点需要注意的,列表中使用的字体名称,需要跟SpreadJS在线表格编辑器字体列表中设置的名称对应。
最终,我们就可以在SpreadJS中应用这个字体了
相关demo可以在附件中下载
页:
[1]