中英文环境下自定义字体不一致的解决方案

收藏

本帖最后由 Lynn.Dou 于 2021-7-22 14:26 编辑

背景：
最近有客户反馈，在不同的语言环境（浏览器中英文环境）下，字体的文本宽度不一致。
调研之后发现，是自定义字体在浏览器中没有生效的原因。
本文将详细介绍出现此问题的原因以及解决方案。

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

附件为一个ssjson文件，json 中的字体即为示例字体：Aclonica

1、设置Chrome为中文环境，导入ssjson至在线表格编辑器
如下图：
1.png801021117.png

从上图可以明显的看出，虽然工具栏显示的字体为 Aclonica，但实际浏览器渲染出的字体并不是 Aclonica。
这是因为浏览器查询到系统没有此字体时，会自动选择备选字体使文本能够顺利渲染。
而SpreadJS只是提供了字体信息，对于浏览器字体的渲染是无法控制的，
不管是工具栏字体显示为Aclonica，还是getStyle().font()获取到的字体信息，都是由json提供的，与浏览器字体的渲染无关。
导入ssjson后，双击列B竖线（使列B自使用列宽），此时使用getColumnWidth()获取B列的实际宽度，如上图。

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

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

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

安装完毕后再来测试： image.png790295715.png

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

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

5、如果每一个用户电脑上都要安装此字体，岂不是太麻烦了吗？
所以我们也可以通过 web font 添加字体，使用字体的base64编码或者直接引入字体文件，
使用户在加载网页时，浏览器能够根据css信息渲染相应的字体。

		自动登录	找回密码
密码			立即注册

中英文环境下自定义字体不一致的解决方案

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人