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，它不能接受 "medium" 作为值。“Medium”是一个大致对应于 的 OpenType 值font-weight: 500，但不是有效的 CSS 值。

这是一种有用的调试技术，供将来参考：如果您invalid property value在使用 CSS 速记时遇到错误，将速记属性重写为单独的属性会很有帮助，这样可以让浏览器的开发工具准确指出哪个属性具有无效值。