javascript - OpenType 字体的 Firefox 呈现与字体规范不匹配

Question

我正在加载 OpenType 网络字体 Open Sans通过 Google Fonts API/CSS。

在 Chrome 43 (Linux+Windows) 和 Internet Explorer 11 (Windows) 中，浏览器完全按照字体中指定的方式呈现文本。但是，在 Firefox 38.0.5 中，某些字符的文本宽度和/或间距呈现不同。所有字体变体均采用默认值(“正常”)。

例如，我们可以使用字符1、a、b 和i。 Open Sans "unitsPerEm"为2048。因此，在18.0px的字号下，根据1/u * p * c * w，上面每个字符的30个字符的宽度应该如下，其中u = 2048，p = 18.0，c = 30，w是每个字符的前进宽度(Wolfram Alpha equation)。

+----------------------------------------+-----------+| char | font(px) | numChars |  advance  | width(px) |+------+----------+----------+-----------+-----------+|  1   |   18.0   |    30    |   1171    |  308.76   |   |  a   |   18.0   |    30    |   1139    |  300.322  ||  b   |   18.0   |    30    |   1255    |  330.908  ||  i   |   18.0   |    30    |   518     |  136.582  |+----------------------------------------+-----------+

这 ( JSFiddle ) 使用 Canvas 方法 measureText 输出 1, a 中每一个的 30 个字符的宽度(以像素为单位) 、b 和 i。

Chrome 文本长度与预期值完全匹配:

Firefox Linux 文本长度与除 a 之外的任何字符都不匹配，即使在考虑到 Firefox 不提供亚像素精度这一事实之后也是如此:

我已经确认 canvas 报告的宽度确实是 Chrome 和 Firefox 输出的宽度——下图显示红色背景，Chrome 的文本为黑色，Firefox 的文本为白色——宽度与输出匹配以上根据 Gimp“测量”工具。 Firefox 的 b 和 i 太宽，1 太窄:

另外，Firefox Windows 文本长度甚至与 Firefox Linux 不一致——a 和 b 宽度现在符合预期，但是 1 和 i 仍然不正确:

这是一个干净的 Firefox 配置文件，具有默认设置且未安装任何扩展。

谁能解释一下这是怎么回事，以及如何强制 Firefox 根据字体规范呈现字体？

更新:在 Windows 上，将首选项 gfx.font_rendering.directwrite.enabled 设置为 true 可以解决问题(我认为这是当硬件加速可用时，Firefox 默认情况下，即使硬件加速不可用，此设置也会强制启用它，例如在我的测试 VMWare 系统上)。 DirectWrite 已成为 Windows 上 Chrome 的默认设置 since version 37 . Linux 行为仍然无法解释。 This blog post详细解释了 Windows 上 Firefox 中的 DirectWrite 呈现。

Answer 1

(这个答案总结了问题评论中提出的要点，以及问题发布后所做的一系列额外研究。)

对于 various和 complex原因，并不是所有的浏览器/操作系统/字体大小组合都以相同的方式呈现在屏幕上，它们也不总是遵循字体的规范。因此，一般来说，应用程序的创建方式应避免需要对文本进行像素完美定位。

亚像素文本渲染配置

关于配置特定浏览器/操作系统组合以支持子像素文本呈现的一些评论:

window

• 支持和启用 DirectWrite(与旧的 GDI 方法相反)的浏览器确实倾向于支持线性、无提示、子像素文本定位，因此能够(并且通常会)遵循字体前进宽度规范。这包括 Chrome 37+和 Firefox 4+ .
  • 当硬件加速不可用时，Firefox 默认禁用 DirectWrite，但可以通过将配置属性 gfx.font_rendering.directwrite.enabled 设置为 true 来启用它。
  • Chrome 37+ DirectWrite 默认开启，但可以通过设置标志 Disable DirectWrite 来禁用。
  • Internet Explorer(9+？)DirectWrite 默认开启，但可以通过设置兼容模式禁用。

Linux

Configure通过为亚像素渲染设置 fontconfig(通常通过 Gnome 或 KDE 显示管理器设置，但可以通过 fontconfig 配置文件手动完成)，安装 freetype-freeworld(freetype with non-free)来显示抗锯齿和亚像素文本渲染子像素渲染支持)，并为没有 fontconfig 支持的应用程序添加 Xft.lcdfilter: lcddefault 到 ~/.Xresources 中。根据您的 LCD display type 设置正确的子像素渲染类型.

• 即使底层显示器支持并配置为子像素渲染，浏览器行为似乎也不一致。
  • 最新版本的 Chrome(已测试 44 个)似乎支持线性、无提示、亚像素文本定位，因此通常遵循字体规范。在启用 RGB 子像素文本渲染的 KDE 4.14 上测试。
  • Firefox(已测试 38.0.5)似乎进行非线性提示定位，因此不遵循字体规范，即使显示器配置为子像素渲染也是如此。我还没有找到强制 Firefox 使用亚像素文本呈现的方法。

苹果操作系统/X

暂无该平台的信息。

像素完美定位

如果尽管困难重重，但要构建一个需要像素完美文本定位和检查的应用程序，那么通常有两种方法可以解决:

1) Canvas 或基于 DOM 的文本宽度/高度测量:参见 Calculate text width with JavaScript .另见 Font.js作者:Mike Kamermans (Pomax)。

2) OpenType.js 的使用从源字体确定文本尺寸，这比上述方法工作时更快，但并非在所有情况下都工作。