font-family 的 CSS 变量是“无效属性”，即使变量外部的相同字符串没问题
Jim*_*iff 4 css font-family css-variables
对于以下每个h1和h2元素，下面的 CSSfont-family以两种替代方式指定 a：(a) 作为传统字符串，例如，font-family: Tangerine,cursive;以及 (b) 作为先前定义的 CSS 变量，例如 ，font-family: var(--my-font-family-cursive);其中一种替代方式已被注释掉。
您还可以在此 CodePen Pen中看到我的代码。
\n\n当我使用传统的字符串规范（注释掉 CSS 变量规范）时，一切正常。每个标题都以其所需的字体呈现，如以下屏幕截图所示：
\n\n
但是，当我注释字符串规范并取消注释 CSS 变量规范时，该font-family规范将被完全忽略，并且渲染默认为我的浏览器的用户代理规范serif，如以下屏幕截图所示：
例如，Chrome 和 Firefox 开发人员工具都认为font-family: var(--my-font-family-cursive);“属性值无效”。请参阅屏幕截图。
请注意，我使用相应的 CSS 变量语法来定义字体颜色--my-font-color，并且--my-font-color-cursive这些字体颜色被识别，从而产生红色h1和蓝色h2。
肯定是我忽略了一些愚蠢的东西，但我无法弄清楚为什么我的 CSS 变量公式被拒绝。
\n\n这只是“CSS 文献”中的一个示例，它似乎准确地支持了我正在做的事情：CSS Variables \xe2\x80\x94 How To Use CSS Custom Properties\n。该来源给出了以下示例：
\n\n:root {\n --headings-font-family: "Times New Roman", Times, serif;\n}\n\nh2 {\n font-family: var(--headings-font-family);\n}\n这是我上面描述的代码（也在CodePen Pen中）：
\n\n<html>\n<head>\n<title>MWE: CSS variable for font-family not working</title>\n<style>\n @import url(https://fonts.googleapis.com/css?family="PT Sans");\n @import url(https://fonts.googleapis.com/css?family=Tangerine);\n\n :root {\n --my-font-family: "PT Sans", sans-serif ;\n --my-font-family-cursive: Tangerine, cursive ;\n --my-font-color: red ;\n --my-font-color-cursive: blue ;\n }\n\n h1, h2 { font-size: 3em ; }\n\n h1 {\n color: var( --my-font-color ) ;\n/* font-family: "PT Sans", san-serif ; */\n font-family: var ( --my-font-family ) ; \n }\n\n h2 {\n color: var( --my-font-color-cursive ) ;\n/* font-family: Tangerine, cursive ; */\n font-family: var ( --my-font-family-cursive ) ; \n }\n</style\n</head>\n<body>\n <h1>Just some text</h1>\n <h2>Some more text</h2>\n</body>\n</html>\n当尝试使用var(--variable)引用 css 变量时，您有一个额外的空格
h2 {
color: var( --my-font-color-cursive ) ;
font-family: Tangerine, cursive ; */
font-family: var( --my-font-family-cursive ) ;
}