在CSS的@font-face中，font-weight并不是用来指定字体的权重，而是与3个字体权重类别进行“匹配”的？

Question

在CSS的@font-face中，font-weight并不是用来指定字体的权重，而是与3个字体权重类别进行“匹配”的？

4

假设我们通过使用 @font-face 定义了一个要使用的 font-family:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

看起来上面的font-weight并不是用于指定在用户指定使用font-family: Roboto字体时使用哪种字体粗细，而是用于"匹配"当@font-face指定相同名称时使用哪种字体文件。例如，在@font-face中指定font-weight为400，在 Google Chrome（版本48.0）中呈现的文本内容，无法将轻质变得更轻，但可能会通过双重打印或增加像素的宽度来使粗体文本变粗。如果我们在@font-face中将font-weight设置为900，那么所有3行文本都变回了普通样式。因此，我们可以看出900并没有指定使用该字体文件应该如何显示。那么，在@font-face内部使用font-weight的作用是什么呢？如果我们使用https://www.google.com/fonts#UsePlace:use/Collection:Roboto 并链接这一行，您将看到它提供了一个与font-weight相关的示例。

<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,900,300' 
    rel='stylesheet' type='text/css'>

这将把一些CSS定义作为文件加载到浏览器中：

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIpBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* other languages omitted here */

现在我们可以看到3个“权重”：

但是，它并不是通过数字的最接近匹配，而是似乎是通过“轻”，“正常”和“粗体”类别进行匹配，因为如果它是301，则不会与299匹配，即使它非常接近于299，但是会与400或500匹配：

699也不会与700匹配，但会与400匹配。

我们还可以看到，如果反转@font-face的font-weight，并使用文本样式的bold、normal、lighter，则bold将使用浅色字体文件，而lighter将使用深色字体文件：

但是，一个奇怪的事情是，如果在最后一个@font-face中将700更改为701，现在所有3条线都会变成粗体：

所以这真的很奇怪。似乎规则是：与3个权重类别匹配，除了最后一个例子。

再说一个奇怪的事情：如果.section1的font-weight为300，它显示为轻盈：

但将其设置为font-weight：299-表示较轻，则现在它显示为粗体：

因此，使其更轻变成了粗体。

那么，在@font-face中，font-weight的规则是什么？

- nonopolarity

制作HTML标签也很重要。不仅仅是CSS、CSS3和字体。 - AVI

如果这仅适用于HTML，我会感到惊讶。你知道我们不知道的事情吗？如果是这样，我邀请你发表一个答案。 - BoltClock

2个回答

1

我也对@font-face如何基于样式的font-weight进行选择感到好奇，但这篇MDN文章非常清楚地解释了https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#fallback_weights

我也在进行自己的测试

body {
  font-family: 'Averta', sans-serif;
}

@font-face {
  font-family: 'Averta';
  src: url('../public/fonts/averta-regular-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Averta';
  src: url('../public/fonts/averta-bold-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

并证明了

<div style={{ fontWeight: 501 }}>Balance:</div>

将显示粗体字

而

<div style={{ fontWeight: 500 }}>Balance:</div>

将显示常规字体

- Diogo S

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user6024442 · Accepted Answer

你的假设是正确的。

@font-face 中的描述符与元素的样式无关，只与字体匹配相关。来自 CSS Fonts Module Level 3 draft:

[4.1] @font-face 规则允许链接到在需要时自动获取和激活的字体。这使得作者可以选择与给定页面的设计目标最接近的字体，而不仅限于给定平台上可用的一组字体。一组字体描述符定义了字体资源的位置（本地或外部），以及单个面的样式特征。

...

每个 @font-face 规则都隐式或显式地指定了每个字体描述符的值。在规则中未明确给出值的描述符将采用此规范中每个描述符列出的初始值。这些描述符仅适用于定义它们的 @font-face 规则的上下文中，并且不适用于文档语言元素。没有哪个元素应用这些描述符的概念，也没有值是否被子元素继承的概念。

然后在第4.4节下面：

[font-style，font-weight和font-stretch]定义字体的特征，并用于将样式与特定字体匹配。对于使用多个@font-face规则定义的字体系列，用户代理可以下载系列中的所有字体或使用这些描述符有选择地下载与文档中实际使用的样式相匹配的字体。这些描述符的值与相应字体属性的值相同，只是不允许使用相对关键字“bolder”和“lighter”。如果省略了这些描述符，则假定为初始值。

...

这样做的好处是，不需要“RobotoBold”，“RobotoLight”等font-family名称。