下記のコードを書いてみました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
font-size: 10px;
}
</style>
</head>
<body>
aaaaaaa
<h1>h</h1>
bbbb
</body>
</html>
デベロッパーツールを見ると、ユーザーエージェントのスタイルシートが適用されてしまっているのがわかります。
ネットを見ると border
は継承されないと書いている例をみますが、font-size
は継承されると言及しているページを多くみます。確かに htmlの子要素であるbody要素には継承されていますが、h1は例外なのでしょうか?(ほかにh2にも試しましたが、やはり継承されていませんでした)
なお
h1 {
font: inherit;
}
をCSSに加えると継承しました。