BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Webフォントかローカルに読み込まれるフォントか？

2022-11-02 11:55:46

質問

を使用したことによるトラブル以来 Cufon を使用して以来、外部フォント リソースの使用から遠ざかっていましたが、最近になって、より良い方法がないかと、フォントの読み込みの代替方法を探しています。

世の中にはたくさんの新しい方法があり、それぞれの方法にバリエーションがあるようです。 typekit それとも グーグルウェブフォント (jsまたはcssで)ローカルに読み込むフォント(例えばfontsquirrel.com生成メソッド)を使い続けるべきでしょうか？

以下に、最も評判の良さそうな方法を、いくつかのテストとともにリストアップしますが、本当にウェブフォントに移行する価値があるのでしょうか。より高いリソース負荷 (http 要求) を運び、ファイル形式の種類が少ない (互換性が低い) などのように思われます。しかし、ほとんどの場合、ファイルは非同期で効率的に読み込まれるように見えます。

  1. 状況や必要性の問題なのでしょうか。もしそうなら、それらは何でしょうか？
  2. これらの方法の間には、劇的な違いがあるのでしょうか？
  3. 私がリストアップしていない、より良い方法がありますか？
  4. パフォーマンスの長所/短所は何ですか？また、依存性、互換性は？

パフォーマンスは大きな問題ですが、スケーラビリティと使いやすさも同じです。言うまでもなく、ルック＆フィールです。

Google CSS

  • は外部スタイルシートのみを使用します。
  • 最も小さい互換性のあるファイルタイプのみを使用する
  • を使用することができます。 @import または <link> またはスタイルシーの内容を取る ( @font-face ) を直接自分のスタイルシートに入れることもできます。

テスト結果 

  78ms load of html
  36ms load of css

Google JSメソッド

  • 用途 webfont.js を使用してスタイルシートをロードします。
  • 最も小さい互換性のあるファイルタイプのみを使用
  • を追加します。 :root 要素にクラス
  • はheadにスクリプトを追加します。

テスト結果 

    171ms load of html
    176ms load of js
    32ms load of css

Typekitのメソッド

  • を追加します。 :root 要素にクラスを追加します。
  • が使えるのは *.js スニペットまたは外部で読み込んだファイル *.js ファイル
  • は data:font/opentype を使用します。
  • はheadにスクリプトを追加します。
  • 埋め込みCSSをheadに追加します。

  • は外部スタイルシートをheadに追加します。

    typekit.com のフォントとターゲットセレクタを簡単に追加、削除、調整できます。

テスト結果 

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

...& フォント・リス・メソッド 

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

...またはdata:fontメソッドで... 

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

どのように解決するのですか？

まず、Googleの提供するサービスについて整理しておきます。実際には、ブラウザが処理できる最小の形式が読み込まれます。WOFF は小さなファイル サイズを提供し、ブラウザはそれをサポートしているので、表示されるのは WOFF になります。また、WOFFはかなり広くサポートされています。しかし、たとえばOperaでは、おそらくフォントのTrueTypeバージョンが表示されるでしょう。

ファイル サイズのロジックは、Font Squirrel がこの順序で試行する理由でもあると思います。しかし、これは私の側からの憶測にすぎません。

すべてのリクエストとバイトが重要である環境で作業している場合、ユースケースに最適な方法を見つけるために、いくつかのプロファイリングを行う必要があります。ユーザーは 1 ページしか閲覧せず、2 度目は訪問しないのでしょうか? そうであれば、キャッシュのルールはそれほど重要ではありません。閲覧や再訪問がある場合は、Googleの方があなたのサーバーよりも優れたキャッシングルールを持っている可能性があります。問題なのはレイテンシーか、それとも帯域幅か？レイテンシーが問題なら、より少ないリクエストを目指し、できるだけローカルでホスティングし、ファイルを結合します。帯域幅の問題であれば、最小のコードと最小のフォントフォーマットとなるオプションを選択します。

さて、CSSとJSの比較についてです。次のようなHTMLの部分を見てみましょう。 

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

多くの場合 script1 , style1 そして style2 はブロックされます。これは、リソースが読み込まれるまで、ブラウザがドキュメントを表示し続けることができないことを意味します（最近のブラウザはこれを少しごまかしていますが）。これは、特にスタイルシートでは、実際に良いことです。それは、スタイルのないコンテンツのフラッシュを防ぎ、また、スタイルを適用するときに発生する巨大なシフトを防ぎます (そして、シフトするコンテンツはユーザーとして本当に迷惑なものです)。

一方 script2 はブロックされないでしょう。それは後で読み込むことができ、ブラウザはドキュメントの残りの部分の解析と表示に移ることができます。そのため、これも有益な場合があります。

特にフォントについて話すと（さらに言えば、Google が提供しているもの）、私はおそらく CSS メソッドにこだわるでしょう（私は @import が好きですが、それは私だけかもしれません)。スクリプトによって読み込まれる JS ファイル ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) よりも大きな @font-face 宣言よりも大きく、ちょうど に見える はもっとたくさんの作業のように見えます。実際のフォント自体（WOFFやTTF）の読み込みはブロックされないと思うので、それほど物事を遅らせることはないはずです。私は個人的にCDNの大ファンではありませんが、CDNは本当に速いという事実があります。Google のサーバーは、ほとんどの共有ホスティング プランよりも圧倒的に速く、そのフォントはとても人気があるので、すでにキャッシュされている可能性さえあります。

そして、これが私の持っているすべてです。

私は Typekit の経験がないので、私の理論化からは除外しました。もし不正確な点があれば、議論のためのブラウザ間の一般化も含め、ご指摘ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します