フォントスムージングテクニック？ Chrome 14.0.833.0以上で異なるテキストシェードレンダリング

StackOverflow https://stackoverflow.com/questions/6823988

質問

編集：

私たちは現在Chrome 19にいますが、これはまだ修正されていません。ただの明確化：これは、LinuxやMacではなく、WindowsのChromeで発生します。 ClearTypeに関係していると思います。 Google、これを修正してください。

CSS3を使用しています text-shadow 他のブラウザでIE9のフォントがスムージングするため。基本的に、コンテナのテキストのテキストシャドウをコンテナの背景に設定しました。設定することで動作を見ることができます text-shadow Chrome 14.0.833より低いものの大規模なフォント要素。テキストは滑らかに見えます。テキストシャドウを削除すると、フォントはジャグが付けられています。ただし、Chrome 14.0.833（更新：14.0.834で「壊れている」と表示されます）では、これは機能しなくなりました。 Text-Shadowプロパティは引き続き機能しますが、以前の方法では機能しません。動作を見ることができます ここ （Diff。Chromeバージョンでロードするだけです）古いクロムでは、テキストの影がテキスト内で少しだけ始まってから広がりました。新しいクロムでは、テキストの影が始まるように見えます 外側 テキスト、それがうまくいかない理由です。私が意味することを見てください ここ.

私の質問は基本的に： これはバグですか？どちらかの場合、どちらが期待される動作ですか？私が使用できる他のフォントスムージングワークアラウンドはありますか？

W3Cの 仕様 意図した行動が何であるかを言っていなかったようですが、おそらく私はテキストアウトラインを使用する必要があると思いました（これは、目的を打ち負かすだけではありません）

役に立ちましたか？

解決 2

まあ、私はそれを理解しました、ちょっと。私は恵みを設定してから迷惑ですが、何でも。これはバグではなく、予想される行動であると確信しています。特に、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つは押し上げられます。このようにして、テキストシャドウはギザギザのエッジをカバーします。それはテキストを少し膨らませますが、間違いなく滑らかになります。

テキストのサイズに応じて、さまざまな方法が機能します。小さい（しかし、まだジャグ付き）テキストはテキストシャドウを使用でき、大きなテキストは影/ストローク法を使用でき、非常に大きなテキストはデュアルシャドウ法を使用できます。もちろん、テキストが大きくなればなるほど、余分な数ピクセルになります。すべての異なる方法を見ることができます ここ

他のヒント

さて、私はこれにかなりの時間を費やしてきましたが、これが結局のところ、それはバグです。

初めに、 -webkit-font-smoothing:antialiased; WindowsではなくMacでのみ機能します。

私はWindows7を使用しています。私が作成したJSFiddleのスクリーンショットを使用して、それぞれに異なるテキストシャドウが適用された4つの異なる要素を備えた階層化されたPIXLR画像を作成しました。 Chrome13とChrome 14.0.835以降、テキストシャドウが変化したことが明確にわかります。私は台無しにしたり、アンインストールしたりしたので、ベータチャンネルと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時間半前に電子レンジにパイを入れました....それは寒い:(

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;

テストされ、オペラ、Chrome、Safari、Firefoxのさまざまなバージョンで正常に機能します。

-webkit-font-smoothing:antialiased;

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

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

だから、それを機能させるために、このスタイルをスムーズにしたい要素に置く：

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

私は我慢しました サンプルHTMLファイル このスタイルだけで、すぐにテストできます。

これは確かに、多くのWebFont（Google WebFontsとTypeKitなどの非常にプロフェッショナルなフォント）がFirefox（左）とGoogle Chrome（右）をWindows Systems（そして最終的には他の場所）でどのように見たかでした。冗談抜き！これを明確にするために：Google WebFontsを完全に台無しにした唯一のブラウザは、GoogleのブラウザChromeでした。それはどれくらい病気ですか？ 2013年にOpera Browserは、エンジンをWebKit（= ChromeのRending Engine）に切り替えたため、この問題もOperaに存在します。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top