html不尊重样式中的字体系列集。

Question

我把我的问题简化为一个微不足道的例子：

​

<!DOCTYPE html>
<html lang="en_US">

<head>
    <meta charset="utf-8" />
    <style>
        body,
        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: 'Times New Roman', sans-serif
        }

        body {
            font-size: 16px;
            font-family: sans-serif;
        }
    </style>
</head>

<body>
    <a> a simple text w </a>
    <h1> a simple h1 text w </h1>
    <h2> a simple h2 text w </h2>
</body>

</html>

​

我希望它能产生三行无衬线文本。web检查器指示这三行都应该是sans-serif。

在Chromium和Firefox上进行了测试，我得到了三行文本，一行是无衬线的，另外两行是h1和h2的衬线字体：

​

​

对这种行为的解释是什么？我对字体外观继承和应用的方式有什么误解？

Answer 1

因为您同时声明了Times New Roman、h1和h2元素，所以它们都用这个字体呈现。

而且，由于CSS中的最后一个定义比第一个定义的顺序更高，所以a元素继承了body选择器的样式集，即：sans-serif。

这不是一个问题，它是预期的。

如果要将<a></a>元素包装在(例如) <h3></h3>中，您将看到它将继承父元素的样式，并显示为serif Times New Roman。

​

<!DOCTYPE html>
<html lang="en_US">

<head>
    <meta charset="utf-8" />
    <style>
        body,
        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: 'Times New Roman', sans-serif
        }

        body {
            font-size: 16px;
            font-family: sans-serif;
        }
    </style>
</head>

<body>
    <a> a simple text w </a>
    <h1> a simple h1 text w </h1>
    <h2> a simple h2 text w </h2>

    <h3>
        <a> a simple text w </a>
    </h3>
</body>

</html>

​