サイトで Web フォント Bitter を使用しています。最初は Google Web Fonts から埋め込んでいましたが、Google Chrome/Win では .woff が適切にレンダリングされませんでした (小さいサイズでは奇妙なギザギザのアーティファクトがありました)。少しグーグルで調べたところ、Chrome/win では通常、その形式に問題があり、SVG を使用すると解決できることがわかりました。つまり、Google Web Fonts を使用するのではなく、自分でファイルをホスト/埋め込む必要がありました。Font Squirrel を使用して適切な @font-face コードを取得しましたが、Windows 上の IE9/Firefox でテストするまではすべて問題ないようでした。どちらのブラウザも、大文字の T を残りの大文字よりも小さくレンダリングしています (このhttp://d.pr/i/LItyのように)
これが私のフォントフェイスコードです
@font-face {
font-family: 'bitter';
src: url('fonts/bitter-regular-webfont.eot');
src: url('fonts/bitter-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/bitter-regular-webfont.svg#bitterregular') format('svg'),
url('fonts/bitter-regular-webfont.ttf') format('truetype'),
url('fonts/bitter-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bitter';
src: url('fonts/bitter-bold-webfont.eot');
src: url('fonts/bitter-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/bitter-bold-webfont.svg#bitterbold') format('svg'),
url('fonts/bitter-bold-webfont.ttf') format('truetype'),
url('fonts/bitter-bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Bitter';
src: url('fonts/bitter-italic-webfont.eot');
src: url('fonts/bitter-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/bitter-italic-webfont.svg#bitteritalic') format('svg'),
url('fonts/bitter-italic-webfont.ttf') format('truetype'),
url('fonts/bitter-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
}
この埋め込みをどのように理解すれば、ブラウザは受け入れることができる最初のファイル形式を使用し、残りを無視しますか? ブラウザーの互換性を正しく覚えていれば、IE は EOT を使用し、Chrome は SVG を使用し、Firefox は TTF を使用していることになります。そのため、最初は実際のファイルに問題があるように見えますが、Firefox は Mac でフォントを正常にレンダリングしています。
http://dev.thesmackpack.comでライブを見ることができます。フォントファイルを修正したり、適切な形式を使用したりするためにできることはありますか?
編集: 元の作成者からフォントのコピーをダウンロードし、ファイルを変更したすべてのオプションのチェックを外して、Font Squirrel ジェネレーターを実行しました。T は修正されましたが、FF と IE で不適切なレンダリング アーティファクトが表示されるようになりました。http://d.pr/i/5sVT