CSS アドバンス

CSS3 フォント

CSS3 では、デザイナーが Web サイトで使用するフォントの制限がなくなりました。これまで、Web サイトで使用できるのは「Web セーフフォント（ユーザーのコンピュータにプリインストールされているフォント）」のみでしたが、CSS3 の登場により、任意のフォントファイルをサーバーにアップロードして使用することが可能になっています。

1. CSS3 @font-face ルール

@font-face ルールを使用すると、Web サイト側で用意した独自のフォントをページに適用できます。ユーザーが特定のフォントをインストールしていなくても、ブラウザがサーバーからフォントを自動的にダウンロードしてレンダリングします。

1.1 フォントフォーマットの互換性

現在、Web で使用される主要なフォントフォーマットは以下の通りです。

フォーマット説明
WOFF 2.0WOFF の次世代版。WOFF より圧縮率が 30% 以上高く、モダンブラウザで推奨される形式。
WOFFWeb Open Font Format。Web 専用に開発された圧縮済みフォントフォーマット。
TTF / OTFTrueType および OpenType。一般的なデスクトップ用フォント形式。
EOTEmbedded OpenType。古いバージョンの Internet Explorer (IE) で使用される形式。
SVG FontSVG 画像として定義されたフォント。古い iOS などのモバイルブラウザで使われていた。

2. @font-face の基本動作

@font-face ルールを適用する際、まずフォントの名前（例：myFirstFont）を定義し、そのフォントファイルが存在する URL（パス）を指定します。

ブラウザで要素にフォントを適用するには、通常の font-family プロパティで、定義したフォント名を指定するだけです。

3. カスタムフォントの使用方法

独自のフォントを使用するための基本的な手順は以下の通りです。

3.1 フォントの定義と適用例

まずは、独自のフォント名を定義し、ソースファイルを指定します。

/* フォントの定義 */
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

/* 要素への適用 */
div {
  font-family: myFirstFont;
}

4. 太字フォントの定義

太字（Bold）のテキストに対しても特定のフォントファイルを適用したい場合は、別の @font-face ルールを追加し、font-weight プロパティを指定します。

4.1 太字専用フォントの実装例

以下の例では、通常のテキストには sansation_light.woff を、太字のテキストには sansation_bold.woff を使用するように設定しています。

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

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

div {
  font-family: myFirstFont;
}

このように設定することで、ブラウザは font-weight: bold が適用された要素に対して、自動的に sansation_bold.woff を使用してレンダリングを行います。

5. CSS3 フォントデスクリプタ（Descriptors）一覧

@font-face ブロック内で使用できるプロパティ（デスクリプタ）は以下の通りです。これらを活用することで、フォントのバリエーションを詳細に制御できます。

デスクリプタ説明
font-familyフォント名を定義（必須）。
srcフォントファイルの URL を定義（必須）。
font-stretchフォントの幅（normal, condensed, expanded など）を定義。
font-styleフォントのスタイル（normal, italic など）を定義。
font-weightフォントの太さを定義。
unicode-rangeフォントがサポートする Unicode 文字の範囲を定義。

@font-face を利用する際は、ライセンスの有無を確認することが重要です。また、ページの読み込み速度を最適化するために、可能な限り WOFF2 形式を使用し、必要に応じて font-display プロパティを併用してレンダリングの優先順位を制御することをお勧めします。