使用Gatsby+styled-components调用Google Fonts字重不匹配如何解决

你遇到的字重不符合预期的核心原因是引入Google字体时没有指定加载900权重的字体文件：gatsby-plugin-google-fonts默认仅加载Montserrat的400常规字重，代码中设置的font-weight: 900没有对应字体文件支撑，浏览器只能自动降级到最近的已加载字重，因此和设计稿效果差异大。

可按以下步骤修复：

• 修改gatsby-config.js中的插件配置，明确声明你需要用到的所有字重，示例配置如下：

plugins: [
  {
    resolve: `gatsby-plugin-google-fonts`,
    options: {
      fonts: [
        // 按需添加所有实际用到的字重，必须包含代码中使用的900
        `Montserrat:400,700,900`,
      ],
      // 可选：指定字符集，避免特殊字符缺字
      subsets: ['latin', 'latin-ext'],
      // 可选：配置字体加载策略，避免页面加载时文字不可见
      display: 'swap'
    }
  }
],

• 配置修改完成后重启Gatsby开发服务，gatsby-config.js的变更需要重启服务才能生效，同时清理浏览器缓存避免旧字体文件干扰。
• 建议补充字体兜底栈，修改styled组件的font-family配置为font-family: 'Montserrat', sans-serif;，避免字体加载失败时显示系统默认衬线字体。
• 如果调整后仍有异常，可打开浏览器开发者工具，选中对应文字元素查看「计算样式」面板，确认font-weight属性是否被其他更高优先级的全局样式覆盖。

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