css - 不適切なフォント レンダリング - 原因と回避策は?

Question

Bebas Neue書体を多用したウェブサイトを構築しています。よくあることですが、FontSquirrelに面倒な仕事を任せて、Beba Neueページ@font-faceからプレビルドを直接ダウンロードしました。

ダウンロードしたスタイルシート + フォントを自分の Web サイトに直接インポートしました。私が得たのは、Chrome や Firefox などの大規模なブラウザーでのフォントのレンダリングが非常に悪いことです。ここにたくさんのスクリーンショットがあります：

クロム（かなり悪い）：

Firefox（恐ろしい、私の主は慈悲を持っています）：

Opera（非常にまともです、それは私がどこでも欲しいものです）：

サファリ (パーフェクト):

CSS でフォ​​ント レンダリングまたはアンチエイリアス オプションを指定しませんでした。一方、私は使用しますnormalize.css。

このような恐ろしいレンダリングの原因は何でしょうか?

注: 1 つの質問に対してすでにあまりにも多くの写真を投稿しましたが、Grand Hotelフォントも使用していて、それはさらに悪いことです (ただし、少なくとも各ブラウザーは一貫して動作します)。

Answer 1

私のフォントでも同じ問題がありました。
太字スタイル要素に適用される mixin を減らして、太字スタイルの問題を修正しました。

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}