CSSWebフォント
CSSの@ font-faceルール
Webフォントを使用すると、Webデザイナーはユーザーのコンピューターにインストールされていないフォントを使用できます。
使用したいフォントを見つけて購入したら、Webサーバーにフォントファイルを含めるだけで、必要に応じてユーザーに自動的にダウンロードされます。
「独自の」フォントはCSS@font-faceルール内で定義されます。
さまざまなフォント形式
TrueTypeフォント（TTF）
TrueTypeは、1980年代後半にAppleとMicrosoftによって開発されたフォント標準です。TrueTypeは、MacOSとMicrosoftWindowsオペレーティングシステムの両方で最も一般的なフォント形式です。
OpenTypeフォント（OTF）
OpenTypeは、スケーラブルなコンピューターフォントのフォーマットです。TrueTypeに基づいて構築されており、Microsoftの登録商標です。OpenTypeフォントは、今日、主要なコンピュータープラットフォームで一般的に使用されています。
Web Open Font Format（WOFF）
WOFFは、Webページで使用するためのフォント形式です。これは2009年に開発され、現在はW3C勧告となっています。WOFFは基本的に、圧縮と追加のメタデータを備えたOpenTypeまたはTrueTypeです。目標は、帯域幅に制約のあるネットワークを介したサーバーからクライアントへのフォント配布をサポートすることです。
Web Open Font Format（WOFF 2.0）
WOFF1.0よりも優れた圧縮を提供するTrueType / OpenTypeフォント。
SVGフォント/形状
SVGフォントを使用すると、テキストを表示するときにSVGをグリフとして使用できます。SVG 1.1仕様は、SVGドキュメント内にフォントを作成できるフォントモジュールを定義しています。CSSをSVGドキュメントに適用することもでき、@ font-faceルールをSVGドキュメントのテキストに適用することもできます。
埋め込みOpenTypeフォント（EOT）
EOTフォントは、Webページに埋め込まれたフォントとして使用するためにMicrosoftによって設計されたOpenTypeフォントのコンパクトな形式です。
フォントフォーマットのブラウザサポート
表の数字は、フォント形式を完全にサポートする最初のブラウザバージョンを示しています。
| Font format | |||||
|---|---|---|---|---|---|
| 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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
* IE：フォント形式は、「インストール可能」に設定されている場合にのみ機能します。
必要なフォントの使用
@font-faceルールでは; 最初にフォントの名前（myFirstFontなど）を定義してから、フォントファイルをポイントします。
ヒント：フォントURLには常に小文字を使用してください。大文字は、IEで予期しない結果をもたらす可能性があります。
HTML要素にフォントを使用するには、プロパティからフォントの名前（myFirstFont）を参照しfont-familyます。
例
@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ルール内で定義できるすべてのフォント記述子を示します。
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |