css - 在css@font-face中，font-weight不是指定这个字体用什么粗细，而是用font-weight的3类到 "match"？

Question

假设我们定义了一个font-family，使用@font-face:

@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 中，我们指定 400 的 font-weight，现在文本显示在 Google Chrome 中(版本 48.0，我可以在这个问题中使用当前的 Firefox 44.0.2 获得几乎相同的 jsfiddles 结果，光线不能更亮，但粗体可能是通过渲染“双重打印”技巧而变粗的像素的字体或“双倍宽度”:

https://jsfiddle.net/0vL8m9bj/

如果我们将 @font-face 中的 font-weight 设置为 900，那么所有 3 行文本都将变为常规:

https://jsfiddle.net/0vL8m9bj/1/

所以我们可以看到900不是指定要显示什么，而是使用那个字体文件。

那么@font-face里面的font-weight有什么用呢？

如果我们使用 https://www.google.com/fonts#UsePlace:use/Collection:Roboto并链接这一行:

<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 个“权重”:

https://jsfiddle.net/0vL8m9bj/5/

但是，它不是按数字最接近的匹配——它看起来像按“light”、“normal”和“bold”类别匹配，因为如果它是 301 ，它不会与 299 匹配，甚至认为它非常接近 299，但会与 400 或 500< 匹配:

https://jsfiddle.net/0vL8m9bj/6/

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

我们还可以看到，如果我们反转@font-face的font-weight，并使用bold，normal，lighter为文字的样式，然后bold使用light字体文件，lighter使用深色字体文件:

https://jsfiddle.net/0vL8m9bj/10/

但是，奇怪的是，如果把上一个@font-face中的700改成701，现在所有3行将变为粗体:

https://jsfiddle.net/0vL8m9bj/7/

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

还有一件奇怪的事:如果.section1是font-weight: 300，它显示为light:

https://jsfiddle.net/0vL8m9bj/8/

但让它成为 font-weight: 299 -- 意思是更轻，现在它显示为粗体:

https://jsfiddle.net/0vL8m9bj/9/

所以让它更轻便使其更大胆。

那么@font-face里面的font-weight规则是什么？

Answer 1

你的假设是正确的。

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

[4.1] The @font-face rule allows for linking to fonts that are automatically fetched and activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on a given platform. A set of font descriptors define the location of a font resource, either locally or externally, along with the style characteristics of an individual face.

...

Each @font-face rule specifies a value for every font descriptor, either implicitly or explicitly. Those not given explicit values in the rule take the initial value listed with each descriptor in this specification. These descriptors apply solely within the context of the @font-face rule in which they are defined, and do not apply to document language elements. There is no notion of which elements the descriptors apply to or whether the values are inherited by child elements.

然后在第 4.4 节中:

[font-style, font-weight and font-stretch] define the characteristics of a font face and are used in the process of matching styles to specific faces. For a font family defined with several @font-face rules, user agents can either download all faces in the family or use these descriptors to selectively download font faces that match actual styles used in document. The values for these descriptors are the same as those for the corresponding font properties except that relative keywords are not allowed, ‘bolder’ and ‘lighter’. If these descriptors are omitted, initial values are assumed.

...

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