NARUMASA CREATIVE DESIGN
Copyright © narumasa.com
All rights reserved.
09
3月
2019

SafariやGoogle Chromeででフォントをさらにきれいに表示する方法

フォントを大きくしたら、太くてきれいではない。細くてきれいなフォントで表示させたい、と思いませんか?

SafariやGoogle Chromeでフォントをさらにきれいに表示する方法を探していたら、Appleのサイトで発見しました。
なぜAppleのサイトは大きいテキストもフォントが細く、きれいに表示されているのか不思議に思ったので、StyleSheetを見てみたら発見したものです。

.webkit{
//フォントをきれいに表示
-webkit-font-smoothing: antialiased;
//大きくしても一番細く表示
font-weight:100;
}

まあ、Webkitを使用しているブラウザのみのようですが、文字を大きく使用した際にフォントサイズと一緒にしていすると きれいに表示されます。 他には

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased; // Safari での Default値

このような指定ができます。 あまり使用することもないと思いますが。

Stylesheetもいろいろと指定方法があり、全てを把握するのは難しいですね。
覚えたとしても使えるブラウザが限られているものも多いので、全てを把握する必要はありませんが。

【jQuery】背景画像 全画面表示:自作版
【WordPress】WordPressのfunctions.phpでよく使う項目。