ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでフォントのスムージングを設定する方法

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

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-04-26 17:27:494520ブラウズ

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

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

このチュートリアルの動作環境: 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 シリーズに関しては、あなた自身がサポートしていないので、私を責めてください~

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

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

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

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

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

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。