字體間歇性加載失敗？

我使用的是Font Awesome（本地託管）和一些其他字體，並且它們間歇性地無法加載 - 不是404，只是完全無法顯示在開發人員工具的網絡選項卡中，並且未在頁面上呈現。

它似乎最經常發生的第一次頁面加載 - 刷新字體然後加載/渲染確定。但是，清除瀏覽器緩存並不能可靠地重現問題。

我知道路徑正常，因爲字體在80％的時間內渲染OK。這是一個間歇性問題。我在OSX上使用Chrome v26。

我的CSS是這樣的：

<head> 
... 
<link rel="stylesheet" type="text/css" href="${context}/resources/font/opensans.css" /> 
<link rel="stylesheet" type="text/css" href="${context}/resources/css/font-awesome.min.css" /> 
...

而CSS文件看起來是這樣的：

@font-face { 
font-family: 'open_sanslight'; 
src: url('opensans-light-webfont.eot'); 
src: url('opensans-light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('opensans-light-webfont.woff') format('woff'), 
    url('opensans-light-webfont.ttf') format('truetype'), 
    url('opensans-light-webfont.svg#open_sanslight') format('svg'); 
font-weight: normal; 
font-style: normal;

}

再次，路徑是正確的（用事實證明大約80％的時間字體確實呈現正確）。

可能會發生什麼？

來源

2013-04-05 Richard

你檢查網絡標籤@ firefox？是一樣的嗎？ – 2013-04-05 10:43:12

我沒有注意到Firefox中的問題，現在我無法重現它（我實際上在Firefox中禁用了緩存，所以它應該更糟糕，如果有的話）。就像我說的那樣：阻擋。 – Richard 2013-04-05 12:17:50

給這個鏡頭：http://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files – cdwyer 2014-11-22 14:39:09

可能有許多問題有助於觀察到的行爲。根據你對這個問題的描述，這是不明顯的。

我建議嘗試使用WebPagetest來重現問題。選中錄製視頻的選項，以便查看塗料的時間。 WPT能夠準確模擬第一次觀看體驗，所以這將是一個很好的開始。

來源

2013-04-05 15:21:09

同樣的問題在這裏。似乎只會影響Chrome。在Chromium這個bug似乎描述了同樣的問題（或某事十分相似）：

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=-modified&id=229071

我們假設它是目前瀏覽器的bug，但它似乎隻影響到我們的一些網站，而不是其他人，所以這可能比這更多。

這裏的一些事情，我們嘗試沒有成功：

加載自舉CDN，而不是我們自己的服務器上的字體（FontAwesome）。仍然間歇性失敗。
將字體文件內聯爲base64編碼的字符串。仍然間歇性失敗。
從FontAwesome切換到SymbolSet。仍然間歇性失敗。

來源

2013-04-18 06:35:22

字體間歇性加載失敗？

回答

相關問題