MacのChromeだけで妙にフォントが太く感じ、実際に font-weight:300
を指定しても500以下は無視されていたので調べたところ、下記のことが分かった
font-family
にこれまで「 Hiragino Kaku Gothic Pro 」を指定していたが「 Hiragino Sans 」に変える@font-face
を使うことでより確実にウェイトを操作できる(当然Mac限定にはなる)
See the Pen mAyLXy by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
(Mac限定で)見ての通り、これまでの「Hiragino Kaku Gothic Pro」はウェイトが2つしかない。
Windowsではどうなの?という話だが、メイリオもウェイトは2つしかないが不自然に太くは見えないので問題に感じなかった。
どうしても極細のフォントをWin/Macで合わせたいならAXISなどWebフォントを使う必要がある。
「Hiragino Kaku Gothic Pro」は古い指定、「Hiragino Sans」に変えよう
MacOS El Capitan より「Hiragino Sans」が追加されたようで、従来の「Hiragino Kaku Gothic Pro」はW3とW6しか利用できないため、「Hiragino Sans」に変えるだけで柔軟なウェイト指定ができるようになる。