css - css 字体规则中的 'normal normal medium 45px/61px Oswald' 是什么意思？

Question

我正在将 Adob​​e Xd 中的设计转换为 HTML 模板，其中一个元素建议使用以下 css 规则。

top: 149px;
left: 54px;
width: 463px;
height: 208px;
text-align: left;
font: normal normal medium 45px/61px Oswald; 
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;

顺便说一句，我熟悉像 font: italic small-caps bold 12px/30px Georgia, serif; 这样的字体速记。它也可以工作，但是 Xd 建议的这种新格式是什么？甚至 Chrome 也发现它是 invalid .

Answer 1

font 的简写语法属性转换为:

font: font-style font-variant font-weight font-size/line-height font-family;

所以生成的代码等价于:

/* font: normal normal medium 45px/61px Oswald; */

font-style: normal;
font-variant: normal;
font-weight: medium;
font-size: 45px;
line-height: 61px;
font-family: Oswald;

这里的无效属性是 font-weight , 其中 can't accept "medium" as a value . “中”是一个 OpenType 值，大致对应于 font-weight: 500 ，但不是有效的 CSS 值。
这是一种有用的调试技术，供将来引用:如果您遇到 invalid property value使用 CSS 速记时出错，将速记属性重写为单独的属性会很有帮助，然后让浏览器的开发工具准确指出哪个属性具有无效值。