iOS 11のSafariで、ウェブページが明朝体フォントで表示されてしまうのを直す。

最近 iOS 端末を使う機会が激減していたので今更気づいたのですが、iOS 11 の Safari では、どうやら表示フォントの初期値が明朝体(serif)になっているようで、スタイルシートでフォント設定をしていないと、意図せずページが明朝体表示になってしまうみたい。

うちのブログのモバイル版ページもこのとおり…

ios11_safari_serif.png

いまいちしっくりこない。

スタイルシートでページ全体のフォントをゴシック体に設定すれば、これまでどおりの表示に戻せます。

body {
    font-family: sans-serif ;
}

表示フォントを名指ししたいのであれば、

font-family : "ヒラギノ角ゴ ProN" , sans-serif;

…という書き方でも大丈夫ですが、基本、iOS上の日本語 sans-serif フォントはヒラギノ角ゴシックしか無いので、無駄といえば無駄な設定です。

この一行をスタイルシートに追加しておけば、表示は従来どおり。

ios11_safari_sans_serif.png

しかし、非日本語サイトでも表示フォントに sans-serif を使っているところが多数派に感じるのですが、何でまた初期値を serif にしてしまうかな…。

カテゴリ: