CSS变量与@font-face at-rule结合使用问题求助

这个问题我之前也碰到过——核心原因是浏览器目前不支持在@font-face的font-weight属性中使用CSS变量。

为什么会这样？ #

CSS变量的解析是在样式计算的后期阶段，而浏览器处理@font-face规则时，需要明确的静态数值来识别字体的权重变体，以此建立字体家族和对应权重的映射关系。当你用变量替代具体数值时，浏览器在初始化@font-face时无法解析变量值，导致字体无法正确注册，最终出现加载异常或权重不生效的问题。

解决方案1：直接使用静态数值（最稳妥） #

把@font-face里的变量替换成对应的硬编码数值，保留:root里的变量供其他样式使用：

:root {
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
}

@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  font-style: normal;
  font-weight: 300; /* 替换为具体数值 */
  src: url('/fonts/proximanova-light.woff') format('woff');
}

@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/proximanova-regular.woff') format('woff');
}

@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/proximanova-semibold.woff') format('woff');
}

解决方案2：在使用字体时用变量（兼顾复用性） #

保留@font-face的静态数值，在实际应用字体权重的选择器中使用CSS变量，这样既保证字体能正确注册，又能享受变量的复用便利：

/* 保留@font-face的静态配置 */
@font-face {
  font-family: 'Proxima Nova';
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/proximanova-light.woff') format('woff');
}

/* 其他@font-face规则... */

:root {
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
}

/* 在实际样式中使用变量 */
body {
  font-family: 'Proxima Nova', sans-serif;
  font-weight: var(--font-weight-normal);
}

.text-light {
  font-weight: var(--font-weight-light);
}

.text-semibold {
  font-weight: var(--font-weight-semibold);
}

这样调整后，字体就能正常加载并按预期应用权重了。

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