android - @font-face 不适用于 Chrome for Android

Question

我正在尝试在移动网络应用程序中使用 @font-face，但它无法在 Android 版 Chrome 上运行。

它是致力于以下工作:

• iOS 上的 Safari
• 默认安卓浏览器
• OSX 上的 Safari
• Windows 上的 Chrome
• Windows 上的火狐
• 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 似乎没有尝试下载字体(即，没有网络调用来加载字体)

将其与我在台式机(Windows 和 OSX)上的 Chrome 中看到的进行比较 - 您可以看到字体已加载:

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

将其与我在桌面版 Chrome 中看到的进行比较:

底线 - 在桌面版 Chrome 上(以及 iOS 上的移动版 Safari)- 加载并显示网络字体。但是，在 Android 版 Chrome 上 - 网络字体甚至没有加载，更不用说显示了。

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

Answer 1

好的 - 所以我找到了答案。也许这对很多人来说并不奇怪......

长话短说 - 网络字体仅用于某些最初设置为 display: none 的 div。

看起来大多数其他浏览器会自动下载网络字体，即使显示它们的 div 没有显示。但是，Android 版 Chrome 似乎不会下载它们。

更糟糕的是 - 如果我稍后将这些 div 的显示更改为可见的内容(例如，dislay: block) - Chrome 仍然不会 下载它们 -它们根本不会显示。

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

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

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