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

Question

我正在将 Adobe 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;

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

Answer 1

Shorthand 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 值。

这是一个有用的调试技巧，供将来参考：如果您在使用 CSS shorthand 时运行遇到 invalid property value 错误，重写 shorthand 会很有帮助=28=] 属性作为单独的属性，然后让浏览器的开发工具准确指出哪个属性具有无效值。

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

What does 'normal normal medium 45px/61px Oswald' mean in a css font rule?

css

adobe-xd