如果属性具有变量作为值，CSS Cascade 对字体简写没有影响

Question

假设我们有以下 CSS 自定义属性：

// Global CSS
:root {
  --font-weight-500: 500;
  --font-size-350: 14px;
  --font-line-height-500: 20px;
  --font-family-sans: 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif;
  --font-family-primary: var(--font-family-sans);

  --font-body-medium-1: var(--font-weight-500) var(--font-size-350)/var(--font-line-height-500) var(--font-family-primary);
}

以及以下具有开放影子根的 Web 组件。

// Web Component
:host {
  --font-family-primary: “Comic Sans MS”;
  font: var(--font-family-primary);
}

知道为什么字体简写不接受任何单独的属性覆盖吗？每次测试都失败。如果字体属性的各个属性（例如 font-family）将自定义属性作为其值，则不会发生级联。

Answer 1

font

简写必须提供至少、

font-size

和

font-family

的值（并按此顺序）。您的代码无法正常工作，因为您只为字体系列提供一个值 - 在其前面添加一个字体大小，它应该可以正常工作。例如。

font: 16px var(--font-family-primary);

。

您可以在此处阅读有关文档中的详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/font（只需查看语法部分）。