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部分只能包含一个名称，即您选择分配的名称。在那里列出几个名称是毫无意义的，因为只有第一个可能很重要（而且，在这种情况下，没有名称具有任何预定义，例如Arial不代表Arial字体，而只是一个任意指定的名称）。 / p>

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

考虑组织你的样式表，以便相关的font-family列表只出现一次，使用合适的选择列表，例如

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

Answer 2

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: $MainFont;
}
h1 {
    font-family: $HeavyFont;
}

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

2 个答案: