8

如何在 CSS 变量的后备值中使用逗号？

例如，这很好：var(--color, #f00)，但这很奇怪var(--font-body, Verdana, sans-serif)。

这个想法是能够font-family使用具有后备值 say 的变量来设置 a Verdana, sans-serif。

编辑：这实际上对于支持 CSS 属性的浏览器非常有效，但问题似乎来自 Google Polymer 的 polyfills。

为了将来参考，我最终像这样对字体和字体系列后备使用了变量（目前似乎是最干净的方法）：

font-family: var(--font-body, Verdana), var(--font-body-family, sans-serif)
4

3 回答 3

10

以下是W3C 规范的摘录：（重点是我的）

注意：回退的语法与自定义属性的语法一样，允许使用逗号。例如， var(--foo, red, blue) 定义了 red, blue 的后备；也就是说，第一个逗号和函数末尾之间的任何内容都被视为后备值。

从上面的语句中可以看出，如果您的意图是在未定义Verdana, sans-serif时设置为后备值，那么所给出的语法应该可以工作。--font-body根据规范，它不需要任何引号。

我没有支持 CSS 变量的浏览器，因此我无法测试以下代码，但它应该根据规范工作：

.component .item1 {
  --font-body: Arial;
  font-family: var(--font-body, Verdana, sans-serif); 
  /* should result in font-family: Arial */
}
.component .item2 {
  font-family: var(--font-body, Verdana, sans-serif);
  /* should result in font-family: Verdana, sans-serif */
}
<div class=component>
  <p class=item1>Arial
  <p class=item2>Verdana, sans-serif
</div>

于 2016-05-25T16:25:17.037 回答
3

正如 Harry 所提到的，您所拥有的应该已经在实现自定义属性的浏览器中工作。

但是，如果您将自定义属性与 一起使用font-family，则有一个主要警告：var()不允许您修改或添加到现有字体堆栈，因为自定义属性的级联方式与所有其他属性完全相同。也就是说，表达式

var(--font-body, Verdana, sans-serif)

产生两个可能值之一：

  1. 如果存在--font-body自定义属性声明，var(--font-body)
  2. 否则，Verdana, sans-serif

“Verdana, sans-serif”不是定义在 中的字体堆栈的一部分，如果定义在 中--font-body的系列--font-body丢失或对浏览器不可用，它不会退回到 Verdana 或 sans-serif；相反，它将退回到浏览器选择的任意默认字体。

最糟糕的是，如果 的值--font-body导致整个font-family声明无效，则该font-family声明将无效。

如果您希望在样式表中动态构建字体堆栈，则不能使用自定义属性。您将需要一个 CSS 预处理器。

于 2016-05-25T16:45:18.890 回答
0

这可以通过简单地用逗号分隔单独的值来实现：

p{
  /* By commenting this out, we are making the variable non-existent */
  /* --font-family: "Times New Roman, serif"; */
}

p.sans-serif{
  font-family: var(--font-family, "Arial", "Helvetica");
}

<p class="sans-serif">
  This will be in a sans-serif font because the fallback value is "Arial" and "Helvetica"
</p>

如您所见，p.sans-serif通常会以衬线字体显示。如果取消注释p样式，它将以衬线字体显示。

但是，如果该变量不存在（因为我们已将其注释掉，所以它不存在），则回退有效。

于 2016-05-25T16:23:24.510 回答