ページの読み込みに素晴らしいフォントなどのWebフォントを読み込むにはどうすればよいですか？

Question

この質問は、私がクリックして、このフォームの用途にJavascriptを経由して非表示のフォームをロードしたWebページを持っているウェブフォントがメインページに必要とされていない状況に適用され、display:none;

にdivセット内の最初にありますウェブフォント私の問題は、Chromeがwoff2ファイルをダウンロードした時点でフォームを公開するためにユーザーがクリックすると1秒間の遅延が発生することです。

これはユーザーエクスペリエンスにとってはあまり良いことではありません。

メインページのフォントは使用していないため、webfontをプリロードする必要があります。ユーザーが隠しフォームを表示する前にChromeにwoff2ファイルを取得させるものはありません。

あなたのサーバーにFont Awesomeをホストしている場合、またはCDNを使用している場合、これは問題ではありません。

私は何ができるか見るためにインターネットを見回しました。以下のすべてを試してみましたが、どれも役に立たなかったので、woff2ファイルはページロード時に読み込まれませんでした。フォント。

試み1：予圧

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2"> 

又は

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2" as="font"> 

試み2：プリフェッチ

<link rel="prefetch" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2"> 

試み3：CSS

@font-face { 
    font-family: 'Font-Awesome'; 
    src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2");; 
} 

私の周りを探していたとして、私は、Javascriptをベースロードと可能な解決策を見て、私は本当に近くに行きたくなかったので、私のオプションはここで何している何かを始めましたか？

Answer 1

私はこの単純な解決策に終わりましたが、Chrome以外のものではテストされていませんが、私の使用例ではかなり基本的です。現代のブラウザでは動作しないとは思いません。

woff2ファイルを強制的にロードしてメインページにフォントをロードすることにしましたが、ユーザーに表示されないようにしました。

私はすでに発見されたとして、クロムだからここdisplay:none;

に設定されている任意のdivによって必要とされるリソースをフェッチしませんが代わりに私のソリューションです。私のユーザーは、隠しフォームを明らかにする]ボタンをクリックしたときにそのよう

CSS

.div-fake-hidden { 
    width:0px; 
    height:0px; 
    overflow:hidden; 
} 

HTML

<!-- This fake div hidden preloads our web font! --> 
<div class="div-fake-hidden"><i class="fa fa-square-o fa-3x"></i></div> 

は今のブラウザは、ページのロードにwoff2リソースをロードし、ウェブフォントはすぐに読み込まれます。

Answer 2

フォントを動作させるために非表示のdivが必要ありません。サポートされているブラウザ（画像はw3schools）を使用している限り、CSS @font-faceルールは正常に動作します。次のように

また、より多くのフォントフォーマットを追加することができます。

@font-face { 
font-family: 'Font-Awesome'; 
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2"), 
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff') format('woff'), 
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf') format('truetype'); 
} 

Answer 3

あなたのWebフォントローダを使用して試みることができる：https://github.com/typekit/webfontloader

ウェブフォントLoaderが使用しているとき、あなたがコントロールを追加できます@ font-faceを介してリンクされたフォント。ソースに関係なくフォントを読み込む共通のインターフェイスを提供し、読み込み環境を制御するために使用できる標準のイベントセットを追加します。 Web Font Loaderは、Googleフォント、Typekit、Fonts.com、およびFontdeckからのフォント、および自己ホストされたWebフォントを読み込むことができます。 GoogleとTypekitが共同開発したものです。