kaibukuroのブログ

HTML/CSS/JavaScript/PHPなどのアウトプット

【CSS】font-familyには最後にsans-serifをつけて、総称font-familyを指定する。

問題

zeplinなどで作成されたデザインデータで以下のような値のまま、

font-family: meiryo;

入れていたら、ブラウザsafariで見た時に、明朝体での表示になってしまっていた。ほかブラウザだとゴシックで表示してくれていたが。

解決策

bodyなどのセレクタに一括設定している状態で、個別の文にfont-familyを変えたい場合、必ず最後に、sans-serifをつける(ゴシック系ならsans-serif、明朝体系ならserif)。

font-family: meiryo, sans-serif;

これは総称フォントファミリーとして「sans-serif」と「serif」のどちらかを指定することで、ブラウザが自動判別をしてくれるもの。

単純だけど重要なことだった。safariで見ないと気づかなかったので注意したい。

参考にさせていただいた記事

https://saruwakakun.com/html-css/basic/font-family-how-to