user855443
user855443

Reputation: 2940

html does not respect the font-family set in a style

I have reduced my problem to a trivial example:

<!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>

Which I would expect to produce three lines of sans-serif text. The web inspector indicates that all three lines should be sans-serif.

Tested on Chromium and Firefox, I get three lines of text, one sans-serif, and two more, for h1 and h2 in serif font:

enter image description here

What is the explanation of this behavior? What is my misunderstanding of the way font appearances are inherited and applied?

Upvotes: 1

Views: 685

Answers (1)

David Wolf
David Wolf

Reputation: 1738

Since you declared Times New Roman for both, the h1 and the h2 elements, they both render with this font.

And since the last definition in CSS has a higher order than the first one, the a elements inherits the style set for the body selector, which is: sans-serif.

This is not an issue, it is as expected.


If you would wrap the <a></a> element inside a (for example) <h3></h3>, you will see, that it will inherit the styles from its parent and displays as serif Times New Roman as well.

<!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>

Upvotes: 3

Related Questions