CSS fontface fallbackfont

當我使用fontface時，瀏覽器在下載和呈現字體之前需要一段時間，直到顯示瀏覽器的默認字體。我試圖給Arial作爲fallbackfont和一般的HTML/BODY字體，但這不會改變問題。CSS fontface fallbackfont

有沒有辦法避免這種情況？

@font-face { 
font-family: 'StrukturProBold'; 
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot'); 
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot?iefix') format('eot'), 
    url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.woff') format('woff'), 
    url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.ttf') format('truetype'), 
    url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.svg#webfontpQgNQDw9') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 
body, html { 
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif; 
} 
h1 { 
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif; 
}

來源

2011-03-09 meo

默認字體將是：

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> <script> WebFont.load({ custom: { families: ['yourfont'], urls : ['http://example.com/yourfontdeclaration.css'] } }); </script>

和一些CSS直到下載合適的替換爲止。有什麼問題？ – zzzzBov

問題是，默認的瀏覽器字體看起來與loadet字體非常不同。所以它在+/- 1秒內看起來很糟糕。我希望在此之前使用Fallbackfont，而不是瀏覽器的默認字體。 – meo

我相信在Windows Arial *是*瀏覽器的默認無襯線字體。 Times New Roman是默認的serif字體。 Helvetica和Times是Mac上的默認設置（如果我沒有記錯，請糾正我，如果我錯了）。您只需使用瀏覽器可能具有的更適合的後備（格魯吉亞，Verdana，Times，Arial，Helvetica等） – zzzzBov

除非遊客有其系統上安裝專業的字體，瀏覽器下載它，就像它會一個圖像文件或鏈接的樣式表或.js文件。

從閱讀上面的評論，你可能已經盡了最大的努力。 StrukturProBold只是一個簡單的無襯線字體。

您可以擴展的二級字庫選擇列表不過，也許宋體和黑體不也是很好的選擇爲說宋體，或投石機

font-family: "StrukturProBold", Trebuchet, Verdana, Helvetica, Arial, sans-serif;

來源

2011-03-09 17:34:09 Dawson

我的字體聲明看起來像這樣。這個例子中我只使用了arial。我糾正了我的例子，所以你可以看到它如何真的看起來像 – meo

對不起，你在哪裏，當我複製粘貼我的例子我看到我有一個編碼錯誤後第一個字體聲明（一些有線字符），所以其餘的不是由瀏覽器解釋權利。謝謝。 – meo

這就是所謂的「閃聯合國人病急亂投醫文本「（或FOUT）。你不會在Webkit瀏覽器中看到它，因爲它們隱藏文本直到字體被加載。如果您想強制其他瀏覽器隱藏FOUT，您可以使用一些預先編寫的JavaScript來做到這一點。

保羅愛爾蘭解釋這一切都在這裏：

http://paulirish.com/2009/fighting-the-font-face-fout/

這裏有您需要的代碼：

h2 { 
    font-family: 'yourfont', helvetica, sans-serif; 
} 
.wf-loading h2 { 
    visibility: hidden; 
}

來源

2011-03-09 18:45:59

哦，好難過你哪兒遲到，我會給你正確的答案！ – meo

如果您願意，您可以[更改接受的答案]（http://meta.stackexchange.com/questions/120568/is-it-possible-to-change-the-chosen-answer）;） – Tilt

CSS fontface fallbackfont

回答

相關問題