2011.2.7 Monday - 12:25

Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax)

キーワード

現在Webフォント (Webfonts)として使えるフォント形式には、TrueTypeやOpentype、EOTに、SVG、WOFFがあり、ブラウザやOS、端末などによって各々使い分ける必要があります（参照：Webで任意の書体を使う方法まとめ）。

2009年秋頃、できるだけ多くの環境でWebフォント (Webfonts)を表示できるようにした分岐処理構文を、Paul Irish氏がBulletproof syntaxとして提案、後に改良されて、Smiley variationとして☺マークを使った改良版が登場し広く使われていました。（※私が特集記事を担当したWeb Designing 2010年8月号はこの記述方法で解説しています。）

このBulletproof syntaxは近年成長が著しいAndroidには未対応だったのですが、Richard Fink氏がAndroidにも対応したMo’ Bulletproofer syntaxをリリース。しかし二重の記述が必要でメンテナンスの面で不便でした。

前置きが長くなりましたが、そんな弱点を克服し、なおかつ最新のブラウザにも対応させたのが、Webフォントにも対応したオンラインフォントストアFontspringによるFontspring Syntax (The New Bulletproof@Font-Face Syntax)です。こちらが記述方法です。

@font-face {
	font-family: 'MyFont';
	src: url('myfont.eot?#iefix') format('eot'),  // for IE6-8
	     url('myfont.woff') format('woff'), // for IE9, Firefox3.6+, Chrome6+
	     url('myfont.ttf')  format('truetype'), // for Safari, iOS4.2+
	     url('myfont.svg#svgFontName') format('svg'); // for others
	}

.webfonts {
	font-family: 'MyFont';
}

対応ブラウザは、Safari 5.03、IE 6-9、 Firefox 3.6-4、Chrome 8、iOS 3.2-4.2、Android 2.2-2.3、Opera 11。これまでの構文に比べて、驚くほど分かりやすくかつシンプルになりました。この記述を参考にすれば問題ないのですが、簡単に技術的な解説をしたいと思います。

  • IE9以下ではsrc:で複数のフォントを指定すると無視されてしまう。

というバグがあり、かつローカル上のフォントをも探そうと試みます。これを回避するためには、EOTを先に指定しておき、かつ.eotの後に ? をつけておきます。こうすることで、IEには残りの記述をクエリーとして認識させることができるため、残りのWOFFやTTF/OTF、SVGの処理を無視させることができます。

続いて、今後WebフォントのスタンダードとなるWOFFを記述することで、最新のIE9やFirefox、Chromeなどに対応させています。現時点でSafariやiOS (Mobile Safari)はWOFFには非対応なので、旧バージョンのブラウザ用と合わせてTTFで指定しておきます。SVGはOperaや旧iOS用ですね。【追記】後に対応しました。

手持ちのフォントを簡単にWebフォント化できるジェネレータFont Squirrelの@font-face Kit Generatorでは、早速Fontspring Syntax (The New Bulletproof@Font-Face Syntax)をデフォルトとして採用しています。
CSSのコードも出力してくれるので大変便利です。

今回で4回目の更新となりましたが、再度記述方法が更新する可能性があります。このような煩わしさを解消するには、やはりWebフォントサービスを利用するのがよいでしょう。

通常デスクトップアプリケーション用のフォントは、変換などを行いWebフォントとして使うことは許可されていません。必ず使用許諾を確認するようにしてください。

Fontspring Syntax (The New Bulletproof@Font-Face Syntax)
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

PAGE TOP