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变量并使它在旧版浏览器中工作吗？

2 个答案: