@ font-face无法在Chrome for Android上运行

Question

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

IS 正在进行以下工作：

• 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上 - 网络字体甚至没有加载，更不用说了。

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

Answer 1

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

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

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

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

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

要解决此问题 - 我在visibility:hidden的临时div中加入了字体 - 这迫使Chrome下载字体。

希望这可以帮助别人避免困扰我的同样问题。