しるてく

技術的な話をします

font-familyを設定しないとiOS6で明朝になってしまう

iOS6のSafariのデフォルトフォントが明朝になってるっぽくて、font-family設定していないサイトがアレな感じになってしまったので直してみた。
スマホ専用のサイトです。

font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'モリサワ 新ゴ R', 'Droid Sans', メイリオ, 'sans-serif';


特に難しいことはしてないですがこんな意味。

  • 安定のHelveticaに代替のArialを指定してあげて
  • iPhone用の設定
    • NつけなくてもN付きに変換してくれますが一応
  • Android用の設定
    • モリサワ 新ゴ Mは悩んだけどちょっと太すぎな気が
  • 検証のwindows用の設定
    • それっぽく見えるようにメイリオ指定してあげる
    • chromeとかでサクッと確認するときに文字幅違うと面倒


あまり検証してないので、もっと良いフォントあるよ!とか順番こっちのほうがイイヨとかあったら教えてください。