在网页加载后动态加载google字体 [英] Dynamically load google fonts after page has loaded

问题描述

我想让使用者选择要显示网页的字型。这里是Google建议您使用JavaScript的方式。

I would like to be able to have the user select which font they would like the page to be displayed in. Here is the way that Google recommends you do it using 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);
      })();

如何修改此项，以便在页面加载后可以重新获取字体？ p>

How can I modify this so that I can re-get fonts after the page has loaded?

推荐答案

查看这个github仓库中的WebFont.load命令：

Check out the WebFont.load command in this github repo:

https://github.com/typekit/webfontloader

您可以可以动态加载任何字体：

You can load whatever font you want dynamically:

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

这篇关于在网页加载后动态加载google字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！