13

編集：

現在 Chrome 19 を使用していますが、これはまだ修正されていません。明確化: これは Linux や Mac ではなく、Windows 上の Chrome で発生します。Cleartype と関係があると思います。Google、これを修正してください。

text-shadowCSS3を使用して、他のブラウザーで IE9 のフォント スムージングをエミュレートしてきました。基本的に、コンテナーのテキストの text-shadow をコンテナーの背景に設定しました。text-shadowChrome 14.0.833 より前のバージョンでは、大きなフォント要素を設定することで動作を確認できます。テキストは滑らかに見えます。text-shadow を削除すると、フォントがギザギザに見えます。ただし、Chrome 14.0.833 (更新: 14.0.834 でも「壊れている」ようです) では、これは機能しなくなりました。text-shadow プロパティは引き続き機能しますが、以前のようには機能しません。ここで動作を確認できます（diff.Chromeバージョンでロードするだけです）古いChromeでは、テキストの影がテキストの内側で少し始まり、その後広がったように見えます-これがおそらくテキストシャドウハックが機能した理由です. 新しい Chrome では、テキストの影がテキストのすぐ外側から始まるように見えるため、機能しません。私がここで何を意味するか見てください。

私の質問は基本的に:これはバグですか? どちらかである場合、どちらが予想される動作ですか? 他に使用できるフォント スムージングの回避策はありますか?

W3C の仕様は、意図した動作が何であるかを述べていないようでしたが、おそらくテキストアウトラインを使用する必要があることがわかりました (これはサポートされていないため、目的に反します)。

4

6 に答える 6

8

さて、私はこれにかなりの時間を費やしましたが、これが結論です: これはバグです。

まず第一に、-webkit-font-smoothing:antialiased;Windows ではなく Mac でのみ動作します。

私は Windows7 を使用しており、それぞれに異なるテキスト シャドウが適用された 4 つの異なる要素を持つ JSfiddle のスクリーン ショットを使用して、レイヤー化された Pixlr イメージを作成しました。Chrome13 と Chrome 14.0.835 から text-shadow が変更されていることがはっきりとわかります。失敗したり、アンインストールしたりしたので、Beta チャンネルと Dev チャンネルを数回切り替えなければなりませんでした。

私が作成した階層化された Pixlr イメージ ファイルをダウンロードします。

http://dl.dropbox.com/u/7353877/Chrome-text-shadow-v13-v14_0_835.pxd

次に、http://pixlr.com/editor/に移動し、コンピューターからファイルを開くことを選択して、ファイルを開きます。今度は Pixlr で 4 行のテキストにズームインし、一番上のレイヤーのレイヤー パネルでチェックボックスをクリックしてチェックを外し、もう一度チェックを入れて、テキスト シャドウへの変化がどれほど劇的かを確認します。

これはバグとして提出する必要があります。必要に応じて、このページに戻るリンクを使用して効果を示すことができます。

JSfiddle (スクリーンショットで使用した JSfiddle) http://jsfiddle.net/nicktheandroid/Xkp9q/

1時間半前にパイを電子レンジに入れました....寒いです:(

于 2011-08-05T17:13:00.753 に答える
5

まあ、私はそれを理解しました。バウンティを設定したので面倒ですが、どうでもいいです。これはバグではなく、予期された動作であると確信しています。特に、Chrome をさらに数回繰り返してみましたが、同じままでした。いくつかの異なる方法が機能します。ブログ用に少し書きました。記事の全文はこちらでご覧いただけますが、その大部分は次のとおりです。

まず、テキストの色は-webkit-text-stroke:1px #000どこにあるのか試してみました。#000ただし、このスタイルは、テキストの色がストロークとは異なる場合に使用することを目的としており、テキストのアウトラインを美しくします。両方が同じ色の場合、それは...奇妙に見えます。理由はわかりません。私はフォントレンダリングの専門家ではありません。記事の後の写真で動作を確認できます。

次に、テキストと同じ色のシンプルなtext-shadow:#000 0 0 1px場所を試しました。#000同じ Chrome 14.0.833+ の問題により、これでもフォントが多少ギザギザに見えます。ただし、プレーンテキストよりは優れています。

次に、上記の 2 つの試みを組み合わせてみました。これは少し見栄えが良くなりますが、基本的にテキストの厚みに 2 ピクセルを追加するため、テキストがかさばります。

最後に、2 つのテキスト シャドウを適用してみました: text-shadow:#000 0 1px 1px,#000 0 -1px 1px> >#000はテキストの色です。これが行うことは、2 つのテキスト シャドウを適用することです。そのうちの 1 つは少し押し下げられ、もう 1 つは押し上げられます。このようにして、テキストの影がギザギザのエッジを覆います。テキストが少し大きくなりますが、確実に滑らかになります。

テキストのサイズに応じて、さまざまな方法が機能します。小さい (ただしまだギザギザの) テキストには text-shadow を使用でき、大きなテキストには shadow/stroke メソッドを使用でき、非常に大きなテキストには dual-shadow メソッドを使用できます。もちろん、テキストが大きくなればなるほど、余分な数ピクセルは目立たなくなります。ここでさまざまな方法をすべて見ることができ ます

于 2011-08-04T16:08:22.503 に答える
1 
text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;

また

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

Opera、Chrome、Safari、Firefox のさまざまなバージョンでテストされ、正常に動作します。

于 2012-01-05T05:08:44.130 に答える
1 
-webkit-font-smoothing:antialiased;

あなたのために働くかもしれません

于 2011-07-26T21:19:56.163 に答える
0

はい！この問題の解決策を見つけました。奇妙ですが、私にはうまくいきます。

したがって、それを機能させるには、滑らかにしたい要素にこのスタイルを適用します。

-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;

すぐにテストできるように、このスタイルだけのサンプル HTML ファイルを用意しました。

于 2011-09-27T17:29:01.567 に答える
0

これは実際、多くの Web フォント (Google Web フォントや Typekit などの高度に専門的なフォント) が、Windows システムの Firefox (左) と Google Chrome (右) (そして最終的には他の場所でも) でどのように見えるかでした。冗談抜き！これを明確にするために: Google Webfonts を完全に台無しにした唯一のブラウザーは、Google のブラウザー Chrome でした。それはどのくらい病気ですか？2013 年に Opera ブラウザはレンダリング エンジンを webkit (=Chrome のレンダリング エンジン) に切り替えたため、この問題は Opera にも存在します。

もっと: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

于 2013-12-25T01:10:48.860 に答える