将后备字体添加到@ font-face定义

Question

是否可以将后备字体直接添加到font-face的定义中？

例：

@font-face {
  font-family: 'MyWebFont', Arial, Helvetica, sans-serif;
  src: url('fonts/MyWebFont.eot');
  src: url('fonts/MyWebFont.eot?#iefix') format('embedded-opentype'),
  url('fonts/MyWebFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

然后将其用作具有自动回退的font-family值，如下所示：

p {
  font-family: MyWebFont;
}

我的目标是不必在定义新字体系列的所有地方都定义后备字体。如果不像上面那样，我可以不用JavaScript以某种方式实现它吗？谢谢你的帮助！

Answer 1

您完全可以将后备字体添加到@font-face规则中！*您不将它们添加到font-family描述符中（这是为了给您的字体系列命名）；您将它们添加到src描述符中，该描述符接受多个值。如果浏览器找不到（或不支持）第一种字体，它将尝试加载下一种字体，依此类推。您可以使用以下函数让它查找用户系统上安装的字体local()：

@font-face {
  font-family: bodytext;
  src: url(fonts/MyWebFont.woff) format("woff"),
       local(Arial),
       local(Helvetica);
}

有些人可能会争辩说，url()它local()并不是设计用于这种方式的。通常，它们用于提供相同字体的本地和远程版本，如果找不到本地字体，则网络字体将作为后备。这是W3C 规范中的一个示例：

@font-face {
  font-family: MyGentium;
  src: local(Gentium),    /* use locally available Gentium */
       url(Gentium.woff); /* otherwise, download it */
}

但没有什么可以说你不能用它来代替常规字体堆栈。查看这个 W3C 示例：

为不同平台上的本地日语字体创建别名：

@font-face {
  font-family: jpgothic;
  src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
}

*但有一些注意事项。不要指望它的工作方式与font-family您习惯的熟悉的堆栈完全相同。首先，对于您的字体可能不支持的单个字符，没有后备方案。其次，您不能引用通用字体系列（如sans-serif、system-ui等）。对于这些功能，您只能使用经典字体堆栈。但是您可以愉快地使用这两个功能，将所有命名字体封装在规则中@font-face，并在声明中添加通用字体作为最后的后备手段font-family：

p {
  font-family: bodytext, sans-serif;
}

Answer 2

不可以，您不能在@font-face规则内指定任何后备字体，因为这样的规则定义了一个字体并为其指定了名称。在规则内，font-family零件只能包含一个名称，即您选择分配的名称。在那里列出几个名称将是毫无意义的，因为只有第一个名称可能很重要（此外，在这种情况下，名称没有任何预定义的含义，例如Arial并不意味着Arial字体，而只是一个任意分配的名称）。

后备字体只能在常规font-family规则中指定。

考虑组织样式表，以便font-family使用合适的选择器列表（例如，

p, blockquote, .foobar, .something {
   font-family: MyWebFont, Arial, Helvetica, sans-serif;
}