@ font-face不适用于Chrome浏览器

我正在尝试在移动web应用程序中使用@ font-face，但它不适用于适用于Android的Chrome浏览器。@ font-face不适用于Chrome浏览器

它IS工作如下：

Safari浏览器在iOS
Android默认浏览器
Safari浏览器上OSX
Chrome Windows版
的Firefox在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）调试这一点，它不会出现有任何错误。

这里是我真的不明白的部分...

如果我去的开发工具网络选项卡 - 它不会出现浏览器尝试下载的字体（即有NO网络调用来加载字体）

与此相比，我在Chrome中看到一个桌面（Windows和OSX）上 - 你可以看到字体加载：

enter image description here

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

与此相比，我在Chrome在桌面上看到：

enter image description here

底线 - 在桌面版Chrome（和移动Safari浏览器在iOS）上 - 网页字体加载和显示。但是，在Android上的Chrome上 - Web字体甚至没有加载，更不用说显示了。

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

来源

2014-02-17 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

好的 - 所以我找到了答案。也许这对许多人来说并不会令人惊讶......

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

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

更糟的是 - 如果我以后更改这些div的显示，以可见的东西（例如，dislay: block） - 铬仍然不下载他们 - 他们根本就没有显示。

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

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

希望这可以帮助别人避免重蹈我难题。

来源

2014-03-10 17:54:49 mattstuehler

@ font-face不适用于Chrome浏览器

回答

相关问题