@ 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瀏覽器

回答

相關問題