如何在CSS变量的后备值中使用逗号？
例如.这很好：var( – color,#f00),但这是奇怪的var( – font-body,Verdana,sans-serif).
我们的想法是能够使用一个后备值为Verdana,sans-serif的变量来设置font-family.
编辑：这实际上适用于支持CSS属性的浏览器,但问题似乎来自Google Polymer的polyfill.
为了将来参考,我最终使用变量同时为字体和字体系列回退(似乎是目前最干净的方式)：
font-family: var(--font-body,Verdana),var(--font-body-family,sans-serif)
解决方法
以下是
W3C spec的摘录:(重点是我的)
Note: The Syntax of the fallback,like that of custom properties,allows commas. For example,var(–foo,red,blue) defines a fallback of red,blue; that is,anything between the first comma and the end of the function is considered a fallback value.
从上面的语句中可以看出,如果你的意图是在没有定义–font-body的情况下将Verdana设置为sans-serif作为后备值,那么预期所提出的语法将起作用.根据规范,它不需要任何报价.
我没有支持CSS变量的浏览器,因此我无法测试以下代码,但它应该根据规范工作：
.component .item1 {
--font-body: Arial;
font-family: var(--font-body,sans-serif);
/* should result in font-family: Arial */
}
.component .item2 {
font-family: var(--font-body,sans-serif);
/* should result in font-family: Verdana,sans-serif */
}
<div class=component> <p class=item1>Arial <p class=item2>Verdana,sans-serif </div>
