[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法

IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。

サイトのキャプチャ

The New Bulletproof @Font-Face Syntax

[ad#ad-2]

各ブラウザ・スマートフォンに対応させる@font-faceの指定方法

各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

対応ブラウザ

  • 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に一つより多くのフォントを指定すると、そのロードに失敗をし404エラーを返します。原因は、IEは括弧の始めから終わりまでをファイルとしてロードしようとするからです。

それを防ぐために「EOT」を使用し、一つだけ「?」を付加します。「?」をつけることで、EOTファイルだけをロードするようにIEをだまします。
それ以外は他のブラウザの仕様に従って、記述します。

「?」を付加する元となったのは下記の記事、とのことです。
Font face in your face.

[ad#ad-2]

参考

よく知られている「Mo' Bulletproofer @Font-Face CSS Syntax(2009年9月)」は、記述が少し複雑で、Androidなどには対応していません。

@font-face{ /* for IE */
font-family:FishyFont;
src:url(fishy.eot);
}
@font-face { /* for non-IE */
font-family:FishyFont;
src:url(http://:/) format("No-IE-404"),url(fishy.ttf) f

sponsors

top of page

©2018 coliss