自定義CSS字體加載問題

這是一個小問題，我不知道如何確切地問，但基本上發生了什麼是我上傳了一個自定義opentype字體，但在網站上加載它將爲一對夫婦留下一個空白的差距加載實際文本之前的幾秒鐘。我已經看到一些網站通過在更改爲自定義字體之前加載本地字體來攻擊這些問題，但我忽略了這些（罕見網站）網站以瞭解它們是如何做到的。自定義CSS字體加載問題

我該如何解決這個問題？我必須使用某種形式的javascript來完成此任務嗎？

在此先感謝！所有答案讚賞！

來源

2012-07-18 Ninjiangstar

顯示你的CSS和HTML代碼 – 2012-07-18 07:55:03

它了很好的問題:)

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

並添加到或文件腳本 （如果你在你的CSS addded @字體面...）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    //load fonts 
    (function(){ 
     // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT 
     var d = document, e = d.documentElement, s = d.createElement('style'); 
     if (e.style.MozTransform === ''){ // gecko 1.9.1 inference 
     s.textContent = 'body{visibility:hidden}'; 
     var r = document.getElementsByTagName('script')[0]; 
     r.parentNode.insertBefore(s, r); 
     function f(){ s.parentNode && s.parentNode.removeChild(s); } 
     addEventListener('load',f,false); 
     setTimeout(f,3000); 
     } 
    })(); 

}); 
</script>

來源

2012-07-18 07:11:52 Jane

非常感謝這個答案，@Jane！然而，有沒有辦法用本地字體替換文本，而不是在加載字體之前隱藏頁面/文本？ – Ninjiangstar 2012-07-18 08:54:12

我禁止創建一個只適用於font-face規則的css文件，並在鏈接我的主css文件之前使用頁面標題中的鏈接標記

來源

2012-08-01 08:11:17 marco

自定義CSS字體加載問題

回答

相關問題