ルール名 | @font-face |
---|---|
構文 |
@font-face { ... }
|
サポート | C3 / e5.5 / Fx3.5 / Ch4 / Op10 / Sa3.1 |
Webフォントを使用可能にします。下記の記述で、font-family にフォント名として myfont を指定可能になります。format() はフォント形式(format名)を指定します。省略可能です。@font-face は、CSS2.0 で定義されましたが、CSS2.1 で一度削除され、CSS3 で再定義されました。
@font-face { font-family: myfont; src: url(http://www.yyy.zzz/myfont.woff) format("woff"); } * { font-family: myfont; }
利用可能なフォント形式には下記などがあります。
形式 | 説明 | format名 | 拡張子 | サポート |
---|---|---|---|---|
WOFF | Web Open Font Format | woff | .woff | IE9 / Fx3.6 / Ch6 / Sa5.1 / Op11 |
EOT | Embedded OpenType | embedded-opentype | .eot | IE4 |
OTF | OpenType Font | otf | .otf .ttf | Fx3.5 / Ch4 / Sa3.1 / Op10 |
TTF | TrueType Font | truetype | .ttf | Fx3.5 / Ch4 / Sa3.1 / Op10 |
SVG | Scalable Vector Graphics | svg | .svg | Ch4 / Sa3.1 |
SVGZ | Gzipped SVG | svg | .svgz |
様々なフォントをダウンロードできるサイトがあります。
フォントの形式を変換できるサービスもあります。
下記の例では、システムに Marumoji フォントがあればそれを使用し、無ければ EOT、無ければ WOFF、無ければ TTF 形式のフォントを使用します。
@font-face { font-family: myfont; src: local(Marumoji), url(font/Marumoji.eot) format('embedded-opentype'), url(font/Marumoji.woff) format('woff'), url(font/Marumoji.ttf) format('truetype'); }
フォントファイルは通常、同じドメインのサーバからしかダウンロードできません。他のドメインからダウンロードするには、CORS(Cross-Origin Resource Sharing)を用います。