CSSでフォントのスムージングを設定する方法

CSS では、「-webkit-font-smoothing」属性を使用してフォント スムージングを設定できます。構文は「-webkit-font-smoothing:subpixel-antialiased」です。この属性は、フォントをページにアンチエイリアスが適用されると、より鮮明で快適に表示されます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

公式 Drupal テーマを調べているときに、興味深い非標準 CSS セレクター -webkit-font-smoothing を発見したので、それをいじり始めました。 css3 フォントを使用してスムーズに表示する方法

W3C では、font-smooth など、CSS でのフォントのアンチエイリアス レンダリングを考慮していることを知っておく必要がありますが、これは、異なるオペレーティング システムによるフォントのレンダリングが原因である可能性があります。違いはありますが、要するに、Web 標準には選ばれませんでした。ただし、WebKit は、フォントをより滑らかに表示するためのアンチエイリアス効果をサポートする独自の非標準セレクターのセットを依然として保持しています。

-webkit-font-smoothing には主に次の 3 つの属性があります:

• none: アンチエイリアスなし

• サブピクセル- アンチエイリアス (デフォルト): サブピクセル スムージングは​​、Mac OS および MacType For Windows で一般的に使用されます。

• アンチエイリアス: グレースケール スムージングは​​、Android や iOS などのモバイル デバイスで一般的に使用されます

しかし、試してみると、私の肉眼では後者 2 つの違いがまったくわかりません。そして、この非標準 CSS は、Safari や Chrome など、WebKit コアを備えたほとんどのモバイル ブラウザーとデスクトップ ブラウザーにのみ適用できます。 IE シリーズに関しては、あなた自身がサポートしていないので、私を責めてください~

実際の効果を見てみましょう。まず、アンチエイリアス レンダリングを使用しません:

次に、-webkit-font-smoothing を使用する効果です。subpixel-antialiased アンチエイリアシング レンダリングとスムージング:

次のことが可能です。フォントのエッジの滑らかさがまだ異なることがわかりますが、追加後の見た目はかなり良くなりました。

テストの結果、フォントのアンチエイリアスは通常、ブラウザーの組み込みの基本プロパティに含まれていることがわかりました。ただし、安全のため、手動で追加しましょう~

推奨学習: css ビデオ チュートリアル

以上がCSSでフォントのスムージングを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。