CSS中能否用单个名称为多个字体设置别名？

完全没问题，你可以通过@font-face把一长串字体栈打包成一个自定义别名，以后写样式的时候直接用这个别名就行，不用重复写那一大串字体列表。

核心思路是利用@font-face的src属性里的local()函数，把你想要的字体按顺序列进去，浏览器会按照这个顺序优先查找本地字体，找不到就往下走。举个实际的例子：

/* 定义自定义字体别名 */
@font-face {
  font-family: 'MyGoToSans'; /* 这就是你要的单个别名 */
  src: local('Font A'), local('Font B'), local('Font C');
  font-weight: normal;
  font-style: normal;
}

/* 实际使用的时候 */
body {
  font-family: 'MyGoToSans', sans-serif; /* 直接用别名，最后加兜底的通用字体 */
}

几个需要注意的细节： #

• local()里的字体名称必须和系统中安装的字体名称完全一致，比如字体叫Font A Bold就不能只写Font A，带空格的名称要完整写进去。
• 如果需要支持不同字重（比如粗体）或者样式（比如斜体），要单独定义对应的@font-face规则：

  @font-face {
    font-family: 'MyGoToSans';
    src: local('Font A Bold'), local('Font B Bold'), local('Font C Bold');
    font-weight: bold;
    font-style: normal;
  }
  

  这样当你给元素设置font-weight: bold时，浏览器会自动匹配对应的粗体字体栈。
• 要是你的字体栈里包含自定义的web字体（不是系统内置的），也可以把url()和local()结合起来，比如先检查本地有没有安装，没有就加载远程字体：

  @font-face {
    font-family: 'MyGoToSans';
    src: local('Font A'), url('font-a.woff2') format('woff2'),
         local('Font B'), url('font-b.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  

这种方法最大的好处就是把字体栈的定义集中在一处，后期要调整字体顺序或者替换字体，只需要修改@font-face里的src就行，不用在代码里到处找重复的字体列表，维护起来省心很多。

内容的提问来源于stack exchange，提问作者James Ko