使用非SpreadJS 支持的字体，会如何渲染报表呢

收藏

本帖最后由 innerwang 于 2024-5-27 16:11 编辑

之前提过一系列字体影响了列宽计算的帖子，

如 https://gcdn.grapecity.com.cn/showtopic-217958-2-1.html

文中提到:
image.png980754699.png

我想问的是

1. 如果遇到非法字体，spreadJS 是使用什么字体来渲染报表的？这里的渲染规则又是怎么样的呢？
2. 在使用 excelIO 导出为 excel时，若使用了非法字体，会对导出的 excel 文件的样式产生影响吗？
3. 之前提到了sjs 会尽量去量非法字体的最大字符宽度，请问这个量宽度是怎么做的呢？

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2024-5-27 19:13 编辑

您好，具体的规则可以参考浏览器自定义字体，关于fallback字体，是浏览器内部规则。
image.png769177245.png

以及想了解下，此非法字体的重要性，看到您也发了很多帖子在咨询列宽问题，是否有可能替换掉此非法字体。

关于其他问题，我深入调研下此问题。

innerwang · innerwang

Ellia.Duan 发表于 2024-5-27 18:30
您好，具体的规则可以参考浏览器自定义字体，关于fallback字体，是浏览器内部规则。

以及想了解下，此非 ...

你好，产品设计的初衷是为了确保spreadjs 渲染的报表和系统内其他图表的字体保持一致。至于为什么选择sans-serif这个通用字体族名已不可考

所以按照您的解释，SpreadJS 在无法识别字体时，就会按照浏览器中的设置来找对应的字体来绘制？
这里我又有额外的两个问题：
* SpreadJS 所能识别的字体，是之前这个帖子里提到的共 425种字体吗？这些字体对应的字体包SpreadJS 是已经打包到对应的基础库里了，还是如何使用呢？因为我本机是 MacOS, 实际字体册里并没有找到 Calibri 这个字体
* 由于浏览器设置中，只是指定了一些通用字体族名对应的字体是什么，那么如果选择了一个非 SpreadJS 支持的字体，且该字体又没有以某个通用字体族名结尾，那么SpreadJS 会如何选择字体来绘制报表呢？

因为我们现在遇到了这个问题，同样都是将单元格设置为 sans-serif 字体
* 在 Mac 的 Chrome 中，看起来展示效果和 Calibri 字体的效果是一致的
* 而在Windows 的 Chrome 中，就出现了 sans-serif 字体展示比 Calibri 字体大很多的情况

请问这个是什么原因呢？

Windows 下表现
image.png939182434.png

Mac 下表现

Ellia.Duan · Ellia.Duan

您好，
如果使用非法字体。会利用浏览器的回退字体策略，进行文字测量。
至于web下文字测量。
https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript

关于 SpreadJS 底层的绘制逻辑，不在SpreadJS技术支持范围内。

innerwang · innerwang

Ellia.Duan 发表于 2024-5-28 14:51
您好，
如果使用非法字体。会利用浏览器的回退字体策略，进行文字测量。
至于web下文字测量。

辛苦也先看一下前面咨询的 SpreadJS 支持的 425 种字体相关的问题

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2024-5-28 18:33 编辑

您好，您是指这个问题吗？“这些字体对应的字体包SpreadJS 是已经打包到对应的基础库里了，还是如何使用呢？”

calibri在给出的425中字体中

image.png345750426.png

以及，需要您具体描述下您想要了解的字体信息，看是否可以给您技术支持。

innerwang · innerwang

Ellia.Duan 发表于 2024-5-28 18:31
您好，您是指这个问题吗？“这些字体对应的字体包SpreadJS 是已经打包到对应的基础库里了，还是如何使用呢 ...

对的，就是这个问题，我想知道 Calibri 这个字体是如何生效的

Ellia.Duan · Ellia.Duan

您好，是这样子的，如果当前字体是在425种字体库中，我们有一套量字标准。如果不在这个字体库种，是另一套量字标准，如上文提到的web量字。

innerwang · innerwang

Ellia.Duan 发表于 2024-5-29 17:22
您好，是这样子的，如果当前字体是在425种字体库中，我们有一套量字标准。如果不在这个字体库种，是另一套 ...

我理解您解释的量字标准是指算列宽的问题？

那么渲染文本的时候，是如何找的字体呢？毕竟不同的字体，其样式是有区别的

Ellia.Duan · Ellia.Duan

列宽与themeFont有关，通过themeFont 决定的导入到SpreadJS的列宽。
这个themeFont可以参考下图：
image.png223329772.png

关于calibri 字体的列宽问题，由于calibir 字体在425种字体列表种，所以并不会去浏览器中找备选字体。
而根据SpreadJS的底层绘制逻辑，即可算出来calibri的字体列宽。

如果还有疑问，可以留下联系方式，我们与您电话沟通下。

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

[已处理] 使用非SpreadJS 支持的字体，会如何渲染报表呢

12 个回复

SpreadJS 认证

SpreadJS 高级认证