CSS3ウェブフォント- @font-faceルール
ウェブフォントは、Webデザイナーがユーザーのコンピュータにインストールされていないフォントを使用することができます。
あなたが発見したときに/あなたが使用したいフォントを買って、ちょうどあなたのWebサーバ上のフォントファイルが含まれ、必要なときには、自動的にユーザーにダウンロードされます。
あなたの「自分」のフォントはCSS3の内で定義されている@font-faceルール。
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
フォント形式の種類
TrueTypeフォント（TTF）
TrueType AppleとMicrosoftが、1980年代後半に開発されたフォントの標準である。 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ドキュメント内のテキストに適用することができます。
組み込みOpenTypeフォント（EOT）
EOTフォントはのコンパクトな形態でOpenType Webページ上の埋め込みフォントとして使用するためにMicrosoftが設計したフォント。
フォントフォーマット用のブラウザのサポート
表中の数字は、完全フォントフォーマットをサポートする最初のブラウザのバージョンを指定します。
| フォントのフォーマット | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0 * | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | サポートされていません | 36.0 | 35.0 * | サポートされていません | 26.0 |
| SVG | サポートされていません | 4.0 | サポートされていません | 3.2 | 9.0 |
| EOT | 6.0 | サポートされていません | サポートされていません | サポートされていません | サポートされていません |
* IE：「インストール可能」に設定したときにフォントフォーマットにのみ機能します。
* Firefoxをデフォルトでサポートされているが、有効にすることができません（WOFF2を使用するように「真」にフラグを設定する必要があります）。
あなたがしたいフォントを使用しました
CSS3のでは@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同じフォントのためのルールを。
練習で自分自身をテスト！
CSS3フォントの記述
次の表は、内部で定義できるすべてのフォント記述子一覧表示されます@font-faceルールを：
| ディスクリプタ | 価値観 | 説明 |
|---|---|---|
| font-family | name | 必須。 フォントの名前を定義します |
| src | URL | 必須。 フォントファイルのURLを定義します |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | 任意。 フォントを延伸する方法を定義します。 デフォルトは「正常」であります |
| font-style | normal italic oblique | 任意。 フォントがスタイル付けをする方法を定義します。 デフォルトは「正常」であります |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 任意。 フォントの太さを定義します。 デフォルトは「正常」であります |
| unicode-range | unicode-range | 任意。 フォントがサポートするUnicode文字の範囲を定義します。 デフォルトは「U + 0-10FFFF」であります |