web-dev-qa-db-ja.com

Google Web Fontsリンクまたはインポートを含みますか？

Google Web Fontsをページに含める好ましい方法は何ですか？

  1. リンクタグ経由？

    <link href = 'http：//fonts.googleapis.com/css？family = Judson：400,400italic、700' rel = 'stylesheet' type = 'text/css'>

  2. スタイルシートのインポート経由？

    @import url（http://fonts.googleapis.com/css?family=Kameron:400,700）;

  3. または、Webフォントローダーを使用します

    https://developers.google.com/webfonts/docs/webfont_loader

fontswebfontsgoogle-webfonts
162
kajo

ケースの90％以上については、おそらく<link>タグが必要です。経験則として、ファイルがフェッチされるまで含まれるリソースのロードを延期するため、@importルールを避ける必要があります。また、@ importを「フラット化」するビルドプロセスがある場合は、 Webフォントの別の問題：Google WebFontsのような動的プロバイダーは、プラットフォーム固有のバージョンのフォントを提供するため、単にコンテンツをインライン化すると、一部のプラットフォームでフォントが壊れてしまいます。

では、なぜWebフォントローダーを使用するのでしょうか？必要な場合completeフォントのロード方法を制御します。ほとんどのブラウザは、CSSがすべてダウンロードされて適用されるまで、画面へのコンテンツの描画を延期します-これにより、「スタイル設定されていないコンテンツのフラッシュ」問題が回避されます。欠点は..コンテンツが表示されるまで、余分な一時停止と遅延が発生する可能性があることです。 JSローダーを使用すると、フォントを表示する方法とタイミングを定義できます。たとえば、元のコンテンツを画面にペイントした後、フォントをフェードインさせることもできます。

繰り返しになりますが、90％のケースは<link>タグです。適切なCDNを使用すると、フォントがすぐにダウンし、さらにキャッシュから提供される可能性が高くなります。

詳細およびGoogle Web Fontsの詳細については、こちらをご覧ください GDL video

256
igrigorik

フォントにバージョン管理があるためGoogleが提供する<link>を使用しますが、そのすぐ上でHTML5の事前接続機能を使用して、ブラウザーにTCP接続を開き、fonts.gstaticでSSLを事前にネゴシエートするように依頼します.com。 <head></head>タグに常駐する必要があることは明らかです。

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
0
Mark Cilia Vincenti

リクエスト時間をいくらか節約できます

...余分なコーディング時間がかかる場合。

それは本当に大したことではなく、Googleの簡略化された1行のリンクを開くだけです。

   http://fonts.googleapis.com/css?family=Kameron:400,700

そしてそれがあなたに与えるものを見てください：

/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 400;
  src: local('Kameron'), url(https://fonts.gstatic.com/s/kameron/v8/vm82dR7vXErQxuzngLk6Lg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 700;
  src: local('Kameron Bold'), local('Kameron-Bold'), url(https://fonts.gstatic.com/s/kameron/v8/vm8zdR7vXErQxuzniAIfO-rpfQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

はい、それは他のいくつかのリクエストです。これらを直接起動する方が高速です。フォントファイルを自分のサーバーにダウンロードし、Googleの前にローカルホストURLを追加すると、さらに高速になります。私たちはCDNやparalellのリクエストが好きだということを知っています。それらはより高速であることを意図していますが、自分で試してみてください。

さて、元の質問：@importしない、<link>しない、ただこのコードを既存のグローバルCSSに直接入れてください、それはあなたのサーバーに最適です。プラスの要求は必要ありません。個別の移動ではありません-ファイルのサイズをごくわずかに増加させるだけで、要求の処理時間には実質的に何も追加されません。見るのは美しいですか？いいえ...しかし、あなたのサイトは、リビジョンよりも多くのリクエストを取得することを望みます:)だから、自分ではなくサーバーを助けてください。

全体として、1マイルの価値があると思います。

1行バージョンは、効率的であるように設計されていませんが、シンプル-可能な限り簡単な方法を望むブロガー向けです。あなたの方がよく分かっている。

0
dkellner