普段 Windows しか対応させないので font-family は meiryo だけのことも多い(このブログもそう)のだけど iOS 対応させることがあったのでフォント関係のメモ
Windows の meiryo に合わせたゴシック系にする
meiryo だけ指定すると見つからないのでデフォルトのフォント
デフォルトフォントは明朝体なのでゴシック系指定が必要
ゴシック系で探すと出てくるのはだいたいこのあたり
◯ Hiragino Kaku Gothic ProN
◯ Hiragino Sans
◯ -apple-system
◯ Helvetica Neue
Hiragino Kaku Gothic ProN は日本語だと 「ヒラギノ角ゴ ProN」 と書かれてるやつ
後ろに W3 とか付いてるのは weight (太さ)
W の次の数字が大きいほど太字
ProN のところは Pro は対応文字数が多めのフォントらしく N は旧字体の対応らしい
とりあえず ProN でよさそう
Hiragino Sans は基本 Hiragino Kaku Gothic ProN と一緒
適当な文章で比較しても違いはわからなかった
ProN 部分みたいに一部の文字のみで違いあるのかも
Hiragino Sans のほうが新しいらしい
わかった違いは font-weight: bold を設定したとき
太字にすると Hiragino Sans のほうが太い
font-weight に数値で同じものを指定した場合でも太さに違いが出る
-apple-system はシステムフォントらしく実際のフォントは San Francisco らしい
直接フォント名じゃなく -apple-system と書く方がよく見る
Blink エンジンだと BlinkMacSystemFont にしないと反応しないらしい
iOS だと Chrome でも中身 Webkit だから -apple-system で良さそう
実際 iOS で BlinkMacSystemFont を試すと未指定と一緒になった
Mac の Chrome 用?
Helvetica Neue は英数字用フォントらしい
Windows で Arial と meiryo を指定したりするようなものの Arial の方
日本語部分はデフォルトの明朝体ではなく Hiragino Kaku Gothic ProN と違いがわからないような感じのフォントで表示された
Hiragino 系よりきれいな感じはするけど幅とか統一感重視なら使わないほうがいいかも
iOS 対応ならとりあえず上の Hiragino のどっちかで良さそう