CSS font-family 的变量是 "invalid property"，即使变量外的相同字符串也可以

Question

对于以下每个 h1 和 h2 元素，下面的 CSS 以两种替代方式指定 font-family：(a) 作为传统字符串，例如，font-family: Tangerine,cursive; 和 (b) 作为先前定义的 CSS 变量，例如 font-family: var(--my-font-family-cursive);，其中一个选项被注释掉。

你也可以在this CodePen Pen中看到我的代码。

当我使用传统的字符串规范（注释掉 CSS-variable 规范）时，一切正常。每个标题都以其所需的字体呈现，如以下屏幕截图所示：

然而，当我注释字符串规范并取消注释 CSS-variable 规范时，font-family 规范被完全忽略并且呈现默认为我的浏览器的 user-agent 规范 serif，如这个截图所示：

Chrome 和 Firefox 开发人员工具都将 font-family: var(--my-font-family-cursive); 视为 "Invalid property value"。见截图。

请注意，我使用相应的 CSS-variable 语法来定义字体颜色 --my-font-color 和 --my-font-color-cursive 并且可以识别这些字体颜色，从而导致红色 h1 和蓝色h2.

一定是我忽略了一些愚蠢的东西，但我不明白为什么我的 CSS-variable 公式被拒绝了。

这只是 "CSS literature" 中的一个示例，它似乎恰恰支持我正在做的事情：CSS 变量 — 如何使用 CSS 自定义属性。该来源给出了以下示例：

:root {
    --headings-font-family: "Times New Roman", Times, serif;
}

h2 {
    font-family: var(--headings-font-family);
}

这是我上面描述的代码（也在 this CodePen Pen）：

<html>
<head>
<title>MWE: CSS variable for font-family not working</title>
<style>
    @import url(https://fonts.googleapis.com/css?family="PT Sans");
    @import url(https://fonts.googleapis.com/css?family=Tangerine);

    :root {
      --my-font-family:         "PT Sans", sans-serif ;
      --my-font-family-cursive: Tangerine, cursive ;
      --my-font-color:          red ;
      --my-font-color-cursive:  blue ;
    }

    h1, h2 { font-size: 3em ; }

    h1 {
        color:          var( --my-font-color ) ;
/*      font-family:    "PT Sans", san-serif ;  */
        font-family:    var ( --my-font-family ) ; 
    }

    h2 {
        color:          var( --my-font-color-cursive ) ;
/*      font-family:    Tangerine, cursive ;  */
        font-family:    var ( --my-font-family-cursive ) ; 
    }
</style
</head>
<body>
    <h1>Just some text</h1>
    <h2>Some more text</h2>
</body>
</html>

Answer 1

当您尝试使用 var(--variable)

引用 css 变量时，您有一个额外的 space

h2 {
    color:          var( --my-font-color-cursive ) ;
    font-family:    Tangerine, cursive ;  */
    font-family:    var( --my-font-family-cursive ) ; 
}

CSS font-family 的变量是 "invalid property"，即使变量外的相同字符串也可以

CSS variable for font-family is "invalid property" even though same string outside of variable is fine

css

font-family

css-variables