比如 color 属性便是继续属性,给父级元素设置了 color,则子元素会继续。

font-family 继续的坑

CSS 属性 font-family 许可您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。

属性 font-family 列举一个或多个由逗号隔开的字体族,语法如下:

html中fontfamilycss中的fontfamily你真的用对了么 jQuery

/ 一个字体族名和一个通用字体族名 /font-family: "Gill Sans Extrabold", sans-serif;font-family: "Goudy Bookletter 1911", sans-serif;/ 仅有一个通用字体族名 /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;/ 全局值 /font-family: inherit;font-family: initial;font-family: unset;

font-family 是一个继续属性,比如,我在child元素的父元素.parent 上添加 font-family: serif;,子元素也会继续它的属性值。

.child { font-family: unknown;}

但是,我们给子元素的 font-family 随便设置一个值 unknow,这实际上是一个无效的字体。

浏览器识别不出来这是一个无效的值,打算值的结果还是 unknown,但实际效果则是直接降级到浏览器的默认值。
此时并不会即成父级元素设置的值,这跟我们的认知还是不一样的。

然而,如果我们设置子元素的样式如下,即在 test 之后再设置一个字体 Gill Sans,

.child { font-family: unknown, "Gill Sans";}

就会降级到 Gill Sans 了。

关键结论

我们常日会在全局样式中设置通用字体,以担保字体样式在不同设备上呈现时,至少有一个最基本的字体样式可以降级,而不是直接降级为系统默认字体。

/ A generic family name only 通用字体 /font-family: serif;font-family: sans-serif;font-family: monospace;font-family: cursive;font-family: fantasy;font-family: system-ui;font-family: ui-serif;font-family: ui-sans-serif;font-family: ui-monospace``;font-family: ui-rounded;font-family: emoji;font-family: math;font-family: fangsong;

但是当我们为某些特定元素设置字体样式时,比如设计希望在苹果设备上呈现出 PingFang SC 字体样式。
如果天经地义的设定为,

font-family: PingFang SC;

那么会覆盖全局设置的通用字体样式,而如果该设备上没有苹方字体时,就会降级到系统默认字体,而不是设置的全局通用字体。

实际事情中须要把稳的

因此当UI有分外字体样式哀求时,请务必在设置字体样式时,除了分外字体的声明,也要担保在分外字体后边添加用于降级的通用字体,比如:

font-family: PingFang SC, sans-serif; / apple 生态系统UI很喜好的字体 /font-family: Droid Sans, sans-serif; / Android 生态系统UI很喜好的字体 /

否则当用户在系统上设置了奇怪的默认字体时,您的UI设计稿就会也随之变得奇奇怪怪。