26

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

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

4

8 に答える 8

48

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

それがあなたにもうまくいくことを願っています。楽しみ！

于 2012-01-27T23:08:20.427 に答える
14

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

-webkit-text-stroke: 0.5px;

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

于 2012-11-30T00:04:14.317 に答える
9

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

XPで一般的なデスクトップフォントのアンチエイリアスを取得するには、[表示のプロパティ]->[外観]->[効果]->次の方法を使用して画面フォントのエッジを滑らかにする->[ClearType]からオンにする必要があります。デフォルト設定の「標準」は、古いWindowsの「フォントスマッジング」手法であり、大きなフォントサイズでオンにするだけで、混乱することがよくあります。

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

（Chromeにテキストのアンチエイリアシングを実行させるための厄介なハックがあります。これは次のとおりです。

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

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

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

于 2010-10-30T21:34:09.750 に答える
5

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

于 2010-11-01T11:28:45.993 に答える
4

私は少し調査をしました、そして私は私が違いを生むと思うハックを見つけました。これをフォント変数とともにCSSに入れます。

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

同様に、フルオンの黒（#000000）も問題を解決しないことがわかりました。非常に暗いものを使用することは私を助けたようでした。

于 2011-01-16T19:14:34.757 に答える
3

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、WindowsVistaでは動作しなくなりました。

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

于 2011-12-14T03:37:45.047 に答える
2

これは、「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');
    }
}

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

于 2013-02-21T00:16:07.390 に答える
0

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

更新：Chrome15.0.874.106mでは機能しなくなりました。IE9とFirefoxでは動作しますが–>Zequez11月4日15:28

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

IE9とFirefoxはそれを必要としないか、セレクターがを指定しているのでそれによってターゲットにされるべきではありません-webkit-。

于 2011-11-23T15:21:56.580 に答える