font-sizeを相対指定してChromeだけフォントが大きく表示されてしまう問題

  • 公開日:2015/7/2
この記事は最終更新日から4年以上が経過しています。

フォントサイズを以下のように相対指定で書いたときに、Chromeだけフォントが大きく表示されてしまうことがありました。

html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}

62.5%が無視されて、font-size:100%;に対して1.6remで表示されてしまっているようにみえます。なぜかChromeだけ。

なんとかしたいというわけで調べてみたところ、スクリプトを追記すれば対応できるという記事がちらほら。
でも、フォントサイズを相対にするだけでスクリプトが必要になるってちょっとやだなーと思ってもうちょっと調べてみたところ辿りついた英語だらけのページをそれなりに解釈して、以下の記述で解決できました。

html {
    font-size: 62.5%;
}
body {
    font-size: 1.6em;
}
* {
    font-size: 1.6rem;
}

[参考サイト]
Chrome not respecting rem font size on body tag? (stackoverflow)