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

Question

是否可以直接在字体定义中添加后备字体？

示例：

@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;
}

然后将其用作具有自动回退功能的字体系列值，如下所示：

p {
  font-family: MyWebFont;
}

我的目标是不必在定义新字体系列的任何地方都定义后备字体。如果不像上面那样，我可以在没有 JavaScript 的情况下实现这一点吗？感谢您的帮助！

Answer 1

不，您不能在

@font-face

规则中指定任何后备字体，因为此类规则定义字体并为其分配名称。在规则内，

font-family

部分只能包含一个名称，即您选择分配的名称。在那里列出几个名称是没有意义的，因为只有第一个可能很重要（此外，在这种情况下，没有任何名称具有任何预定义的含义，例如 Arial 并不意味着 Arial 字体，而只是一个任意分配的名称）。

后备字体只能在正常

font-family

规则中指定。

考虑组织样式表，以便相关的

font-family

列表仅出现一次，使用合适的选择器列表，例如

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

Answer 2

您完全可以将后备字体添加到

@font-face

规则中！* 您不必将它们添加到

font-family

描述符中（这是为了给您的字体系列命名）；您将它们添加到

src

描述符中，该描述符接受多个值。如果浏览器找不到（或不支持）第一种字体，它将尝试加载下一种字体，依此类推。您可以使用

local()

函数让它查找用户系统上安装的字体：

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

有些人可能会说

url()

和

local()

并不是设计用于这种方式使用的。通常，它们用于提供 same 字体的本地和远程版本，如果找不到本地字体，则网络字体将作为后备。这是来自 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 3

CSS 变量是保持 DRY 的一种解决方案

:root {
     --MainFont: "Gotham", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
     --HeavyFont: "Gotham Black", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
    
body {
     font-family: var(MainFont, sans-serif);
}
h1 {
     font-family: var(HeavyFont, sans-serif);
}