最適なバージョンを選択することにより、Google Web Fontsからの見出しのフォント読み込みを2倍高速化する例

最新のMicrosoft Corporationソフトウェアを搭載したコンピューターのユーザーがCyclopedia wikiサイトをさまようと、最初に第1レベルと第2レベルの見出しのフォント（Cyclopedia、Culture、Society、Science、テクニック」、「Nature and Man」、「Genesis」）：このようなフォントは現在、World Wide Webであまり見られません（私がそのスクリーンショットの断片を自分の経験と比較すると、自分で簡単に見ることができます）。



しかし、このフォント、ご列席の皆様、私たちの見出しは、どのように作成されるべきではないのか、私たち全員の例になります。 なぜそうなのか推測できますか？ はい、このフォントはCandaraであるため（ 実際に見るのは難しくありません。「 Context Font 」拡張機能を使用するか、 Cyclopediaのメインページとその「 Section 」 サブテンプレートの現在のWikiコードを確認してください ）。 Candaraは、最新のWindows（Vista、Windows 7）などの比較的最近のMicrosoft製品でしか見られない排他的なフォントであることを既に知っているか、少なくとも推測します（ Wikipediaを調べるだけです ）。また、 Microsoft Powerpoint Viewer 2007およびMicrosoft Office Compatibility Packの一部として配布されたOffice 2007（以前のシステム用-Windows XP用、Windows 2000用）。 Linux、Mac、Android、またはiPhone、iPadを使用している読者がそのようなサイトをさまよう場合、「Kandar」を使用する場所はどこにもありません。タイトルの外観は、必然的に希望のものとは大きく異なります。



ただし、すべてのシステムおよびブラウザでタイトルの統一表示を提供できます。 このため、同じフォントをすべての読者に出荷するだけで十分です。 あなたのウェブサイトからフォントを配布することができます（CSSに思いやりのある@ font-faceルールを追加する）、または外部フォントホスティングサービス、たとえば、 Google Web Fontsコレクションの無料および無料フォントのサービスを使用できます。 6月末 。 ハブラカトの下で彼女について話します。



見出しにGoogle Web Fontsを使用することについて何を言うべきですか？



まず、Google Web Fontsコレクションは、一般的に@ font-faceを介してフォントをダウンロードするなど、ヘッダーに最適であることに注意してください。 sIFR や Cufónのように、それに先行する「 クランチ 」も見出しにのみ使用されていました。合理的なサイト作成者は、コマーシャルとレンダリングが遅くなり、マウスでテキストを強調表示することさえできなかったので、ページのメインテキストにそれらを使用しなかったでしょう。 しかし、奇妙なことに、 @ font-faceフォントにも独自の問題があります-これはかなりの量です。



これを確認するには、Google Web Fontsサイトで4つのPT Serifフォントスタイル （「Normal 400」、「Normal 400 Italic」、「Bold 700」、「Blod 700 Italic」）をすべて選択してください。スケールの赤い領域に、 値「 350 」が表示されます。 両方の文字セット（「ラテン語」 と「キリル文字」の 両方）にチェックマークを付けると 、矢印がスケールから外れ、インジケーターに値「 700 」が表示されます 。



正直なところ、これらの数字が何を意味するのか、私には完全な考えがありません。Googleの開発者は、それらにラベルを付けることをまったく気にしておらず、ダウンロード時間またはダウンロードされた情報の量に比例するかどうかも完全にはわかりません。より可能性が高い）。 しかし、私は実験を行うことをheしませんでした。Firefoxにアクセスしたとき、「Normal 400」スタイルのチェックマークのみを残し（その後、「Page Load」インジケータの値は「 90 」 を示しました）、 http：//fonts.googleapisでCSSコードを読み取りました.com / css？family = PT + Serifそして、このコードに含まれるURLからフォントをダウンロードしました。 WOFFファイルは43,880バイトのサイズでダウンロードされたので、ページ読み込みインジケータが特定の量を示している場合、これは確かにWOFF形式のフォントのキロバイト数ではないことを考える理由があります-それはおそらくEOT形式のフォントサイズ（通常、フォントはWOFFの約2倍の重量があります）。 ちなみに、エクスプローラで同じアドレスを開くと、CSSコードに EOTフォントにつながる別のURL があります。そのフォントの重さは87 122バイトであり、これは間接的に私の仮定を確認することを意味します。 （「ページの読み込み」インジケータは丸められる場合があります。）



しかし、これはたくさんあります。 サイトへの最初のアクセス中に数百キロバイトのフォントがインターネットからダウンロードされる場合（4つの異なるスタイルに必要）、無制限の高速インターネット（LTE、WiMAX、GPON、ETTH、FTTB、ADSL）のユーザーはおそらく何も気付かないかもしれません-そして、サイトの他のすべての読者は確かに動揺するでしょう。 そして、彼らはinりの中で正しいでしょう。 特に、トラフィックの支払いがメガバイト単位であるモバイルインターネットのユーザーや、トラフィック量が厳しく制限されている企業インターネットのユーザーにとっては残念です。



これが、慈悲深いウェブサイトの作者（つまり、心を痛めている作者）が一度に4つのフォントスタイルを使用するのにふさわしくない理由です。つまり、珍しい（インターネットからダウンロードした）フォントを設定する場合、作者はヘッダーのみに制限されるべきです：ヘッダー、スタイル原則として、1つだけです（たとえば、ストレートまたはイタリック体のみ）。 同時に、選択の幅が広がりつつあります。誕生からの多くのフォントは単一のスタイル（4つまたは2つではなく）を持ち、それ自体が見出しにのみ適しています。



さらに、すべての見出しがロシア語のアルファベットの文字のみで構成されている場合（これが例になっているCyclopediaの場合も同様です）、フォントでファイルのサイズをさらに節約できます。



Google Web Fonts Webサイトにアクセスして、単一（直接）の文字スタイルを持つCuprumフォントを選択します。 ページ読み込みインジケータには43の 値が表示されます 。 以下に、文字セットの設定に使用される「ラテン」 および「キリル」チェックボックスが表示されます。「ラテン」チェックボックスがチェックされ（グレー：チェックを外すことはできません）、「キリル」チェックボックスは設定されませんが、その後にインジケータを配置できます「ページの読み込み」には値「 86 」が表示されます 。 その後（少なくともFirefoxで）、「ラテン語」チェックマークは灰色でなくなり、削除してインストールできますが、「ページ読み込み」インジケータのステータスは影響しません。



これは重要です。 Googleシステムの動作を見ると、ラテン文字がフォントファイルにまったく無条件に含まれているという結論に達するのは簡単です。つまり、ラテン文字を無効にする機能がまだある場合は、ダウンロードしたフォントのサイズを半分にすることができます。



これを非選択的に実現する方法は、Google Web Fontsのドキュメントの「 フォントリクエストの最適化（ベータ） 」セクションに簡単に記載されています。 ダウンロードされたCSSコードの URLは、必要なすべてのフォント文字を含む「text」パラメーターで補完できることがわかりました。 ダウンロードしたフォントのファイルには、これら以外の文字はありません。



したがって、サイトで見出しを提供する前に、切望されている「 フォントファミリ：Cuprum、 sans-serif; 「、このディレクティブをCSSコードの先頭に配置することが最も適切です 。

@import url('http://fonts.googleapis.com/css?family=Cuprum&text=%D0%90%D0%91%D0%92%D0%93%D0%94%D0%95%D0%81%D0%96%D0%97%D0%98%D0%9A%D0%9B%D0%9C%D0%9D%D0%9E%D0%9F%D0%A0%D0%A1%D0%A2%D0%A3%D0%A4%D0%A5%D0%A6%D0%A7%D0%A8%D0%A9%D0%AA%D0%AB%D0%AC%D0%AD%D0%AE%D0%AF%D0%B0%D0%B1%D0%B2%D0%B3%D0%B4%D0%B5%D1%91%D0%B6%D0%B7%D0%B8%D0%BA%D0%BB%D0%BC%D0%BD%D0%BE%D0%BF%D1%80%D1%81%D1%82%D1%83%D1%84%D1%85%D1%86%D1%87%D1%88%D1%89%D1%8A%D1%8B%D1%8C%D1%8D%D1%8E%D1%8F0123456789%20%A0');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合にダウンロードされるWOFFファイルのボリュームは、最適化のため、つまり限られた文字セットを選択するために、 20,840バイトに削減されます 。

• スペース（ "％20"）、改行なしスペース（ "％A0"）;
  
  
• 番号（ "0123456789"）;
  
  
• 小文字：「abvgdeezhziklmnoprstufkhtschshschyyeyuya」;
  
  
• 大文字：「ABVGDEOZHZIKLMNOPRSTUFKHCHSCHSCHCHYYYUYUA」。

_{もちろん、フォントを使用してファイルのサイズをさらに小さくすることも可能です。パラメータ「テキスト」がヘッダーで実際に使用されている大文字のみに制限され、すべてをリストするのではない場合に達成されます。 ただし、フォントが使用されているページの見出しの編集を厳しく制限するため、これは決して便利ではありません。 文字の一般的な節約量は約4キロバイトです。つまり、それだけの価値はありません。}



上記の@importとCuprumフォントのその後の使用の良い例は、 Tradition wikiのタイトルページです 。



この方法は、Google Web Fontsコレクションで利用可能なフォントの中から、他のフォントを使用して簡単にヘッダーのデザインに移行できるとみなされていると思います。 「ファミリ」パラメータの値を変更し、「テキスト」パラメータの独自の値を選択するだけで十分です（たとえば、サイトのヘッダーに含まれる場合はダッシュ、コンマ、省略記号、その他の句読点を含めます）。