今回は、ブラウザ上でフォントをなめらかできれいに見せることのできるCSSプロパティ「font-smoothing」を使用例も交えてご紹介します。意外と知られていないCSSプロパティ「font-smoothing」。これを使うことにより、WEB上でのフォントをなめらかできれいに見せることが出来ます。これにより見た目ももちろんですが、可読性も上がると思います。「-webkit-font-smoothing」の形で指定しますが、これには4種類の指定方法があります。-ブラウザに決定させます(使用可能な場合はサブピクセルアンチエイリアスを使用します。これがデフォルトです)none-フォントスムージングをオフにします。ギザギザの鋭いエッジでテキストを表示します。antialiased-サブピクセルではなく、ピクセルのレベルでフォントを滑らかにします。暗い背景で明るいテキストのサブピクセルレンダリングからアンチエイリアスに切り替えると、明るく見えます。-ほとんどの非網膜ディスプレイでは、これは最も鮮明なテキストを提供します。上記でご紹介した4種類のパターンが実際にブラウザ上でどのように表示されるのか比較していきたいと思います。表示Chromeでテストしてみました。これが一般的(デフォルト)の状態です。使うことは無いと思いますが、フォントスムージングをオフにします。ギザギザの鋭いエッジでテキストを表示します。Edgeでは非対応になります。通常のブラウザよりも文字が太く表示されてしまうSafariでは、このプロパティを使うことにより他のブラウザの見た目に近づけることができます。フロントエンドエンジニア・デザイナーの社員Aです。更新頻度が多いかと思います。このブログのテーマも作成しました。一人旅がだいすきで、特に東南アジアを周っています。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。MAX】2018年10月19日10今話題のLINEのオープンチャットとは?実際に参加してみた2019年09月11。