CSSフォントスムージング

EA Gamesは6月7日、Webサイトの新しいバージョンを開始しました。 インターフェースは悪くありませんが、 ウェブフォントは見苦しいです。

そして、 CSS3プロパティ text-shadowを使用してフォントをスムーズにできるソリューションを見つけたようです。 これは、Windows XP（ClearTypeフォントが表示されているか標準の方法であるか）およびブラウザーが最新の場合は古いオペレーティングシステムでうまく機能します。



このトリックをご覧ください 。

---

翻訳者のメモ：

• Mathieu Avonsによるこのブログ投稿のスピーチは、Windows XPの不十分なフォントスムージングに関連するよく知られた効果を持っています。垂直方向に作成された輪郭線のシャープな（滑らかでない）単一ピクセルのジャークによって引き起こされます。 この問題は克服できることがわかりました！
  
• 観察された影効果の異常に効果的な強さに気づいて、私は非常に驚きました。 文字の輪郭の滑らかさが変わるだけではありません。 一部の文字間の距離、単語内の一部の文字の位置、および一部の文字の幅も、約1ピクセル変化します。 いくつかの小さな文字のアウトライン（「EA AT E3 2011」の碑文内）は、かなり薄く見え始めています。
  
• Mathieu Avonsがブログ投稿に適用して、影付きフォントと影なしフォントの違いを観察する2フレームのアニメーションから、これらの効果も確認できます。 文字は完全に滑らかになるだけでなく、前後にジャンプして 、幅と厚さを変更します（斜体も傾斜のようです）。 彼らは動揺している！ これらすべてがCSS3のいくつかの簡単な行で達成されることは本当に驚くべきことです。
  

  h1.title { text-shadow:-1px -1px 1px rgba(255,255,255,0.2), /*    */ 1px 1px 1px rgba(255,255,255,0.2), /*    */ 1px 1px 1px rgba(0,0,0,0.7); /*   */ } 

• ただし、「このフォーカスを見る」リンクは、実際のテキストヘッダーを含む実際のEA Games Webサイトコードではなく、マウスホバーで互いに置き換えるスクリーンショットに切り替えられることに注意してください。 効果を活発に観察するためには、おそらくスタイリッシュで武装し、ネットワーク上で適切な「犠牲者」を見つける必要があります-サイズの「arshin」文字で入力されたヘッダーを持つサイト。