在 Firefox 中使用 Materialise 的 Roboto 字体显示问题答案

【问题标题】：Display Issues with Roboto Font from Materialize in Firefox在 Firefox 中使用 Materialise 的 Roboto 字体显示问题
【发布时间】：2016-01-12 18:48:37
【问题描述】：

我正在使用Materialize 来设置我的一些网页的样式。我注意到 Roboto 字体在 Firefox (v43.0.3) 中无法正确呈现，但在 Chrome 中看起来不错。两种浏览器都从我的服务器下载 woff2 字体文件，this question 似乎表明它应该是现代浏览器的最佳选择。

Chrome 渲染：

Firefox 渲染：

（我意识到这些低分辨率的屏幕截图并不是最好的复制品，实际浏览器中的差异更加明显。）

在 Firefox 控制台中，我收到一串类似于以下内容的错误消息：

downloadable font: GSUB: too large substitute: 65535 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)

downloadable font: Layout: Failed to parse lookup subtable 0 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)

downloadable font: Layout: Failed to parse lookup subtable 0 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)

Chrome 没有投诉。

由于我完全不熟悉字体渲染的复杂性，我希望在该领域有一些知识的人可能会根据 Firefox 的错误消息知道问题所在。

【问题讨论】：

运气好吗？我也有同样的问题
@Brandon 根据github.com/Dogfalo/materialize/issues/2660 ，看来它可能会在下一个 Materialise 版本 (0.97.6) 中得到纠正。在进一步调查之前，我将等待该版本发布。
只是一个更新：0.97.6 版似乎没有解决这个问题。

标签： firefox fonts font-face materialize

【解决方案1】：

我终于有一些时间来进一步研究这个问题，materialize 存储库中的一些字体文件似乎有缺陷。只需将dist/font/roboto 目录中的字体文件替换为roboto-fontface-bower 提供的相同文件，我就能够完全解决此问题。只需从 v0.3.0 或更好的任何版本分支中提取。

希望这对为此感到沮丧的其他人有所帮助。

【讨论】：

【解决方案2】：

在我看来，要么是 woff2 文件对内部字体表有错误的偏移量，要么是 Firefox 在解析偏移量时读取了错误的偏移量。

错误消息中提到的GSUB 表不能是呈现问题的主要原因，因为它只定义了字形替换（如连字组合和分解、相同字符代码的替代字形等）。该表不包含任何标准字形的呈现信息，因此如果只是该表无法加载，则标准文本的呈现不应受到影响。有关 GSUB 表的详细信息，请参见 Microsoft's OTF specification。

此外，我在查看此网站时收到另一条错误消息： http://gwt-material-demo.herokuapp.com/

Firefox 告诉我OS/2 表（包含 Windows 字体指标）有问题。这是字体文件中完全不同的部分，再次表明字体结构或读取字体结构有问题。

所以你可以做两件事：

不要使用woff2 文件。
将此问题通知 Roboto 和 Firefox 开发人员，希望他们能找到此错误的原因并修复它。

【讨论】：

我从使用 Woff2 切换到 Woff，现在它在 Firefox 中运行良好，使用 Webpack 和文件加载器。 @font-face { font-family: "Roboto-Regular"; src: url('./assets/fonts/Roboto-Regular.eot') format('eot'), url('./assets/fonts/Roboto-Regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('./assets/fonts/Roboto-Regular.ttf') format('truetype');/* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ }