血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > @font-face (CSS3 Web fonts)

xreaの広告です。

hosting by xrea.com

@font-face (CSS3 Web fonts)

作成:2008-08-09
更新:2011-10-27

Safari 3.1での実装により、一躍脚光を浴びることになったWeb Fonts(IE5から実は実装されていたけれど)。IEもIE9でwoff形式に対応したため、このページ全体にM+ OUTLINE FONTSを用いてみました。対応しているブラウザであれば、M+ FONTで文章が表示されているはずです。

coding

<style type="text/css">
/* @font-faceルールでフォントを記述 */
@font-face {
 font-family: mplus-1p;
 src: local(mplus-1p-light); /* ローカルにインストールされている場合 */
 src: url('./webfont/mplus-1p-light.woff') format("woff"),
      url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-light.ttf')
      format('truetype'); /* woffが読み込めない場合 */
}

/* フォントを適用 */
body {
 font-family: mplus-1p;
}
</style>

Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntaxを参考に、スタイルシートを組みました。内容としては、フォールバックとしてsourceforgeのttfを、ローカルにフォントがインストールされていれば、そちらを読むようにしてみました。

woff形式については、拙訳WOFF (Web Open Font Format)の導入を参照してください。woffの作成にはWOFFコンバータを使用しました。

M+ FONTS以外でフリーな日本語フォントのまとめとして、WebFonts として利用できるフリーの和文フォント | ヨモツネットが参考になると思います。ウェブフォントを使用したグッドなデザインについては、CSS3 「gradient」と「ウェブフォント(@font-face)」が参考になると思います。

検証に使用したブラウザ

Internet Explorer
MSIE 9.0; Trident/5.0 バージョン 9.0.3(リリース版)
Firefox
rv:7.0.1 Gecko/20100101 Firefox/7.0.1(リリース版)
Opera
Presto/2.9.168 Version/11.52(リリース版)
Safari
AppleWebKit/534.51.22 Version/5.1.1 Safari/534.51.22(リリース版)
Webkit(Google Chrome)
AppleWebKit/535.7 Chrome/16.0.912.12 Safari/535.7(devチャンネル版)

仕様書とリファレンス

CSS Fonts Module Level 3 (2011-10-04 WD) 4 Font resources
http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#font-resources
M+ OUTLINE FONTS
http://mplus-fonts.sourceforge.jp/webfonts/
Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax) - フォントブログ
http://blog.petitboys.com/archives/fontspring-syntax.html