可以在CSS中使用单个名称别名多个字体名称吗？

Question

我知道可以使用@font-face轻松替换单个字体名称，特别是如果它是自定义字体而不是像Arial这样的内置字体。但是，是否可以使用单个名称别名许多字体名称？例如，如果我有

font-family: 'Font A', 'Font B', 'Font C', ..., sans-serif;

我可以使用单个名称来引用所有这些字体，以便我可以编写

font-family: name;

代替？

Answer 1

可以使用CSS属性执行此操作。

:root {
  --font: 'Font A', 'Font B', 'Font C', sans-serif;
}

.fancyFont {
  font-family: var(--font);
}

Answer 2

我认为用原始CSS做这件事是不可能的。您应该尝试实现CSS预处理器，例如SASS或LESS。我知道可以用SASS做到这一点，链接就是一个很好的例子。

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

您只需列出要用于font或font-family属性的所有字体，并指定＆＃34; stack＆＃34;到 $ 和 : 的变量。然后，您只需使用变量即可参考整个字体列表。