在CSS @ font-face中，字体权重不是指定用于此字体的重量，而是与3种字体重量“匹配”？

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，现在的文本呈现在谷歌浏览器（版本48.0，我可以得到几乎相同的结果，使用当前的Firefox在这个问题jsfiddles 44.0.2），与不被所述光能够被轻，但通过使“双印刷”字型或像素的“双宽度”的招数大胆一个可能是由粗体：

https://jsfiddle.net/0vL8m9bj/

如果我们制作font-weight就是900作出@font-face，则文本的所有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/

，但是，它不是由CL最匹配的数字 - 它看起来像“轻”，“正常”和“粗体”类别匹配，因为如果它是301，它将不会与299匹配，即使认为它非常接近299 ，但将匹配与400或500：

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

的699也不会700匹配，但将匹配400。

我们也可以看到，如果我们扭转@font-face的font-weight，并使用bold，normal，lighter为样式的文本，然后bold将使用光字体文件，并lighter将使用深色字体文件：

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

然而，一个奇怪的是，如果700在最后@font-face到701改变，现在所有的3条线将成为大胆：

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

所以这真的很奇怪。看起来规则是：除了最后一个例子外，与3类权重相匹配。

一个更奇怪的事情：如果.section1是，它显示光：

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]的@font-face规则允许链接到是 自动获取并在需要时激活的字体。这允许作者 选择与给定的 页面的设计目标非常匹配的字体，而不是将字体选择限制为在给定平台上可用的一组字体 。一组字体描述符定义本地或外部的字体资源的位置，以及个人脸部的样式 。

...

每个@font-face规则指定为每个字体描述的值，无论是含蓄或明确。规则中没有给出明确值的那些在本规范中采用与每个描述符一起列出的初始值。这些描述符仅适用于定义它们的@font-face规则的上下文中，并且不适用于文档语言元素。没有描述符适用于哪些元素的概念，或者值是否由子元素继承。

然后根据第4节。4：

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

...

这样做的优势在于不需要font-family名字 “RobotoBold”， “RobotoLight” 等