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

Posted 2021-05-04

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

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

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

font-family: name;

代替？

答案

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

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

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

另一答案

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

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

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

您只需列出要用于font或font-family属性的所有字体，并使用$和:将该“堆栈”分配给变量。然后你可以通过使用变量来引用整个字体列表。