我正在导入 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吗？
【问题讨论】：
标签： css fonts webfonts google-fonts
font-weight 使用基于以下算法的后备权重：
如果给出的确切权重不可用，则以下启发式 用于确定实际渲染的权重：
如果给出的重量大于 500，则使用最接近的可用较重重量（或者，如果没有，则使用最接近的可用 重量更轻）。
如果给出的重量小于 400，则使用最接近的可用较轻重量（或者，如果没有，则使用最接近的可用较重重量
重量）。如果给出的权重正好为 400，则使用 500。如果 500 不可用，则字体粗细小于 400 的启发式为 用过。
如果给出的权重正好为 500，则使用 400。如果 400 不可用，则字体粗细小于 400 的启发式方法是 用过。
这解释了浏览器如何映射权重，但它从哪里获得实际的粗体版本？
有一个名为 font-synthesis 的 CSS 属性可以控制浏览器如何/何时合成缺失的字体（粗细、样式）的各个方面。
font-synthesis CSS 属性控制哪些缺少字体，粗体 或斜体，可由浏览器合成。
这个属性在很多浏览器中都没有实现，但是它的存在表明浏览器在它缺失时正在合成粗体版本（并且有一天这个属性会让我们控制它）。
把上面的两个概念放在一起，看来Chrome会以300的权重作为合成的基础，但是如果你导入400的版本，它会以400作为基础，产生的结果会稍微粗一点。
p>【讨论】：