在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」 等