@font-face疑问：为何<h1>标签选用sansation_bold.woff而非sansation_light.woff？

这是因为浏览器会根据元素的默认字体权重，自动匹配对应font-weight属性的@font-face规则，和你定义@font-face的顺序完全无关，具体原因拆解如下：

• HTML元素的默认样式：<h1>标签在浏览器的默认样式中，font-weight属性值为bold（对应数值700）；而<div>标签的默认font-weight是normal（对应数值400）。你通过全局选择器*给所有元素设置了font-family: myFirstFont，所以浏览器会为每个元素匹配对应权重的字体文件。
• @font-face的匹配逻辑：你给同一个字体族myFirstFont定义了两条规则，分别绑定了font-weight: normal和font-weight: bold的字体文件。浏览器的字体匹配机制是按权重值精准匹配，而不是按@font-face的定义顺序选择。所以<h1>的bold权重会自动对应到sansation_bold.woff，<div>的normal权重对应sansation_light.woff。

你可以通过修改元素的font-weight验证这个逻辑，比如给<h1>手动设置常规权重：

h1 {
  font-weight: normal;
}

此时<h1>就会加载sansation_light.woff，显示常规样式。

内容的提问来源于stack exchange，提问作者Neha Agarwal