应用font-weigh的Google字体：不导入时为800

Question

我按照以下方式导入尺寸300和400：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" media="all">

但我仍然可以申请font-weight: 800，它看起来与font-weight:400不同？为什么？从哪里得到它？

繁殖： https://jsfiddle.net/7164fk3j/

即使我只导入font-weight 300：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300" media="all">

繁殖： https://jsfiddle.net/7164fk3j/1/

这是如何工作的？它只是大胆的300？

Answer 1

后退权重

font-weight根据以下算法使用后备权重：

  

如果给出的确切权重不可用，则使用以下启发式方法   用于确定实际渲染的重量：

     

  

• 如果给出的重量大于500，则使用最接近的可用较重的重量（如果没有，则使用最接近的重量）   重量较轻）。

  

• 如果重量小于400，则使用最接近的较轻重量（或者，如果没有，则使用最接近的较重的重量）   重量计）。

  

• 如果给出恰好400的权重，则使用500。如果500不可用，那么小于400的字体权重的启发式是   使用

  

• 如果给出恰好500的权重，则使用400。如果400不可用，那么小于400的字体权重的启发式是   使用

  

Source

合成

这解释了浏览器如何映射权重，但它从哪里获得实际的粗体版本？

有一个名为font-synthesis的CSS属性，可以控制浏览器如何/何时合成缺少的字体（重量，样式）方面。

  

font-synthesis CSS属性控制哪些缺少的字体，粗体   或斜体，可由浏览器合成。

此属性并未在许多浏览器中实现，但它的存在表明浏览器在缺少时合成粗体版本（并且有一天这个属性会让我们控制它）。

Source

合成源

将上述两个概念放在一起，似乎Chrome将使用300的权重作为合成的基础，但如果您导入400版本，它将使用400作为基础并产生稍微更厚的结果。

仅进口300重量：

导入300和400个重量：

导入300,400和800个重量：