概要EditEdit
@font-face は、Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。作成者が自身のフォントを提供できるようになるため、@font-face はユーザのコンピュータにインストールしているフォントの数に依存する必要性を排除します。@font-face は CSS のトップレベルだけでなく、CSS の条件付きグループ規則の中でも使えます。
これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
構文EditEdit
CSS 構文の読み方@font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
値
- <family-name>
- font プロパティの font face 値で使われることになるフォント名
- <uri>
- リモートフォントファイルの場所を表す URL、またはユーザのコンピュータ上のフォント名を
local("Font Name")形式で - <font-variant>
font-variant値- <font-stretch>
font-stretch値- <weight>
- font weight 値
- <style>
- font style 値
local() 構文を用いてユーザのローカルコンピュータのフォントを名前で指定することができます。もしフォントが見つからない場合、見つかるまで他のソースが検索されます。
サポートされるフォントフォーマット
- Gecko 1.9.1 (Firefox 3.5) は TrueType と OpenType フォントをサポートします。
- Gecko 1.9.2 (Firefox 3.6) は WOFFのサポートを追加しました。
WOFF について
WOFF (Web Open Font Format) は Type Supply、LettError、その他の機関の協力のもと、Mozilla によって開発された新しいウェブフォントフォーマットです。これは TrueType、OpenType、Open Font Format で利用されているテーブルベースの sfnt 構造と同じものの圧縮版を使用していますが、開発者とベンダーがライセンス情報を提供できるようにするための規定済みフィールドを含む、メタデータと private-use データ構造が追加されています。
WOFF の利用には3個の利点があります:
- フォントデータは圧縮されているので、未圧縮の等価な TrueType や OpenType ファイルを使用するのに比べて、WOFF を使用するサイトはバンド幅が少なく、より速くロードされます。
- TrueType や OpenType フォーマットのフォントをウェブの利用にライセンスしたくない多くのフォントベンダーは WOFF フォーマットのフォントでライセンスします。これはサイトのデザイナーの可能性を向上します。
- 他のフォントフォーマットとは異なり、プロプライエタリとフリーソフトウェアのブラウザベンダー双方が WOFF フォーマットを好んでおり、これはウェブにおける真のユニバーサルで相互運用可能なフォントフォーマットとなる可能性があります。
例EditEdit
この例は単にダウンロードフォントを指定し、ドキュメントの body 全体に適用します。
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
<This is Bitstream Vera Serif Bold.>
</body>
</html>この例では、 "Helvetica Neue Bold" のユーザのローカルコピーが使用されます。もしユーザがそのフォントをインストールしていない場合は（二つの異なる名前でトライしていま す）、"MgOpenModernaBold.ttf" という名前のダウンロードファイルが使用されます:
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}注意
- Gecko ではフォントのダウンロードは同一ドメイン制限に従います（フォントファイルはそれらが使用されているページと同じドメインにある必要があります）。HTTP access controls によりこの制限を緩和できます。
-
注記: TrueType、OpenType、WOFF のための MIME タイプが定義されていないため、ファイルの MIME タイプは考慮されません。
- Gecko がダウンロードされたフォントを使ったページを描画する際、ウェブフォントのダウンロードが終わるまでの間、まずユーザのコンピュータで利用可能な最適な CSS fallback フォントを用いて描画します。ウェブフォントのダウンロードが終了するたびに、Gecko はそのフォントを用いてテキストを更新します。この動作によりユーザはテキストを早く読むことができます。
仕様EditEdit
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WOFF File Format 1.0 The definition of 'WOFF font format' in that specification. |
勧告 | フォントフォーマットの定義 |
| CSS Fonts Module Level 3 The definition of '@font-face' in that specification. |
勧告候補 |
ブラウザ実装状況EditEdit
注記
- 埋め込みの OpenType フォント形式はプロプライエタリな機能なので、この表に記載していません。IE 9.0 以前では、IE はこの形式だけをサポートしていました。
- TrueType と OpenType は WOFF で置き換えられたため、記載していません。