中英文环境下字体不一致

背景：

最近有客户反馈，在不同的语言环境（浏览器中英文环境）下，字体的文本宽度不一致。

调研之后发现，是自定义字体在浏览器中没有生效的原因。

本文将详细介绍出现此问题的原因以及解决方案。

解决方案：

为便于理解， 在网上下载一个免费英文字体（字体易区分）作为示例，如下图：

1、设置Chrome为中文环境，导入ssjson至 在线表格编辑器

如下图：

从上图可以明显的看出，虽然工具栏显示的字体为 Aclonica，但实际浏览器渲染出的字体并不是 Aclonica。

这是因为浏览器查询到系统没有此字体时，会自动选择备选字体使文本能够顺利渲染。

而 SpreadJS 只是提供了字体信息，对于浏览器字体的渲染是无法控制的，

不管是工具栏字体显示为Aclonica，还是 getStyle().font() 获取到的字体信息，都是由 json 提供的，与浏览器字体的渲染无关。

导入ssjson后，双击列B竖线（使列B自使用列宽），此时使用 getColumnWidth() 获取B列的实际宽度，如上图。

2、修改Chrome为英文环境，再次导入ssjson至在线表格编辑器，结果如下图：

同上，英文环境下浏览器也选用了备选字体，并且与中文环境下有所不同，所以获取的实际列宽也与中文环境不一致。

3、如何解决这个问题呢？我们将 Aclonica 字体在系统中安装就可以了。

安装完毕后再来测试：

很明显，现在文本显示已经是我们想要的字体了。

4、注意：使用自定义字体时一定不要将名称写错（多写、少写、加空格），不然会导致字体匹配不上，最后仍无法渲染该字体。

5、如果每一个用户电脑上都要安装此字体，岂不是太麻烦了吗？

所以我们也可以通过 web font 添加字体，使用字体的 base64 编码或者直接引入字体文件，

使用户在加载网页时，浏览器能够根据css信息渲染相应的字体。

文中的ssjson参考该链接。

作者: GrapeCity China | 审核：AlexZ | 更新时间：2023.09.26