如何加載大量Google Web字體？

有更好的方法來將大量Google Web字體加載到單個頁面中嗎？如何加載大量Google Web字體？

也許延遲加載某些頁面加載時？或者，也許只有在用戶滾動到特定點後才加載某些字體？

我不禁想起加載幾種字體有更好的方法。在Google的「字體集合」中放入2或3之後，頁面加載顯然非常高。

我不想用一堆字體來設計，但我試圖想出一種更好的方式來顯示很多字體 - 有點像樣書。

我想最好的例子是Myfonts上的無限滾動。我知道這些字體不是使用網絡字體顯示的，但我認爲應該有類似的加載網頁字體的方式。我的意思是，Google如何加載homepage上的所有字體？

來源

2012-02-09 davecave

爲什麼拖延 – 2012-02-17 02:04:11

我在想，上面的頁面摺疊可見第一字體會先加載，那麼在頁面後面看不到的那些會在稍後加載。 – davecave 2012-02-27 18:56:33

請看下面的答案。看看它是你想要的。：D – 2012-02-28 01:34:47

我不知道這是否適合您，但Google Web Fonts確實提供了JavaScript方法，您可以設置何時使用該字體。（也許加載頁面完成加載後的字體？）

嘗試活demo。

例（使用字體Glass Antiqua）：

<script type="text/javascript"> 
    WebFontConfig = { 
    google: { families: [ 'Glass+Antiqua::latin' ] } 
    }; 
    var YOURFUNCTION = function() { 
    var wf = document.createElement('script'); 
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
     '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
    wf.type = 'text/javascript'; 
    wf.async = 'true'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(wf, s); 
    }; 

    //Maybe 10 seconds later? 
    setTimeout(YOURFUNCTION, 10000); 

    //Document Ready? 
    $("body").ready(YOURFUNCTION); 
</script>

演示：http://jsfiddle.net/DerekL/bkV7E/

來源

2012-02-28 01:16:19

太棒了！所以現在你把它設置爲一個定時的延遲。如果我想在完全加載後顯示字體，它將如何工作？ – davecave 2012-02-28 03:06:21

@davecave，它會在加載完成時自動使用字體。 – 2012-03-02 01:05:18

如何加載大量Google Web字體？

回答

相關問題