标题字体权重异常：仅受导入列表最后权重影响的问题求助

问题根源 #

核心问题是Google Fonts未导入你需要的字体权重，浏览器无法渲染未加载的字体粗细，只能用已加载的权重近似模拟，导致设置的font-weight不生效；另外你导入的权重列表缺少700、800这类常用值，这也是指定这些权重时失效的原因。

具体修复步骤 #

1. 修正字体导入链接
   把当前的Google Fonts导入代码替换成包含全范围权重的版本，这样100-900的所有粗细都能正常使用：

   /* Import Libre Franklin font from Google Fonts (全权重范围) */
   @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@100;200;300;400;500;600;700;800;900&display=swap');
   

   如果你只需要特定几个权重，也可以明确列出（比如你用到的400、500，加上需要的700）：

   @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;700&display=swap');
   

2. 确保CSS权重值匹配已导入的权重
   确认.site-header的font-weight值是你导入过的权重（比如500、700等），同时补上你之前留空的背景色：

   .site-header {
       text-align: center;
       padding: 9px 0 0px;
       background-color: #ffffff; /* 补上白色背景值 */
       font-size: 15pt;
       font-weight: 500; /* 该值必须在导入的权重列表内 */
       color: #000;
   }
   

3. 排查样式冲突（可选）
   虽然你提到浏览器检查元素能看到设置值，但可以确认一下.site-header的font-weight属性有没有被其他CSS规则划掉——如果没有划掉，说明不存在样式覆盖问题。

为什么修改最后一个权重会生效？ #

这是因为浏览器找不到指定权重的字体时，会自动选择已加载的最接近的权重。当你修改导入列表的最后一个权重时，这个权重变成了浏览器能找到的最接近你设置值的选项，所以看起来生效了，但这不是正确的解决方式。

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