CSS inheritance

As you can see from MDN, when an inherited property of an element does not specify a value, the computed value of the same property of the parent element is taken

For example, the color attribute is an inherited attribute. If the parent element is set to color, the child element is inherited as follows:

Font-family: arial, sans-serif

Font-family: arial, sans-serif;

The CSS attribute font-family allows you to set the font for selected elements by giving a sequential list of font names or font family names.

The font-family property lists one or more font families separated by commas in the following syntax:

/* One font family name and one universal font family name */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* There is only one universal font family name */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: emoji;
font-family: math;
font-family: fangsong;

/* Global value */
font-family: inherit;
font-family: initial;
font-family: unset;
Copy the code

Font family is an inherited property, for example, I added font family: serif to the example above. Parent; The child element also inherits its attribute value

However, we arbitrarily set test to the font family of the child element, which is actually an invalid font

.child {
  font-family: test;
}
Copy the code

The browser does not recognize that this is an invalid value. The result of the calculation is still test, but the effect has been degraded directly to the default value. Instead of the value set by the parent element, which is not quite as we know….

Suppose we style the child as follows, that is, we set the font Gill Sans after test

.child {
  font-family: test, "Gill Sans";
}
Copy the code

At this point, you can see the demotion to Gill Sans

The demo address

CSS cold knowledge — font-family value

This is also a surprise, because if I set font family to 123test above, I find that the child element can inherit the parent element’s font family. Why?

As can be seen from MDN, the syntax of font-family is

<family-name>
where 
<family-name> = <string> | <custom-ident>+
Copy the code

Where strings are easy to understand, what is custom-ident? Or MDN

Refers to a user-defined string identifier. A CSS data type; To be case sensitive, there must be no ambiguity about the value.

The syntax can be found in the link above, but I won’t go into details here. My focus is on the last sentence, “Values cannot be ambiguous,” which states that invalid identifiers are as follows, and I’ve just stepped into the first hole.

34REM the first character cannot be a digit -12rad the first character cannot be followed by a hyphen bili. Bob only alphanumeric, hyphen -, underscore _ do not need to escape --toto the first character cannot be a hyphen followed by a hyphen 'bilibob' cannot be enclosed in single quotes, This is a string type. "bilibob" can't be enclosed in double quotes. This is a string typeCopy the code

conclusion

If you have a font-family setting and don’t know if your font will work across all browsers, it is always recommended to use a backstop font. Otherwise, if the font does not work, the element will not automatically inherit the bottom value you set in the parent element, such as the body or HTML element