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

Question

我正在尝试在移动网络应用程序中使用@ font-face,而且它不适用于Android版Chrome.

它IS工作在以下方面:

• iOS上的Safari
• 默认Android浏览器
• OSX上的Safari
• Chrome上的Windows
• 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.

看起来大多数其他浏览器会自动下载Web字体,即使显示它们的div没有显示.但是,Android上的Chrome似乎不会下载它们.

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

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

为了解决这个问题 - 我在临时div中加入了字体visibility:hidden- 这迫使Chrome下载字体.

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