@font-face在Chrome for Android上不起作用

Question

我试图在移动Web应用程序中使用@font-face，在Android Chrome上无法正常工作。

以下是它正在工作的地方：

• iOS上的Safari
• 默认的Android浏览器
• OSX上的Safari
• Windows上的Chrome
• Windows上的Firefox
• Windows上的IE11

这是我正在使用的代码：

@font-face {
    font-family: 'liat';
    src: url('../fonts/liat_3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

我正在使用远程调试（https://developers.google.com/chrome-developer-tools/docs/remote-debugging）来进行调试，但似乎没有任何错误。

这是我真正不理解的部分...

如果我转到开发者工具中的“网络”选项卡——Chrome 并没有尝试下载字体（即，没有网络调用来加载字体）。

与我在桌面上的 Chrome（Windows 和 OSX）所看到的相比——您可以看到字体已经被加载：

此外 - 如果我转到资源选项卡 - 它不显示任何字体。

与桌面版Chrome上看到的相比：

简而言之，在桌面版Chrome（以及iOS上的移动Safari）中，网络字体已加载并显示。然而，在Android上的Chrome中，网络字体甚至没有被加载，更不用说显示了。

非常感谢任何帮助或建议！

- mattstuehler

---

这两个链接可能会给你更多的研究方向：http://blog.kaelig.fr/post/33373448491/testing-font-face-support-on-mobile-and-tablet 和 http://www.adtrak.co.uk/blog/font-face-chrome-rendering/ - Arbel

远程调试的新位置：https://developer.chrome.com/docs/devtools/remote-debugging/ - mjn

Answer 1

好的 - 所以我找到了答案。这对很多人可能不会感到惊讶...

简而言之，网络字体仅用于某些div元素，最初设置为display: none。

看起来大多数其他浏览器将自动下载网络字体，即使它们未显示出来。但是，Chrome在Android上似乎没有下载它们。

更糟糕的是 - 如果我稍后将这些div的显示更改为可见状态（例如，dislay: block）- Chrome 仍然不会下载它们 - 它们只是未显示。

换句话说 - 字体必须包含在最初包含在渲染树中的元素中，否则它们将永远不会被下载。

为了修复这个问题 - 我在一个具有visibility:hidden的临时div中包含了字体 - 这迫使Chrome下载字体。

希望这可以帮助其他人避免和我一样遇到同样的问题。

- mattstuehler