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フォント記述子