CSS Web フォント

CSS @font-face ルール

ウェブ フォントは、ユーザーのコンピュータにインストールされていないフォントを使用するウェブ デザイナーに許可します。

あなたが使用したいと考えているフォントを見つけたり購入したりした後、フォント ファイルをウェブ サーバーに含めると、必要に応じてユーザーに自動的にダウンロードされます。

あなたの「所有」フォントは CSS @font-face 規則で定義されています。

異なるフォント フォーマット

TrueType フォント (TTF)

TrueType は 1980年代後半に Apple と Microsoft が開発したフォント スタンダードです。TrueType は Mac OS と Microsoft Windows オペレーティング システムで最も常用されるフォント フォーマットです。

OpenType フォント (OTF)

OpenType は拡張可能なコンピュータ フォントのフォーマットです。TrueType をベースに構築されており、Microsoftの登録商標です。今日、OpenType フォントは主要なコンピュータ プラットフォームで広く使用されています。

ウェブ オープン フォント フォーマット (WOFF)

WOFF はウェブ用のフォント フォーマットです。2009年に開発され、現在は W3C の推奨標準となっています。WOFF は、圧縮や他のメタデータを持つ OpenType または TrueType です。ネットワークの帯域幅に制限があるネットワーク上でサーバーからクライアントへのフォント配布をサポートすることを目指しています。

ウェブ オープン フォント フォーマット (WOFF 2.0)

TrueType/OpenType フォントは WOFF 1.0 に比べてより良い圧縮を提供します。

SVG フォント/形状

SVG フォントは、テキストを表示する際に SVG をキャラクタとして使用することができます。SVG 1.1 规范では、SVG ドキュメント内にフォントを作成できるフォントモジュールが定義されています。また、SVG ドキュメントに CSS を適用することができ、@font-face ルールも SVG ドキュメント内のテキストに適用できます。

エマージング オープンタイプ フォント (EOT)

EOT フォントは Microsoft がデザインした OpenType フォントのコンパクトな形式で、ウェブページ上で埋め込まれた字体として使用されます。

字体形式のブラウザサポート

テーブルの数字は、そのフォーマットを完全にサポートする最初のブラウザバージョンを示しています。

字体形式
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG サポートされていません サポートされていません サポートされていません 3.2 サポートされていません
EOT 6.0 サポートされていません サポートされていません サポートされていません サポートされていません

*IE：このフォーマットは「installable」に設定されている場合にのみ有効です。

*Firefox：デフォルトではサポートされていませんが、有効にできます（WOFF2を使用するには、フラグを「true」に設定する必要があります）。

必要な字体を使用してください

@font-face 規則では：まず字体の名前（例えば myFirstFont）を定義し、その字体ファイルを指します。

ヒント：字体 URL は常に小文字を使用してください。大文字を使用すると、IE で予期せぬ結果が発生する可能性があります。

HTML 要素に字体を使用する場合、font-family 属性を通じて字体名（myFirstFont）を参照してください：

例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}

自分で試してみてください

太字テキストの使用

太字テキストのデスクリプタを含む別の @font-face 規則を追加する必要があります：

例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

自分で試してみてください

「sansation_bold.woff」ファイルは、Sansation 字体の太字キャラクターを含む別の字体ファイルです。

「myFirstFont」字体族を持つテキストが太字で表示される場合、ブラウザはそれを使用します。

これにより、同じ字体に対して多くの設定を行うことができます。 @font-face 規則。

CSS フォントデスクリプション

以下の表は、以下で使用できる字体を示しています。 @font-face 規則内で定義されたすべての字体デスクリプタ（font descriptor）:

デスクリプタ 値 説明
font-family name 必要です。字体名を定義します。
src URL 必要です。字体ファイルの URL を定義します。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 オプション。フォントをどのように伸縮させるかを定義します。デフォルト値は "normal" です。
font-style
  • normal
  • italic
  • oblique
 オプション。フォントのスタイルを定義します。デフォルト値は "normal" です。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 オプション。フォントの太さを定義します。デフォルト値は "normal" です。
unicode-range unicode-range オプション。フォントがサポートする UNICODE 字符の範囲を定義します。デフォルト値は "U+0-10FFFF" です。