如何使用font简写复用h1标签字体且无需重复指定字号？

问题原因 #

font简写属性有强制语法要求：必须同时包含font-size和font-family两个值，缺少任意一个，整个声明都会被浏览器直接忽略。你当前的写法只设置了字重和字体族，所以不生效。

解决方案 #

放弃font简写，拆分使用单独的字体属性，这样就能自动继承h1的font-size，无需重复指定：

修改后的CSS代码：

h1 {
    font-size: var(--font-size-lg);
}
.landing .title {
    font-weight: bold;
    font-family: var(--main-font), var(--fall-back-font);
    line-height: calc(var(--line-height)*2);
    letter-spacing: -1px;
}

补充说明 #

如果非要使用font简写，只能显式引用字号变量，但这本质还是重复了变量（不符合你的需求），示例如下：

.landing .title {
    font: bold var(--font-size-lg) var(--main-font), var(--fall-back-font);
    line-height: calc(var(--line-height)*2);
    letter-spacing: -1px;
}

所以优先推荐拆分属性的写法，既满足复用字号的需求，又符合CSS属性的规范。

内容的提问来源于stack exchange，提问作者Flamingo