时间戳

首页 > 解决方案 > 字体系列的 CSS 变量是“无效属性”，即使变量之外的相同字符串很好

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

问题描述

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

您还可以在此 CodePen Pen中查看我的代码。

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

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

这只是“CSS 文献”中的一个示例，它似乎准确地支持了我正在做的事情：CSS 变量 — 如何使用 CSS 自定义属性 。该来源提供了以下示例：

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

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

这是我上面描述的代码（也在这个 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>

标签： cssfont-familycss-variables

解决方案

尝试使用var(--variable)引用 css 变量时有额外的空间

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

推荐阅读