web-dev-qa-db-ja.com

WindowsとMacでの@ font-faceアンチエイリアス

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

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

cssfont-faceantialiasingfont-embedding
25
pasine

これは、WinXPでフォントがレンダリングされる通常の見苦しい方法のように見えます。一部の（IMO：見当違いの）人々はそれを好んでさえいます。

XPでデスクトップフォントのアンチエイリアスを取得するには、オンにする必要があります。[画面のプロパティ]-> [外観]-> [効果]->次の方法でスクリーンフォントの縁を滑らかにします。 > ClearType。デフォルト設定の「標準」は、昔からあるWindowsの「フォントのにじみ」手法であり、大きなフォントサイズでのみ有効にする必要があり、混乱を招くことがよくあります。

IE7 +には、デフォルトでオンになっているオプションがあり、常にClearTypeアンチエイリアスを使用してWebブラウザーでフォントをレンダリングします。他のWebブラウザーは、ユーザーが構成したフォントのレンダリング方法を尊重します。多くの人々がまだこの有益な設定をオフにしているのは残念ですが、それはあなたの問題ではありません。

（Chrome performsomeanti-aliasing to text）を作成するための厄介なハックがあります：

text-shadow: 0px 0px 1px rgba(0,0,0,0);

しかし、私は真剣にそれをお勧めしません。）

「次の方法を使用...」設定を「標準」に設定してフォントを取得しようとするときにできることの1つsomeアンチエイリアスの形式は、問題のフォントにGASPテーブルがないことを確認することで、昔ながらのTrueTypeレンダラーに特定のフォントサイズでアンチエイリアスを無効にするように指示します。 GASPテーブルを変更できます フォントエディターを使用 またはttfgasp.exeコマンドラインツール。

8
bobince

私も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;
}

それもあなたのために働くことを願っています。楽しい！

48
maximo

誰もこれに言及しなかったのには驚きです。わずかな-webkit-text-strokeを適用すると、使用しているフォントの形式（拡張子）が何であれ、私にとってはうまくいきます。 -webkit-text-stroke：1pxを推奨する人もいますが、私にはフォントの見た目が変わりすぎます（強くしすぎます）。しかし、0.5pxの場合、ストロークはほとんど目立たなくなり、アンチエイリアスがオンになります。

-webkit-text-stroke: 0.5px;

Htmlタグのcss定義に入れれば完了です。

14
Pere

Myriad ProのようなVegurと呼ばれるフォントもありますが、Webサイトに埋め込むことは合法です。お役に立てば幸いです。

4
Maximilian Motel

少し調べてみましたが、違いを生むと思うハックを見つけました。これをフォント変数を使用してCSSに配置します。

-webkit-transform: rotate(-0.0000000001deg);

同様に、黒一色（#000000）も問題になりません。非常に暗い色を使用することが私に役立つようでした。

3
Sparky

Windowsまたはブラウザ自体の設定を変更することは、解決策ではありません。 @font-faceを使用する場合、フォントは、ご使用のブラウザだけでなく、すべてのブラウザのすべての画面で見栄えをよくする必要があります。

のトリック

text-shadow: 0 0 1px rgba(255,255,255,0.1);

または

-webkit-transform: rotate(-0.0000000001deg);

Chrome 16.0.912.63 m、Windows Vistaでは動作しなくなりました。

私はこの問題を克服する方法を見つけることができませんでした。

2
Lubo Zviera

これは、「Chromeレンダリングの問題」を修正するために使用するコードです。

@font-face {
    font-family: 'fontname';
    src: url('fonts/fontname.eot');
    src: url('fonts/fontname.eot') format('embedded-opentype'),
    url('fonts/fontname.svg') format('svg');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: 'fontname';
        src: url('fonts/fontname.ttf') format('truetype');
    }
}

:)それは私のために働きます...最後に！

2
apofiSSo

-webkit-transform：rotate（-0.0000000001deg）;

更新：Chrome 15.0.874.106 mでは動作しません。IE9とFirefoxでは動作しますが、> Zequez 11月4日15:28

更新：これは（少なくとも私にとっては）Chrome 15.0.874.121 m）で機能しています。

セレクターが-webkit-を指定しているため、IE9とFirefoxでは必要ありません。

0
Matt Williams