3

サイトで 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

4

1 に答える 1

0

残念ながら、この問題に対する十分な解決策を見つけることができませんでした。Google Web Fonts のバージョン (ぎざぎざのアーティファクトはあるが、文字のサイズが壊れていない) に戻し、フォント サイズを変更してアーティファクトを最小限に抑えました (特定のサイズでは悪化していました)。それはまだ素晴らしいことではありませんが、私ができる最善のことです.

ここで学ぶべき教訓: 開発を開始する前に、すべての OS のすべてのブラウザーですべてのサイズの Web フォントをテストしてください。

于 2012-09-12T14:14:55.137 に答える