为什么 Google 字体中的 Roboto Slab 无法在 Chrome 中渲染，如何修复？

排查 Chrome 中的 Google 字体渲染问题

在 Web 开发中使用 Google 字体时遇到渲染困难并不罕见。最近出现的一个具体问题影响了在 Chrome 中使用 Roboto Slab 的网站。虽然该字体在其他浏览器中按预期显示，但在 Chrome 中初始页面加载时它仍然不可见。

经调查，这似乎是 Chrome 中的一个已知错误。问题的原因是 Chrome 有时在初始页面加载期间无法正确呈现自定义字体。但是，一旦重新触发 CSS 属性（例如，通过将鼠标悬停在样式化链接上），字体就会变得可见。

为了解决此问题，我们开发了一种仅依赖于 CSS 的解决方法。通过将以下代码添加到样式表中，您可以确保 Chrome 正确呈现字体：

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

此解决方法本质上会强制 Chrome 重新绘制文本，从而解决问题。值得注意的是，这是一个仅 CSS 的解决方案，可能并不适合所有情况。尽管如此，它提供了解决 Chrome 中 Google Fonts 渲染问题的有效方法。

以上是为什么 Google 字体中的 Roboto Slab 无法在 Chrome 中渲染，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！