1. TOP
  2. デザイン
  3. [font-smoothing] cssでフォントをきれいでなめらかに見せる方法

[font-smoothing] cssでフォントをきれいでなめらかに見せる方法

 2019/01/24 デザイン
この記事は約 4 分で読めます。 26,873 Views

font-smoothingというCSSプロパティを使うことによって
フォントのアンチエイリアスを調節することができます。

アンチエイリアスを調節することで滑らかな表示が可能になり
スマートな文字の印象に変わります。

ちなみに注意点として、このプロパティを使えるのはMacのみで
Windowsでは使えません。

Mac版のSafari、Opera、ChromeなどのWebkit系とFirefoxのみ、プレフィックス付きで独自実装されています。
また、WebkitとFirefoxで別のプレフィックスをつける必要があり、値も違ってくるので注意してください。

アンチエイリアスとは?

コンピュータでの文字表示はピクセル単位より細かく描画することができません。

このため、物体の輪郭にジャギーと呼ばれるギザギザが発生してしまいます。
このジャギーを軽減し少しでも目立たなくするために、文字の輪郭を背景となじませるように、色を滑らかに変化させることをアンチエイリアスといい、その処理をアンチエイリアシングといいます。

黒い文字を表現する場合でも、黒だけではギザギザのジャギーがでてしまうので文字の黒と背景との中間色も境界線に配置し滑らかに見せることができるのです。

font-smoothingではこのアンチエイリアスをコントロールするCSSプロパティになります。

Webkit系でのfont-smoothingの設定

Chromeでの表示(Ver.71.0.3578.98)

-webkit-font-smoothing: none; では「アンチエイリアスなし」なのでギザギザになってしまいます。
-webkit-font-smoothing: subpixel-antialiased;のデフォルト値より、-webkit-font-smoothing: antialiased;の方が若干太く滑らかになった印象です。

Safariでの表示(Ver.12.0.2)

-webkit-font-smoothing: none; では変わらず「アンチエイリアスなし」なのでギザギザになってしまいます。
Safariの場合は-webkit-font-smoothing: subpixel-antialiased;のデフォルト値より、-webkit-font-smoothing: antialiased;の方が若干細く滑らかになった印象です。

-webkit-font-smoothing: antialiased;ではChromeとSafariは同じに見えますがsubpixel-antialiased;のデフォルト値では随分違う印象ですね。

Firefoxでのfont-smoothingの設定

デフォルトに戻す-moz-osx-font-smoothing: unset; と
親要素から継承の-moz-osx-font-smoothing: inherit;は通常使いません。

Firefoxではデフォルトでもなめらかでもほぼ見た目の印象はかわらなそうです。

まとめ

今回はCSSのfont-smoothingをつかってWEB場で文字を滑らかに美しく表示する方法を解説しました。

他にも文字を美しく見せるには

・どのフォント選ぶか
・ 字間/行間の設定によるホワイトスペースの美しさ

も大きく影響します。

こちらも参考にしてください。

【2019】おすすめのゴシック体のCSS(font-family)設定ときれいで読みやすくい書体の比較

【2019】おすすめの明朝体のCSS(font-family)設定ときれいで読みやすくい書体の比較

CSSでも字詰ができる!font-feature-settingsで美しい日本語フォントのカーニング

制作のご依頼・ご相談はこちら

dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。

今すぐご相談・問い合わせをする

\ SNSでシェアしよう! /

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

エリー

エリー

dainamoで企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

この人が書いた記事  記事一覧

  • 【html】selectタグの最初のoption(選択してください)を選ばせない方法

  • 【コピペでOK】期間を指定して表示・非表示するPHP関数

  • ボタンの2重クリックや連打を防止するJavaScript

  • IoT時代のデザインはどうあるべきか

関連記事

  • 【2020年最新版】ai,PSDデータのデザイン素材サイトまとめ。今すぐ現場で使えて編集も楽ちん

  • デザインの意味とは何か。あらためて考えてみた。

  • 経営におけるデザインの2つの役割と効果

  • html・webページで丸数字(①②③)を文字化けせずに記入する方法。

  • 【コピペでOK】CSSのみで作る矢印ボタン(アニメーションあり)

  • [EC-CUBE 3.0]商品購入画面でお届け日とお届け時間を非表示にする方法