CSS3の@フォントフェースルール

名前のフォントを指定し"myFirstFont" 、そしてそれを見つけることができるURLを指定します。

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

もっと"Try it Yourself"以下の例。

定義と使用法

する@ font-face規則では、Webデザイナーは、もはやのいずれかを使用する必要はありません"web-safe"のフォントを。

新しいする@ font-face規則では、最初のフォントの名前を定義する必要があります(eg myFirstFont)その後、フォントファイルを指しています。

ヒント：フォントURLの小文字を使用してください。大文字はIEで予期しない結果を与えることができます！

HTML要素のフォントを使用するには、フォントの名前を参照してください(myFirstFont)のfont-familyプロパティを通じて：

div {
font-family: myFirstFont;
}

@フォント-face規則は、Internet Explorer、Firefoxの、オペラ、クロム、およびSafariでサポートされています。

表中の数字は、完全フォントフォーマットをサポートする最初のブラウザのバージョンを指定します。

*エッジとIE：なるように設定したときにフォントフォーマットでのみ動作します"installable" 。

* Firefoxのデフォルトでは無効になったが、有効にすることができます（にフラグを設定する必要があり"true" WOFF2を使用します）。

@font-face {
font-properties
}

フォント記述子	価値観	説明
フォントファミリー	name	必須。フォントの名前を定義します。
SRC	URL	必須。定義しURL(s)フォントがからダウンロードする必要があります
フォントストレッチ	ノーマル凝縮されました超凝縮余分な凝縮半凝縮拡張しました半拡大超拡大超拡大	任意。フォントを延伸する方法を定義します。デフォルト値は"normal"
フォントスタイル	ノーマルイタリック斜めの	任意。フォントがスタイル付けをする方法を定義します。デフォルト値は"normal"
フォントの太さ	ノーマル大胆な 100 200 300 400 500 600 700 800 900	任意。フォントの太さを定義します。デフォルト値は"normal"
Unicodeの範囲	unicode-range	任意。フォントがサポートするUnicode文字の範囲を定義します。デフォルト値は"U+0-10FFFF"

あなたは、太字テキストの記述子を含む別の@フォントフェースルールを追加する必要があります。

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

ファイル"sansation_bold.woff" Sansationフォントのための大胆な文字が含まれている別のフォントファイルです。

フォントファミリとテキストの一部たびブラウザはこれを使用します"myFirstFont"太字としてレンダリングする必要があります。

この方法は、あなたは、同じフォントのための多くのする@ font-faceルールを持つことができます。