css3 プロパティ-webkit-font-smoothing_html/css_WEB-ITnose

フォントのアンチエイリアシング レンダリングにより、フォントがより鮮明で快適に見えるようになります。現在、アイコン フォントがトレンドになるにつれて、アンチエイリアス レンダリングの使用が増えています。

font-smoothing は非標準の CSS 定義です。標準仕様の草案には含まれていましたが、何らかの理由で後に Web 標準から削除されました。

ただし、アンチエイリアス レンダリングには次の 2 つの定義を使用できます

-webkit-font-smoothing: antialiased; /*chrome、safari*/-moz-osx-font-smoothing: grayscale;/*firefox*/

(1) Webkit は独自のエンジンでこの効果をサポートします。

-webkit-font-smoothing

3 つの属性値があります:

none ------ 低ピクセルのテキストに適しています

subpixel-antialiased-----デフォルト値

antialiased ------アンチエイリアスは非常に優れています

例:

body{-webkit-font-smoothing: antialiased;}

この属性により、ページ上のフォントにアンチエイリアスが適用され、使用後のフォントがより鮮明に見えます。

追加後、ページが突然鮮明になったように感じます。

(2) Gecko は、アンチエイリアス効果の独自の非標準定義も導入しています。

-moz-osx-font-smoothing: 継承 | greyscale;

この属性には、より明確な効果もあります。

例:

.icon {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

(3) Ionic フレームワークは追加のフォント スムージングを追加します: アンチエイリアス

これはフォント スムージングが標準化されるのを待っています。準備はできていますか?