Google Font APIはどうやってマルチブラウザ対応しているのか

WebFontsを読み込む場合のCSSの書き方はブラウザごとに異なるため、こんなsyntaxを使う必要がある。
しかし、Google Font APIで読み込むCSSをではそんな書き方はしていない。
そこで、試しにTangerineのCSSを各ブラウザで読み込んでみて、Google Font APIがどのようにマルチブラウザ対応をしているのか調べてみた。


IE 8

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE');
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはIE専用。
2行目のsrcはIE9用？


Firefox 4

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはChromeと同じ。


Chrome 10

@media screen {
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
}

URLはFirefoxと同じ。
@mediaでscreenだけにしているのはAndroid対策か何かか？


Safari 5 (for Windows)

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafari用（Operaと共通）。アンダーバーで区切ってるのはiPhone用（iOS用？）が別にあったりするためか？


Opera 11

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafariと同じ。OperaもTrueType組。


まとめ
おそらくUser-Agentで判断して振り分けているだけのようだ。
フォントファイルは大きく分けると下記の3つに分かれるようだ。

• IE8-
  
• IE9+、Firefox、Chrome
• Safari、Opera
  

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