血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > @font-face (CSS3 Web fonts)
hosting by xrea.com
作成：2008-08-09
更新：2011-10-27
Safari 3.1での実装により、一躍脚光を浴びることになったWeb Fonts（IE5から実は実装されていたけれど）。IEもIE9でwoff形式に対応したため、このページ全体にM+ OUTLINE FONTSを用いてみました。対応しているブラウザであれば、M+ FONTで文章が表示されているはずです。
<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）」が参考になると思います。