网站字体无法匹配参考站：Cormorant Garamond过粗且font-weight无效

可能原因 #

• 未加载目标字重的字体文件：Cormorant Garamond包含多个字重（300 Light、400 Regular等），若仅加载了粗体字重或未加载参考站使用的字重，浏览器会自动模拟加粗。
• CSS规则被覆盖：父元素的font-weight设置或其他高优先级CSS规则覆盖了你指定的字重。
• 浏览器自动合成粗体：当指定的字重不存在时，浏览器会自动对现有字体进行加粗处理。
• 跨系统渲染差异：不同操作系统（Windows/macOS）的字体渲染机制不同，可能导致视觉上的粗细偏差。

解决步骤 #

1. 确认参考站的字体字重 #

打开参考站的浏览器审查工具，查看目标元素的**计算样式（computed）**中的font-weight值，比如参考站可能使用的是300（Light）而非默认的400（Regular）。

2. 加载对应字重的字体文件 #

以Google Fonts为例，需明确指定要加载的字重（包含参考站使用的字重）：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&display=swap" rel="stylesheet">

若使用本地字体文件，需确保引入了对应字重的字体文件（如CormorantGaramond-Light.woff2）并在@font-face中正确声明：

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('CormorantGaramond-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

3. 明确指定字体与字重 #

在CSS中为目标元素设置正确的字体和字重，优先使用数值型字重（比light/regular兼容性更好）：

.target-element {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; /* 替换为参考站的字重值 */
}

4. 排查CSS规则覆盖 #

使用浏览器审查工具检查目标元素的font-weight是否被其他规则覆盖：

• 查看**样式（Styles）**面板中font-weight的划掉项，找到覆盖的规则。
• 调整选择器优先级（如使用更具体的选择器）或添加!important（仅在必要时使用）：

  .target-element {
    font-weight: 300 !important;
  }
  

5. 禁用浏览器自动合成粗体 #

添加font-synthesis属性，阻止浏览器自动模拟粗体：

.target-element {
  font-synthesis: none;
}

6. 优化字体渲染效果 #

针对不同浏览器添加渲染优化属性，减少跨系统的视觉差异：

.target-element {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

内容的提问来源于stack exchange，提问作者Toangarashi Woon