@font-face

概要

@font-face は、Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。作成者が自身のフォントを提供できるようになるため、@font-face はユーザのコンピュータにインストールしているフォントの数に依存する必要性を排除します。@font-face は CSS のトップレベルだけでなく、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個の利点があります:

  1. フォントデータは圧縮されているので、未圧縮の等価な TrueType や OpenType ファイルを使用するのに比べて、WOFF を使用するサイトはバンド幅が少なく、より速くロードされます。
  2. TrueType や OpenType フォーマットのフォントをウェブの利用にライセンスしたくない多くのフォントベンダーは WOFF フォーマットのフォントでライセンスします。これはサイトのデザイナーの可能性を向上します。
  3. 他のフォントフォーマットとは異なり、プロプライエタリとフリーソフトウェアのブラウザベンダー双方が WOFF フォーマットを好んでおり、これはウェブにおける真のユニバーサルで相互運用可能なフォントフォーマットとなる可能性があります。

この例は単にダウンロードフォントを指定し、ドキュメントの 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 はそのフォントを用いてテキストを更新します。この動作によりユーザはテキストを早く読むことができます。

仕様

仕様書 策定状況 コメント
WOFF File Format 1.0 勧告 フォントフォーマットの定義
CSS Fonts Module Level 3 勧告候補  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 3.5 (1.9.1) 4.0 4.0 10.0 3.1
WOFF 3.5 (1.9.1) 6.0 9.0 11.10 5.1
SVG フォント 未サポート
未実装 (参照 バグ 119490)
yes 未サポート yes yes
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
基本サポート (有) 1.0 (1.9.1) ? 未サポート 10.0 (有)
WOFF 未サポート 5.0 (5.0) ? 未サポート 11.0 未サポート
SVG フォント 未サポート 未サポート
未実装 (参照 バグ 119490)
? 未サポート 10.0 (有)

注記

  • 埋め込みの OpenType フォント形式はプロプライエタリな機能なので、この表に記載していません。IE 9.0 以前では、IE はこの形式だけをサポートしていました。
  • TrueType と OpenType は WOFF で置き換えられたため、記載していません。

関連情報

MDN

外部サイト

添付ファイル

ファイル サイズ 日時 添付者:
VeraSeBd.ttf
58736 バイト 2008-10-13 20:44:48 Sheppy
webfont-sample.html
394 バイト 2009-05-18 15:58:36 Sheppy
sample1.html
2028 バイト 2011-12-09 16:41:17 arnaudbrousseau
SVGDXR.png
97470 バイト 2010-01-07 18:52:45 andydude

Document Tags and Contributors

Contributors to this page: Level, ethertank, sosleepy, Taken
最終更新者: ethertank,
サイドバーを隠す