字体系列的 CSS 变量是“无效属性”，即使变量之外的相同字符串很好答案

【问题标题】：CSS variable for font-family is "invalid property" even though same string outside of variable is fine字体系列的 CSS 变量是“无效属性”，即使变量之外的相同字符串很好
【发布时间】：2019-06-24 01:51:42
【问题描述】：

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

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

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

但是，当我注释字符串规范并取消注释 CSS 变量规范时，font-family 规范将被完全忽略，呈现默认为我的浏览器的用户代理规范 serif，如下图所示：

Chrome 和 Firefox 开发者工具都认为，例如，font-family: var(--my-font-family-cursive); 是“无效的属性值”。见截图。

请注意，我使用相应的 CSS 变量语法来定义字体颜色 --my-font-color 和 --my-font-color-cursive 并且这些字体颜色被识别，导致红色 h1 和蓝色 h2。

一定是我忽略了一些愚蠢的事情，但我无法弄清楚为什么我的 CSS 变量公式被拒绝了。

这只是“CSS 文献”中的一个例子，它似乎完全支持我正在做的事情：CSS Variables — How To Use CSS Custom Properties 。该来源给出了以下示例：

: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>

【问题讨论】：

标签： css font-family css-variables

【解决方案1】：

尝试使用 var(--variable)

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

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

【讨论】：

好吧，那怎么样！我知道一定有类似的东西，但我自己看不到。感谢您解决我的问题！
多余的空间在哪里？我看不出你的代码和 OP 代码有什么区别？
@TemaniAfif 永远带走了我。我的示例中的 X 是额外空间所在的位置。示例：font-family: varX( --my-font-family-cursive ) ;