CSS 中 font-weight 失效的完整排查与解决方案-html教程-PHP中文网

CSS 中 font-weight 失效的完整排查与解决方案

font-weight 设置后字体粗细无变化，通常并非代码书写错误，而是受字体字重支持度、数值合法性、加载时机及样式优先级等多重因素影响。本文系统解析常见原因并提供可落地的修复方案。

`font-weight` 设置后字体粗细无变化，通常并非代码书写错误，而是受字体字重支持度、数值合法性、加载时机及样式优先级等多重因素影响。本文系统解析常见原因并提供可落地的修复方案。

在 CSS 中，font-weight 是控制文本粗细的核心属性，但其实际渲染效果远非“设了就生效”那么简单。你遇到的 .p1 { font-weight: thin; } 无效问题，正是典型误区——thin 并非标准关键字，CSS 规范（CSS Fonts Module Level 4）仅接受以下合法值：

数字字重：100、200、300、400、500、600、700、800、900（必须为 100 的整数倍，10、50、thin 均非法）；
关键字：normal（≡ 400）、bold（≡ 700）、lighter、bolder；
❌ thin、ultra-light、medium 等描述性词不被原生支持（除非通过 @font-face 显式声明 font-weight: 100 并配以对应字体文件）。

✅ 正确写法示例

.p1 {
  font-weight: 100;    /* 合法：最细字重 */
  /* font-weight: normal;  /* ≡ 400，常规 */
  /* font-weight: 700;     /* ≡ bold，推荐用于加粗 */
}

⚠️ 更深层原因：字体本身不提供该字重

即使语法正确，若当前字体（如系统默认的 Segoe UI、PingFang SC 或 Microsoft YaHei）未内置 100 或 500 字重变体，浏览器会自动 fallback 到最接近的可用字重。例如：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

微软雅黑（Microsoft YaHei）仅含 400（normal）和 700（bold）两种字重 → 所有 100–500 被降级为 400，600–900 被升级为 700；
苹果 San Francisco 在 macOS/iOS 中支持 300–800，但 Safari 对 100 的兼容性仍不稳定（部分版本解析为 normal）。

可通过浏览器开发者工具（DevTools）→ Computed 面板验证实际生效值：
? 查看 font-weight 计算结果（如显示 400）→ 点击右侧字体名 → 检查是否标注 “wght=400 only” —— 若是，则说明字体缺失目标字重。

?️ 可靠解决方案

1. 使用支持多字重的网络字体（推荐）

通过 Google Fonts 或自托管字体，显式请求所需字重：

<!-- 加载 Inter 字体的 400/500/700 字重 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700" rel="stylesheet">

p { font-family: 'Inter', sans-serif; }
.p1 { font-weight: 500; } /* ✅ 此时 500 可真实生效 */

2. 自定义字体：用 @font-face 精确声明每种字重

@font-face {
  font-family: 'MyFont';
  src: url('myfont-light.woff2') format('woff2');
  font-weight: 300; /* 必须与文件字重严格匹配 */
  font-style: normal;
}
@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold.woff2') format('woff2');
  font-weight: 700;
}
body { font-family: 'MyFont', sans-serif; }
.p1 { font-weight: 300; } /* ✅ 生效 */

3. 兜底策略：避免依赖中间字重

设计稿中慎用 500/600：优先采用 400（常规）与 700（加粗）两级体系；
移动端尤其注意：Android WebView 对非标准字重兼容性差，建议统一使用 bold / normal 关键字；
排查样式覆盖：检查是否被 / 默认样式、第三方 UI 库或 !important 规则干扰，可临时添加 font-weight: 700 !important; 测试。