如何将多个CSS变量组合为一个用于font简写属性？

你的问题出在font复合属性的规则限制上：font简写属性要求必须同时指定font-size和font-family，二者缺一不可，否则整个声明会被浏览器忽略。你当前定义的--Body-Font变量里只包含了字体样式、权重和族，缺少必填的字体大小，所以无法生效。

修正方案1：补充字体大小到组合变量中 #

在:root里添加字体大小变量，然后整合到--Body-Font中：

:root {
    --Font-Family-Regular: 'my-custom-web-font', verdana, sans-serif;
    --Font-Family-Regular-Weight: 400;
    --Font-Family-Regular-Style: normal;
    --Font-Size-Body: 1rem; /* 新增字体大小变量 */

    --Body-Font:
        var(--Font-Family-Regular-Style)
        var(--Font-Family-Regular-Weight)
        var(--Font-Size-Body)
        var(--Font-Family-Regular);
}

body {
  font: var(--Body-Font);
}

修正方案2：分开设置单属性（更灵活） #

如果不想依赖font简写的规则，也可以分别给单个字体属性赋值变量，这样不受简写的必填项限制：

:root {
    --Font-Family-Regular: 'my-custom-web-font', verdana, sans-serif;
    --Font-Family-Regular-Weight: 400;
    --Font-Family-Regular-Style: normal;
}

body {
  font-style: var(--Font-Family-Regular-Style);
  font-weight: var(--Font-Family-Regular-Weight);
  font-family: var(--Font-Family-Regular);
  /* 单独设置字体大小 */
  font-size: 1rem;
}

这两种方式都能实现你想要的效果，第一种适合需要统一管理整套字体规则的场景，第二种更灵活，能单独调整某一项属性。

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