css - @font-face が非常に重いフォントウェイトを与えたり、アンチエイリアスが悪い

Question

気に入ったオープン フォント ( Crete Round ) を見つけて、それを使って Photoshop でいくつかの画面をデザインしました。CSS をセットアップするときが来て、Google フォントと fontsquirrel.com のダウンロード可能な「キット」 (4 種類のフォントと既製のスタイルシートを含む zip ファイル) の両方を使用してみましたが、どちらも Mac で奇妙な結果をもたらしました。 .

Photoshop — 私が望むもの:

Yuck — fontsquirrel.com の @font-face キットを使用した Mac 上の Chrome (および Safari):

Google フォントを使用する Mac 上の Chrome (および Safari) (基本的には同一):

GOOD —Windows 上の Chrome (fontsquirrel):

良い— ハック。不透明度 (テキストの色のアルファではない) が 1.0 未満の場合、Chrome で良い結果が得られることがわかりました(ただし、Safari はまだ悪い結果でした)。

fontsquirrel を使用する Mac 上の Chrome で、次のように指定しopacity:0.999;ます。

ここで何が起こっているのか、または私が間違っている可能性があることについて誰か考えがありますか?

Answer 1

あなたが何か間違ったことをしているとは思いません。また、スタイルが絶対的に重要なテキストの代わりに画像を使用する以外に、それを回避する方法はないと思います.

さまざまなオペレーティング システムでのレンダリング エンジンについて説明しているTHIS LINKを見つけました (さまざまなブラウザーも考慮に入れています)。

これが役立つことを願っています！

Answer 2

試す

html { -webkit-font-smoothing: antialiased; }