attention admin about comments trackbacks you may also like

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

2019年09月26日
webのあれこれ
2
CSS3 トラブル対処

お問い合わせの全く来ない 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にヒラギノはありません。フォント指定の仕方は以下の記事で。

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(2)

There are no comments yet.

hige

2019/09/26 (Thu) 17:12

 ほう、そうなんですね。
 私が使わさせてもらってるテンプレ:La_Vita の旧バージョンにもその記載がありました。さいわい削除(コメント化)はしてませんん。そんな意味があったんですか。
 Win10 になって標準のフォントが 游ゴシック になったのですが、私はこのフォントが嫌いです。なので、CSSの指定をメイリオを優先に変更してます。
 フォントって面白いのですが、やっぱ日本語は文字が多いので欧文ほど自由がききませんです。
 

Akira

2019/09/27 (Fri) 12:42
vanillaice (Akira)

To higeさん

higeさん、こんにちは ('0')/

winのシステムフォントは「游ゴシック」ではなくて「游ゴシックUI」の方ですよね。游ゴシックと比較して細長いというか、私もこのフォント好きじゃないです(笑)
winはなんか極端ですよねぇ。メイリオは寸胴で游ゴシックUIはひょろ長い、みたいな。

游ゴシックの方にも泣かされました。macの游ゴシックはとてもきれいなのにwinの方はカッスカスで。lightとかなんか太さの関係らしいけど。そんなこんなでテンプレートに游ゴシックを採用するのは辞めたんです。
繰り返すとmacの游ゴシックは本当に綺麗(笑)

* 游ゴシックUIとメイリオUIはwin用に横幅を狭くしたフォントです。

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧