弊テンプレートスタイルシート内にある font-smoothing の指定について

対象部位

弊テンプレートのスタイルシート前方に記されている

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

この2つの指定に関する説明です。簡単に言えば Macで フォントを見やすくするための処理です。Macはアンチエイリアスが効く ため、そのアンチエイリアスに対するちょっとしたゴニョゴニョを行うのがこの指定ということですね。その解説のためにはアンチエイリアスが何なのかを知る必要があります。

アンチエイリアスとは

WindowsパソコンからMacに変更した方の大抵が開口一番「フォントが綺麗」と言うんですね。それは アンチエイリアス (antialiased) といってジャギーを目立たなくする補正処理が効くからです。

Windowsは昔から一貫して「アンチエイリアスは使わない」という考え方のようです。ジャギーが目立つ代表的なフォントに MS ゴシック, MS Pゴシック というのがあるんですけども、これぞWindowsフォントという感じでジャギジャギ (´・ω・｀)
でも「ジャギーが有った方が良い、日本語はその方が見やすい」という方もいらっしゃいますので否定するわけではない。

ちょっといい加減な図ですみません。大体こういう感じです。アンチエイリアス状態の見た目を日本語で表現すると にじみ が近いかもしれません。にじむということは輪郭をぼやかせることなので、それによって曲線などが滑らかに表現できるというわけです。

ところが「にじみ」があると 輪郭が太いと感じたり、若干大きめに感じる ことがあります。「アンチエイリアスが嫌い」という方の大抵は「ぼやけて見える」という理由を上げます。実際「にじみ適用処理」みたいなものなのでその感覚は間違いではないですよね。その調整を行うのが font-smoothing プロパティです。

にじんで太めに見えるのを補正している様子です。

こちらは各々太字でどう見えるかです。

>

font-smoothingが指定されている通常文字と太文字は対比がわかりやすくすっきりした印象になります。

Windowsには無関係な指定です

先程から「Macで」「Macは」と説明しているように Windowsにはアンチエイリアス機能がありませんので操作不可 です。このプロパティがあろうが無かろうが見え方は同じ。

ここで懸念というか少し訝しく思っている件について。

自身のパソコンが明らかにWindowsであろうと思われる方で、このプロパティを任意削除されている方をみかけることがあります。もちろんMac環境から目視確認をした結果「文字が細い」と感じて意図的に削除されたというのならば良いんですが、そうではなく 自身のWindows環境に関連していると勘違いをし、文字を太めにするつもりで削除している のだとしたら何の効能効果も無いわけで。弊テンプレートでの実際の表記は以下の通りです。

-webkit-font-smoothing: antialiased;/* 注)文字が細すぎると感じる方はこの一行削除(Mac Google Chromeのみ) 1/2 */
-moz-osx-font-smoothing: grayscale;/* 注)文字が細すぎると感じる方はこの一行削除(Mac Firefoxのみ) 2/2 */

Mac Google Chtomeのみ 及び Mac Firefoxのみ という注意書きですね。要は「Windowsとは関係無いよ」という意味でもあるんですが、ここをしっかり把握しているかどうか。

「Windows使ってるから要らないや…」という理由で削除する可能性もあるんですが、目視確認ができない場合は入れておいた方が無難です。

Windowsパソコンユーザーがこの指定を削除しても実際は何も変化が無いんだけれども、消すことによって「なんとなく太くなった」という気がしてしまう人間心理の不思議(笑)

何故今この説明か

iOS(iPhoneのOS)がですね、フォントを全体的に太く濃く表示する傾向に (´・ω・｀)
iOS11から顕著になった気がします。なので見出しとかの文字を見ると めちゃくちゃ太いくて野暮ったい んですよー (∵`)
太すぎて日本語の可読性が落ちてる気がするんだけど。日本語の漢字って画数が多くて繊細じゃないですか。それがなんか… 潰れ気味に見えてしまうというか。

iOSはfont-smoothingプロパティ非対応です。Androidや他のモバイルOSも非対応。じゃあ関係ないじゃん！と思うなかれ。私はこの太い文字を見るにつけ やっぱアンチエイリアスの調整要るわー と思ったわけです(笑)
ただの「説明記事を書くきっかけ」です。すみません ^^;

まとめ

というわけで、どんな意味を持つ指定なのか、という説明と、Windowsに関係があると勘違いして削除しないように という注意です。もちろん「Macユーザーからクレームが来た」とか「Macでも確認した」など根拠があるなら話は別です。

あと別件ですが、WindowsユーザーさんはMacの存在を無視する傾向にある(笑)
意図的に無視しようとしているのではなく、「知らないからやってしまう」系。特にフォント変更 は気をつけてくださいね。Macにメイリオはありませんし、Windowsにヒラギノはありません。フォント指定の仕方は以下の記事で。

意外と知らないフォント設定の仕方

よく行われるテンプレートカスタマイズに「フォント種の変更」があるかと思います。サイズや色でなく「フォント名」ね。 このフォント指定ですが、実はとっても難しいんですね (´・ω・｀) というわけで、正しい指定の仕方やフォント指定の挙動、そして失敗するケースなどなど記しておこうと思います。...

vanillaice000.blog.fc2.com