概要
The @font-face
は、Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。作成者が自身のフォントを提供できるようになるため、@font-face
はユーザのコンピュータにインストールしているフォントの数に依存する必要性を排除します。@font-face
は CSS のトップレベルだけでなく、CSS の条件付きグループ規則の中でも使えます。
構文
記述子
font-family
- font プロパティの font face 値で使われることになるフォント名(すなわち、font-family: <family-name>;)
src
- リモートフォントファイルの場所を表す URL、またはユーザのコンピュータ上のフォント名を
local("Font Name")
形式で指定します。local()
構文を用いてユーザのローカルコンピュータのフォントを名前で指定することができます。もしフォントが見つからない場合、見つかるまで他のソースが検索されます。 font-variant
font-variant
値font-stretch
font-stretch
値font-weight
font-weight
値font-style
font-style
値unicode-range
- font-face 規則で定義する Unicode コードポイントの範囲。
形式文法
@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>; ] }where
<family-name> = <string> | <IDENT>+
<feature-tag-value> = <string> [ <integer> | on | off ]?
例
この例は単にダウンロードフォントを指定し、ドキュメントの 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("https://mdn.mozillademos.org/files/2468/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; }
注意
- フォントのダウンロードは同一ドメイン制限に従います(フォントファイルはそれらが使用されているページと同じドメインにある必要があります)。HTTP access controls によりこの制限を緩和できます。
- TrueType、OpenType、WOFF のための MIME タイプが定義されていないため、ファイルの MIME タイプは考慮されません。
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
WOFF File Format 2.0 WOFF2 font format の定義 |
勧告候補 | 新しい圧縮アルゴリズムのフォントフォーマットを定義 |
WOFF File Format 1.0 WOFF font format の定義 |
勧告 | フォントフォーマットの定義 |
CSS Fonts Module Level 3 @font-face の定義 |
勧告候補 |
ブラウザ実装状況
機能 | 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 |
WOFF2 | 39 (39)[1] | 38 | 未サポート | 24 | 未サポート |
SVG フォント[2] | 未サポート[3] | (有) | 未サポート | (有) | (有) |
unicode-range |
36 (36) |
(有) | 9.0 | (有) | (有) |
機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基本サポート | (有) | 1.0 (1.9.1) | ? | 未サポート | 10.0 | (有) |
WOFF | 4.4 | 5.0 (5.0) | 10.0 | 未サポート | 11.0 | 5.0 |
WOFF2 | 未サポート | 39.0 (39.0)[1] | 未サポート | ? | ? | 未サポート |
SVG フォント[2] | ? | 未サポート[3] | ? | 未サポート | 10.0 | (有) |
unicode-range |
? | 36.0 (36.0) | ? | 未サポート | ? | (有) |
[1] Gecko 35 から Gecko 38 の WOFF2 サポートは、Aurora および Nightly バージョンのみ有効化していました。Beta および Release バージョンで使用するには、設定項目 gfx.downloadable_fonts.woff2.enabled
を true
にしなければなりません。
[2] OpenType フォントパッケージ内の SVG グリフを許可するほうが好ましいため、SVG フォントのサポートは廃止されました。
[3] Gecko では SVG フォントの実装を登録した バグ 119490 がありましたが、SVG フォントが OpenType フォントパッケージ内の SVG グリフに置き換わったため、バグが閉じられました。
注記
- 埋め込みの OpenType フォント形式はプロプライエタリな機能なので、ブラウザ実装状況の表に記載していません。IE 9.0 以前では、IE はこの形式だけをサポートしていました。
- TrueType と OpenType は WOFF で置き換えられたため、記載していません。