SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

ブラウザで使うフォントを指定する@font-faceの登場はIE4やIE5の時代まで遡る。ほかの主要ブラウザはFirefox 3.5、Chrome 4、Safari 3.1、Opera 10から対応、CSS2でもすでに定義されている。しかし、デザインテクニックとして注目されはじめたのは比較的新しく、WOFFが登場した最近のできごととなる。

最終的にはどのブラウザもWOFFに対応することになると見る向きが多いが、現在のところ主要ブラウザがサポートするフォントフォーマットが違っている。こうした状況を加味し、どのブラウザでも同じフォントを使えるようにする方法がBehind the Geek Out Scenes: Fancy Fonts and Jaunty Input Fields - SitePointで紹介されている。

ブラウザ EOT TTF OTF SVG WOFF
IE9 ○ ○
IE8- ○
Firefox ○ ○ ○
Safari ○ ○ ○
Opera ○ ○ ○
Chrome ○ ○ ○

現在のブラウザがサポートする@font-faceフォントは上記表のようになっている。つまり、EOTとTTFの双方に対応すれば、ほぼすべてのブラウザに対応できることになる。Behind the Geek Out Scenesではこれを実現するためのテクニックとしてPaul Irish氏のBulletproof @font-face syntaxを採用。EOTとTTFファイルの双方を用意し、それぞれ対応した方が使われるようにするテクニックを紹介している。

紹介されているテクニックを簡単に試せるようにまとめたものと、それぞれのブラウザでの閲覧結果を次に掲載する。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  @font-face {
    font-family: 'Tangerine';
    src: url('Tangerine_Regular.eot');
    src: local('☺'),
      url("Tangerine_Regular.woff") format("woff"),
      url("Tangerine_Regular.ttf") format("truetype");
  }
  #title {
    font-size: 300%;
    font-family: 'Tangerine';
  }
  #title {
    -webkit-transform: rotate(-13deg);
    -moz-transform: rotate(-13deg);
    -o-transform: rotate(-13deg)
  }
  </style>
</head>
<body>
<p id="title">MYCOM Journal</p>
</body>
</html>

@font-faceおよびtranform: rotate適用例 - IE8 on Windows 7

@font-faceおよびtranform: rotate適用例 - Firefox 4 beta 5 on Windows 7

@font-faceおよびtranform: rotate適用例 - Chrome 7開発版 on Windows 7

@font-faceおよびtranform: rotate適用例 - Opera 10.70開発版 on Windows 7

@font-faceおよびtranform: rotate適用例 - Safari 5 on Mac OS X Snow Leopard

フォントはGoogle Font Directoryで採用されているTangerine Font Familyのレギュラータイプを使用。TTFファイルTangerine_Regular.ttfをダウンロードしてHTMLファイルと同じフォルダにおいてある。なお、TTFファイルだけではIEでこのフォントが使われないため、TTFからEOT (Embedded OpenType)フォントを生成してTangerine_Regular.eotファイルとして同じ場所にコピーしてある。

Behind the Geek Out Scenesでは@font-face以外にも、transform: rotateで対象を回転させる効果もかけている。回転については今のところIEではサポートされていない。