技術的な考慮事項 | Google Fonts和訳 [Web・開発]

この記事は、Google Fontsに関する記事を和訳したものです。
原文: Technical Considerations
元記事のライセンスは CC-BYで、この和訳記事のライセンスは CC-BYです。
自己責任でご利用ください。
和訳した時期は 2017年3月ころです。

このドキュメントは、Google Fonts APIを用いてウェブフォントをリクエストするとき、舞台裏で何が起こっているかについての幾つかの技術情報を提供しています。

さらには、このドキュメントは、ブラウザ固有の振る舞いについての情報を与えます。

もし Fonts APIをただ使用したければ、このページを読む必要はありません。しかしながら、このページを読むことは、ページの読み込みパフォーマンスを改善するのに役立つ可能性があります。

Google Fonts APIは何を提供していますか?

ブラウザが Font APIスタイルシート(あなたのウェブページ内で <link> タグにて指定されたもの)のためにリクエストを送信するとき、Fonts APIは、リクエストを行った特定のユーザエージェントのために生成されたスタイルシートを提供します。

Firefoxからの Inconsolataのリクエストは、例えば、次の CSSを返します:

@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}

Internet Explorerからのリクエストは、一方で、次のものを返します:

@font-face {
  font-family: 'Inconsolata';
  src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}

CSSをダウンロードした後、ブラウザは、ブラウザに適した形式にてフォントをダウンロードします。

ブラウザ固有の振る舞い

このセクションでは、それぞれのブラウザの、ウェブフォントを用いたデフォルトの振る舞いについて説明します。 Web Font Loaderを使用して、これらの振る舞いを制御することができることに注意してください。

サポートされるブラウザのリストについては、FAQを参照してください。

Google Chrome

Chromeは残りのページをレンダリングしますが、フォントが読み込まれるまで、それは、フォントを使用するテキストの代わりに空白を表示します。

Mozilla Firefox

Firefoxは、まず、デフォルトフォントにてテキストを表示し、それから、ひとたびそれが読み込まれたならば、そのフォントにてテキストを再レンダリングします。この振る舞いは、"flash of unstyled text" として知られています。

Apple Safari

Safariは残りのページをレンダリングしますが、フォントが読み込まれるまで、それは、フォントを使用するテキストの代わりに空白を表示します。

Microsoft Internet Explorer

Internet Explorerは残りのページをレンダリングしますが、フォントが読み込まれるまで、それは、フォントを使用するテキストの代わりに空白を表示します。

より一般的には、Internet Explorerの振る舞いは、さまざまな要素の配置および存在に応じて異なるかもしれません。もしすべてのブラウザで一貫した振る舞いを提供したければ、Web Font Loaderを使用してください。例えば、すべてのブラウザを Firefoxのように振る舞わせることを選択することができます。