CSS3 Pre-Reference



@font-face

フォントリソース指定

試す

ライセンス関連の懸念があるため、サンプルは無しです。

コメントする


対応ブラウザ

Firefox
3.5~
Chrome/Safari
3.1~
Opera
10~
InternetExplorer
すべて

パラメータ

レベル 2
適用メディア Visual
参考文献 CSS Fonts Module Level 3#4.1 The @font-face rule

解説

フォントのリソースを指定します。

このプロパティはCSS3になって新しくなった部分は特にありません。

書き方は以下のようになります。

@font-face {
<記述子>: <値>;
<記述子>: <値>;
<記述子>: <値>;

}

つまり、CSSのようにプロパティと値のペアを記述します。

<記述子>と<値>のペアに利用できるものは以下の通り:

font-family
ファミリー名を指定します。ここで指定した名称を”font-family”で利用します。省略不可。
src
フォントリソースを指定します。URLとそのリソースのフォーマットをカンマ区切りで列挙します。省略不可。つまり、以下のような値を指定します:
url(DoulosSILR.ttf) format("opentype","truetype-aat"), url(../fonts/LateefRegOT.ttf) format("opentype");
font-style
そのフォントのスタイルを指定します。利用できる値はfont-styleと同様です。省略時は”normal”。”font-family”で指定時のマッチングに利用されます。
font-weight
そのフォントの太さを指定します。利用できる値はfont-weightと同様です。省略時は”normal”。利用目的は同上。
font-stretch
そのフォントの変倍を指定します。利用できる値はfont-stretchと同様です。省略時は”normal”。利用目的は同上。
unicode-range
そのフォントがサポートしている範囲をUnicodeで指定します。省略時は全範囲。以下のように指定します:
U+0-7F(ASCII文字のみ)、U+590-5ff(ヘブライ文字)、U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F(日本語の一般的な感じ、ひらがな、カタカナ、円マーク)

なお、ウェブフォント利用の際は、フォントのライセンス、著作権、商用利用可否には十分気をつけてください。

ウェブフォントにはEOF、EOT、WOFF、TTF、OTFなどの多数の形式がありますが、既に各種変換ツール/サービスがウェブ上にいくつか出回っていますので、活用してください。一例:@font-face Generator

関連の話題で、Google Font APIという無償サービスが2010年5月にリリースされ、英文フォントのみですがフリーで利用できるウェブフォントとして注目を集めました。

トラックバック

投稿されたコメント