CSS3フォント

ルールCSS3する@ font-face

CSS3の以前のバージョンでは、Webデザイナーは、すでにフォントがインストールされているユーザーのコンピュータ上で使用する必要がありました。

CSS3を使用して、Webデザイナーは、彼/彼女が好きなものは何でもフォント使用することができます。

あなたは、フォントを使用したいファイルを見つけた場合、フォントファイルは、単にウェブサイトに含まれる、それは自動的にユーザーのニーズにダウンロードされます。

CSS3する@ font-face規則の説明上の新しいバージョンでお好みのフォント。

あなたの「自分」のフォントはCSS3の@フォントフェースルールで定義されています。

ブラウザのサポート

表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。

Internet Explorerの9+、Firefoxの、クロム、サファリ、オペラのサポートWOFF（ウェブオープンフォントフォーマット）フォント。

Firefoxの、クロム、サファリ、オペラサポートの.ttf（TrueTypeフォント）と.OTF（OpenTypeの）フォントフォントの種類）。

クロム、SafariやOperaはまた、SVGフォントをサポート/崩壊しました。

Internet Explorerはまた、EOT（組み込みのOpenType）フォントをサポートしています。

注：Internet Explorer 8の以前のバージョンでは、新しいする@ font-face規則をサポートしていません。

あなたは、フォントを使用する必要があります

新しいする@ font-face規則では、最初に（例えばmyFirstFontとして）フォント名を定義する必要があり、その後、フォントファイルを指しています。

	ヒント：URLは小文字のフォントを使用し、IEの大文字は、予期しない結果を生成します

font-familyプロパティでフォント名（myFirstFont）を参照するために、HTML要素のフォントを使用するには：

例

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

div
{
font-family:myFirstFont;
}
</style>

»をお試しください

太字のテキストを使用します

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

例

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

»をお試しください

ファイル "Sansation_Bold.ttfは「Sansation太字が含まれている別のフォントファイルです。

このブラウザのテキストフォントファミリ時間」myFirstFont」を使用することは大胆としてレンダリングされるべきです。

だから、同じフォント@フォント-face規則の多くを持つことができます。

CSS3フォントの説明

次の表に、すべてのフォント記述とする@ font-faceルール定義の内部を示しています。