为何项目中设置Rubik字体却渲染为Rubik Light？如何解决？

核心问题 #

你当前的Google Fonts链接仅加载了Rubik字体的默认字重（通常为400），当设置其他字重（如500）时，浏览器找不到对应字重的字体文件，会自动降级到已加载的最轻字重（如Rubik Light）并模拟加粗，导致显示效果怪异。

解决步骤 #

1. 修改Google Fonts链接，指定所需字重 #

在字体链接中通过wght@参数明确声明需要的字重，比如需要400（常规）、500（中等）、700（粗体），链接应改为：

<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=Rubik:wght@400;500;700&display=swap" rel="stylesheet">

这样浏览器会加载你指定的所有字重，设置font-weight:500时就能正确匹配到Rubik Medium。

2. 确保CSS字体权重与加载的字重对应 #

设置font-weight时，必须使用你在链接中声明过的数值，比如：

body {
  font-family: 'Rubik', sans-serif;
  font-weight: 500; /* 对应链接中声明的wght@500 */
}

如果设置未声明的字重（比如600），浏览器仍会模拟加粗，导致效果异常。

3. 本地字体的正确配置（若需本地使用） #

如果下载字体本地使用，需为每个字重单独声明@font-face：

/* 声明常规字重（400） */
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* 声明中等字重（500） */
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

/* 其他字重按需添加 */
body {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
}

注意：确保字体文件路径正确，且文件名与下载的字体文件一致（比如Rubik-Medium对应500字重）。

4. 验证与排查 #

• 在Chrome开发者工具的「元素」→「字体」面板中，查看当前元素使用的字体，确认字重匹配已加载的字体文件。
• 清除浏览器缓存，或在开发者工具中勾选「禁用缓存」后重新加载页面，避免旧资源干扰。

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