web-dev-qa-db-ja.com

フォントをプリロードする

私はページの読み込み時間を改善するためにフォントを事前に読み込んでいます：

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="preload" as="font" type="font/woff2" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

ただし... Chromeはフォントを2回ダウンロードしてレポートするようです

リソース http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3. はリンクプリロードを使用してプリロードされましたが、ウィンドウのロードイベントから数秒。無償でプリロードされていないことを確認してください。

enter image description here これを機能させるにはどうすればよいですか？

font-awesomepreload
9
DD.

crossorigin属性を追加する必要があります フォントをプリロードするとき。

    <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
    <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
5
Barry Pollard

この方法を試してください：

<style>
@font-face {
      font-family: 'FontAwesome-swap';
      font-display: swap;
      src: local('FontAwesome'), url(https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0) format('woff2');
    }
</style>
1
Hans Ganteng

rel="preload"（既に行ったこと）を使用してリンクをプリロードスタイルシートとしてマークするとともに、ファイルをロードするときにJavaScriptを使用してrel属性をstylesheetに切り替える必要もあります。

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>
<link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
1
user10726299

プリロードを実行している順序のため、2回ロードすることができます。

<link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>

最初にフォントをプリロードして、css @ font-faceが再度ロードする要求を送信しないようにします。

0
bhansa