在页面加载后动态加载谷歌字体

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>