CSS3 Web フォント

CSS3 Web フォント - @font-face 規則

Web フォントは、ユーザコンピュータにインストールされていないフォントを、Web デザイナーが使用できるようにします。

使用したいフォントを見つけるか、または購入したときに、web サーバへフォント・ファイルを入れておけば、 必要に応じて自動的にユーザへダウンロードされます。

"独自"のフォントは、CSS3 の @font-face 規則で定義します。

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

いろいろなフォントフォーマット

TrueTypeフォント (TTF)

TrueType フォントは、 Apple と Microsoft が 1980 年代後半に開発したフォントの標準です。 TrueType フォントは、Mac OS および Microsoft Windows OS 両方の最も一般的なフォント形式です。

OpenType フォント (OTF)

OpenType は、スケーラブル・コンピュータのフォントのフォーマットです。 これは、TrueType フォントの上に作られた、Microsoft の登録商標です。 OpenType フォントは、現在、主要なコンピュータプラットフォームで一般的に使用されています

Web Open フォントフォーマット (WOFF)

WOFFは、Web ページで使用するためのフォントフォーマットです。2009年に開発され、現在では W3C が勧告しています。 WOFF は、基本的に圧縮され、メタデータを追加した OpenType フォントまたは TrueType フォントです。 目的は、帯域幅の制約を持つネットワークを介してサーバからクライアントへのフォントの配布をサポートすることです。

Web Open フォントフォーマット (WOFF 2.0)

WOFF 1.0 よりも優れた圧縮を提供する TrueType/OpenType フォントです。

SVG フォント/Shapes

SVG フォントは、テキストを表示する際に、グリフとして SVG の使用を可能にします。 SVG 1.1 仕様では、 SVG 文書内のフォント作成を可能にするフォントモジュールを定義しています。 さらに、SVG　文書に CSS を適用することもできます。また、@font-face 規則は SVG 文書のテキストに適用することもできます。

Embedded OpenType フォント (EOT)

EOT フォントは、 Web ページの埋め込みフォントとして使用するため、Microsoft によって設計された OpenType フォントのコンパクトな形式です。

フォントフォーマットのブラウザサポート

表中の数字は、完全にフォントフォーマットをサポートした最初のブラウザのバージョンです。

*IE: フォントフォーマットは、"installable" に設定したときにのみ動作します。

*Firefox: デフォルトではサポートしていませんが、有効にすることはできます（WOFF2 を使用するには flag に "true" を 設定する必要があります）。

使いたいフォントの指定

CSS3 @font-face 規則では、最初にフォント名（例：myFirstFont）を定義し、次にフォント・ファイルに ポイントしなければなりません。

	チップ: フォント URL には、常に小文字を使用する必要があります。 大文字を使用すると、IE では予期しない結果が発生することがあります。

HTML 要素にフォントを使用するためには、font-family プロパティを通してフォント名（myFirstFont）を参照します：

太字のテキスト指定

太字テキストの記述子を含む、別な @font-face 規則を追加する必要があります：

"sansation_bold.woff" ファイルは、Sansation フォントの太字を含む別なフォントファイルです。

ブラウザは、フォントファミリ "myFirstFont" であるテキストの一部を太字でレンダリングする時は、いつもこれを使用します。

このように、同じフォントに対して多くの @font-face 規則を指定することができます。

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯

CSS3 フォント記述子

次の表は、@font-face 規則の中で定義できるフォント記述子の一覧です: