ホームページ >ウェブフロントエンド >CSSチュートリアル >Windows と Mac でフォントのアンチエイリアスが異なるのはなぜですか? @font-face を使用して修正するにはどうすればよいですか?

Windows と Mac でフォントのアンチエイリアスが異なるのはなぜですか? @font-face を使用して修正するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-10 19:39:03609ブラウズ

Why Does Font Anti-Aliasing Differ Between Windows and Mac, and How Can I Fix it Using @font-face?

Windows と Mac でのフォント アンチエイリアシングの不一致: @font-face 解像度

Font Squirrel の @font-face キットを使用する場合、 Web 開発者は、Windows システムと Mac システムの間でフォント レンダリングの結果の不一致に遭遇することがよくあります。 Windows ブラウザでは、Mac ブラウザに比べてフォントが太くて粗いアンチエイリアシングで表示されます。

この問題を修正するために、Chrome では特に @font に含まれるフォント ファイル形式の順序を優先していることが判明しました。 -顔宣言。 SVG フォント ファイル形式をリストの先頭に移動し、Chrome がそれを優先できるようにすることで、アンチエイリアスの問題を解決できます。

改訂された @font-face 宣言:

@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

この改訂された宣言により、Chrome は SVG フォント ファイルを優先するようになり、一貫性のある高品質のアンチエイリアスが得られます。 Windows と Mac の両方のプラットフォームでのフォント レンダリング。

以上がWindows と Mac でフォントのアンチエイリアスが異なるのはなぜですか? @font-face を使用して修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。