Edge与Chrome浏览器在font-weight属性表现差异的标准合规性咨询

嗨，我来帮你捋捋这个问题哈~

首先得先说说CSS规范里关于@font-face和font-weight的规则：当你自定义字体的时候，一定要在@font-face里明确声明这个字体对应的font-weight值，这样浏览器才知道该用这个字体匹配哪个权重的文字样式。

你现在的代码里，@font-face只定义了字体文件，没写font-weight，这就给浏览器留了“自主发挥”的空间：

• Chrome这边的处理是，发现你指定的font-weight:bold（对应数值700）没有匹配的字体文件，就直接用你提供的那个本身已经是粗体的字体，不会额外再做加粗处理；
• 而Edge这次更新后，应该是严格遵循了CSS规范的要求——当找不到对应权重的字体时，浏览器可以对现有字体进行合成加粗，也就是在原有粗体的基础上再叠加一层粗体效果，所以看起来就更粗了。

那到底哪个浏览器是“正确”的？其实从规范层面来说，Edge的行为更贴合标准定义，但Chrome的做法属于一种实用化的兼容优化，避免合成加粗导致字体边缘模糊、变形。不过核心问题还是出在你的@font-face声明不完整上。

给你个修正后的代码示例，这样两个浏览器的表现就会一致了：

@font-face { 
  font-family: 'caros_eb'; 
  src: url('https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7V15vFP-KUEg.woff2');
  font-weight: 800; /* 因为你的字体是extra bold，对应数值800，可根据实际字体粗细调整 */
} 

.title_normal { 
  font-family:caros_eb; 
  font-size:18px; 
  font-weight:800; /* 直接调用字体对应的权重 */
} 

.title_bold { 
  font-family:caros_eb; 
  font-size:18px; 
  font-weight:800; /* 无需再设bold，因为字体本身已是粗体；若要更粗但无对应字体，可接受合成但不推荐 */
} 

简单来说，只要你把@font-face里的font-weight和实际字体的粗细对应上，再给元素设置匹配的权重值，就能消除两个浏览器的差异啦。

内容来源于stack exchange