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似乎不是指定使用此字体文件呈现的重量，而是匹配＆＃34; @font-face指定相同名称时使用的字体文件。

示例：

如果在@font-face内，我们指定了font-weight 400，现在文字显示在Google Chrome中（版本48.0，我可以在此获得几乎相同的jsfiddles结果问题使用当前的Firefox 44.0.2），光线不能更轻，但粗体可能通过渲染＆＃34;双重打印＆＃34;字体或＆＃34;双倍宽度＆＃34;一个像素：

https://jsfiddle.net/0vL8m9bj/

如果我们font-weight 900 @font-face 900，那么所有3行文字都会变得规则：

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

因此，我们可以看到font-weight不会使用该字体文件指定要显示的内容。

那么@font-face内<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,900,300' rel='stylesheet' type='text/css'>的用途是什么？

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

/* 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 */

这实际上会将一些CSS定义作为文件加载到浏览器中：

现在我们可以看到3＆＃34;权重＆＃34;：

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

但是，它不是通过最接近的数字匹配 - 看起来它匹配＆＃34; light＆＃34;，＆＃34; normal＆＃34;和＆＃34; bold＆＃34;类别，因为如果它是299，它将与299不匹配，即使它与400非常接近，但会与500或{{ 1}}：

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

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

我们还可以看到，如果我们撤消@font-face＆＃39; font-weight，并使用bold，normal，lighter文本的样式，然后bold将使用浅色字体文件，lighter将使用深色字体文件：

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

然而，有一件奇怪的事情是，如果700在上一个@font-face更改为701，那么现在所有3行都会变为粗体：

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

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

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

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

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

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

所以让它变得更轻便使它变得更加大胆。

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

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规则，用户代理可以下载所有面孔   系列或使用这些描述符有选择地下载字体   与文档中使用的实际样式匹配。这些的价值观   描述符与相应字体的描述符相同   属性除了不允许相对关键字，'更大胆'和   '打火机'。如果省略这些描述符，则初始值为   假设

...

这样做的好处是，＃34; RobotoBold＆＃34;，＆＃34; RobotoLight＆＃34;等等不需要font-family个名字。

在CSS @ font-face中，font-weight不指定用于此字体的权重，而是指定＆＃34;匹配＆＃34;有3类font-weight？

1 个答案: