CSS @font-faceルール

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

使用したいフォントを見つけて購入したら、そのフォントファイルをWebサーバーに含めるだけで、必要に応じてユーザーに自動的にダウンロードされます。

「独自の」フォントはCSSの@font-faceルール内で定義されます。

さまざまなフォント形式

TrueTypeフォント(TTF)

TrueTypeは、1980年代後半にAppleとMicrosoftによって開発されたフォント標準です。TrueTypeは、MacOSとMicrosoft Windowsオペレーティングシステムの両方で最も一般的なフォント形式です。

OpenTypeフォント(OTF)

OpenTypeは、スケーラブルなコンピューターフォントの形式です。TrueTypeに基づいて構築されており、Microsoftの登録商標です。OpenTypeフォントは、今日の主要なコンピュータープラットフォームで一般的に使用されています。

Web Open Font Format (WOFF)

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

Webオープンフォント形式(WOFF 2.0)

WOFF1.0より圧縮率の高いTrueType/OpenTypeフォント。

SVGフォント/シェイプ

SVGフォントを使用すると、テキストを表示するときにSVGをグリフとして使用できます。SVG1.1仕様では、SVGドキュメント内でフォントを作成できるようにするフォントモジュールが定義されています。CSSをSVGドキュメントに適用することもでき、@font-faceルールをSVGドキュメントのテキストに適用することもできます。

埋め込み OpenType フォント(EOT)

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

フォント形式のブラウザーサポート

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

必要なフォントを使用する

HTML要素のフォントを使用するには、font-familyプロパティでフォントの名前(myFirstFont)を参照します。

太字テキストの使用

太字テキスト用の記述子を含む別の@font-faceルールを追加する必要があります。

ファイル「sansation_bold.woff」は別のフォントファイルで、Sansationフォントのボールド文字が含まれています。

ブラウザーは、font-family "myFirstFont"のテキストを太字でレンダリングする必要がある場合は常にこれを使用します。

このような形で同じフォントに複数の@font-faceルールを設定出来ます。

CSSフォント記述子

以下の表は、@font-faceルールの中で定義できるすべてのフォント記述子の一覧です。