☰

Windows と Mac での @font-face アンチエイリアシング 質問する

tag-icon • tag-icon css font-face antialiasing font-embedding
Windows と Mac での @font-face アンチエイリアシング 質問する

私は使ったことがあるhttp://www.fontsquirrel.com/@font-face キットを作成します。
正常に動作しますが、Windows の結果は Mac の結果とは異なります。Windows
では、フォントのアンチエイリアシングが間違っているようです。
Macのフォントこれは、Mac で FF、Chrome、または Safari (すべて最新バージョンに更新済み) を使用した場合の結果です
Windows のフォント。これは、Windows で FF または Chrome を使用した場合の結果です。

ご覧のとおり、結果は同じではありません。Windows ではフォントが太く粗くなっています。
どうすれば解決できますか?

ベストアンサー1

私も Chrome でこの問題に悩まされていましたが、その答えが見つかったと思います。

Chrome はデフォルトの fontsquirrel.com で生成された CSS を好みませんでした。

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

修正するには、SVG 行を移動しました。

url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')

リストの一番上に。これでアンチエイリアス フォントが表示されます。Chrome は一番になりたいようです...

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot?#iefix') 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;
}

あなたにも効果があることを願っています。お楽しみください!

おすすめ記事