在頁面加載後動態加載谷歌字體

Question

我希望能夠讓用戶選擇他們希望顯示頁面的字體。Here是Google建議您使用JavaScript進行操作的方式。

WebFontConfig = { 
    google: { 
     families: ['Tangerine', 'Cantarell'] 
    } 
}; 

(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); 
     })(); 

我該如何修改它以便在頁面加載後重新獲得字體？

Answer 1

閱讀本GitHub庫的WebFont.load命令：

https://github.com/typekit/webfontloader

您可以加載您想要動態任何字體：

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> 
    <script> 
     WebFont.load({ 
        google: { 
          families: ['Droid Sans', 'Droid Serif'] 
        } 
     }); 
    </script>