28

ページを表示するフォントをユーザーが選択できるようにしたいと考えています 。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);
      })();

ページの読み込み後にフォントを再取得できるようにするにはどうすればよいですか?

4

2 に答える 2

40

この 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>
于 2013-05-14T22:10:42.943 に答える
7

または、サードパーティのライブラリが必要ない場合:

function addStylesheetURL(url) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.getElementsByTagName('head')[0].appendChild(link);
}

// Load Tangerine & Cantarell
addStylesheetURL('https://fonts.googleapis.com/css2?family=Cantarell&family=Tangerine&display=swap');
    h1 {
      font-family: 'Cantarell', sans-serif;
    }
    p {
      font-family: 'Tangerine', cursive;
      font-size: 30px;
    }
<!DOCTYPE html>
<html>
  <head>
    <title>Dynamically load google fonts after page has loaded</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
  </head>
  <body>
    <h1>Dynamically load google fonts after page has loaded</h1>
    <p>Some text.</p>
  </body>
</html>

于 2021-01-27T10:22:03.700 に答える