我可以在字体列表中使用 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 condition 与虚拟特征查询一起使用：

.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 */
    }
}

Answer 2

当然，它会在旧版浏览器中崩溃。但是我认为可以使用 postcss-css-variables 插件来进行转换。这样您就可以继续使用 CSS 变量功能，而不必在旧版浏览器上过分担心。当那些旧版浏览器淡出时，您只需删除插件即可。

查看 https://www.npmjs.com/package/postcss-css-variables 了解详情。

它还有一个游乐场，您可以在其中玩耍，看看它的行为。

例如，

    :root {
        --color-background: #ffaaaa;
        --font-color: #2222ff;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-background: #aaaaff;
            --font-color: #ffFF22;
        }
    }

    body {
        background-color: var(--color-background);
    }
    
    p {
        color: var(--font-color);
    }

将转换为

    body {
        background-color: #ffaaaa;
    }

    @media (prefers-color-scheme: dark) {

        body {
            background-color: #aaaaff;
        }
    }
    
    p {
        color: #2222ff;
    }
    
    @media (prefers-color-scheme: dark) {

        p {
            color: #ffFF22;
        }
    }

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

Can I use CSS variables in a font list and have it work in legacy browsers?

html

css

css-variables