我可以在字体列表中使用 CSS 变量并让它在旧浏览器中工作吗？

Question

我想使用 CSS 变量来存储字体，以防用户没有安装指定的字体。

例子：

:root {
     --common-font: Comic Sans MS;
}

.header1 {
     font-family: CoolFont1, var(--common-font);
}

如果我在字体名称中添加对变量的引用，旧浏览器会中断吗？

https://caniuse.com/#feat=css-variables

Answer 1

是的，它会中断，您必须在不使用 CSS 变量的情况下为旧版浏览器使用回退字体。

例如：

   .header {
       font-family: sans-serif; /* This is fallback font for old browsers */
       font-family: var(--common-font);
    }

您也可以将@supports 条件与虚拟功能查询一起使用：

.header {
    @supports ( (--a: 0)) {
      /* supported */
      font-family: var(--common-font);
    }

    @supports ( not (--a: 0)) {
      /* not supported */
      font-family: sans-serif; /* This is fallback font for old browsers */
    }
}