导入Inter多字重字体后font-weight仅在normal与bold间切换的问题

以下是针对性的排查和解决步骤：

• 确认font-family声明的正确性
  确保CSS中指定字体族时严格使用'Inter', sans-serif;，引号和字体名称拼写不能出错——如果拼写错误，浏览器会自动回退到系统默认字体，而多数系统字体只有normal和bold两种字重。示例代码：

  body {
    font-family: 'Inter', sans-serif;
  }
  

• 检查已加载字体的实际可用字重
  在Chrome DevTools的「Application」标签下打开「Fonts」面板，查看已加载的Inter字体条目，确认300、500、600等字重是否都存在。也可以直接访问你导入的Google Fonts URL，查看返回的CSS中是否包含所有指定字重的@font-face规则，比如是否存在font-weight: 500;的配置。

• 排查CSS优先级覆盖问题
  即使移除了全局styles.scss中的font-weight引用，局部组件样式或第三方CSS可能仍有高优先级规则强制设置font-weight: normal或bold。在DevTools的「Styles」面板中查看元素的font-weight计算值，检查是否被其他规则覆盖。可以临时用!important测试：

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

  如果生效，说明存在优先级更高的覆盖规则，需要找到并调整对应样式的优先级。

• 换用标签替代@import导入
  将@import替换为标签放在HTML的最顶部（早于所有本地CSS文件的加载），避免@import的加载顺序可能导致的字体解析问题：

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap">
  

• 重置浏览器字体渲染设置
  部分浏览器的自定义字体设置可能会将非标准字重映射到normal或bold。可以重置浏览器到默认设置，或者在Chrome的「设置-外观-自定义字体」中检查是否有异常映射。

• 清除浏览器缓存
  浏览器可能缓存了旧的、仅包含normal/bold的Inter字体文件，即使Network显示新请求成功，实际仍在使用缓存文件。可以在Chrome DevTools的「Network」面板勾选「Disable cache」后刷新页面，或者手动清除浏览器缓存后重新加载。

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