CSS3フォント
CSS3 フォント
CSS3 @font-face ルール
以前のバージョンの CSS3 では、Web デザイナーはユーザーのコンピューターに既にインストールされているフォントを使用する必要がありました。
CSS3 を使用すると、Web デザイナーは好きなフォントを使用できます。
使用したいフォント ファイルを見つけたら、そのフォント ファイルを Web サイトに追加するだけで、必要なユーザーに自動的にダウンロードされます。
選択したフォントは、@font-face ルールを使用して新しい CSS3 バージョンで記述されます。
「独自の」フォントは CSS3 @font-face ルールで定義されます。
必要なフォントを使用してください
新しい @font-face ルールでは、最初にフォントの名前 (myFirstFont など) を定義してから、フォント ファイルを指定する必要があります。
ヒント: URL には小文字のフォントを使用してください。IE では大文字を使用すると予期しない結果が生じます。
HTML 要素にフォントを使用する必要がある場合は、font-family 属性を通じてフォントの名前 (myFirstFont) を参照してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div>
</body>
</html>太字テキストを使用します
太字テキストを含む別の @font-face ルールを追加する必要があります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体。
</div>
<p><b>注意:</b> Internet Explorer 8以及更早版本的浏览器 @font-face rule.</p>
</body>
</html>ファイル「Sansation_Bold.ttf」は、Sansation フォント Bold を含む別のフォント ファイルです。
このテキストにフォント ファミリ「myFirstFont」を使用しているブラウザでは、テキストが太字で表示されます。
このようにして、同じフォントに対して多数の @font-face ルールを設定できます。
CSS3 フォントの説明
次の表に、すべてのフォントの説明とその内部の @font-face ルール定義を示します。
フォントファミリー
| は必須です。フォントの名前を指定します。 | src | |
|---|---|---|
| URL | 必須。フォントファイルのURLを定義します。 | フォントストレッチ |
| 標準 | 凝縮 | 超凝縮極凝縮 |
| 拡張 |
| 斜体|
| 100200 | |
| 400 |
| |
