font-weight设600却无变化，主因是字体文件不支持该字重，如pingfang sc、微软雅黑仅含400和700两档，浏览器自动降级或升级；需用devtools查computed值及实际渲染字体，并确保@font-face中font-weight与文件严格匹配。
font-weight设了600但看起来和400一样
这不是 CSS 失效，而是字体文件压根没提供 600 这个字重。比如系统自带的 PingFang SC、Microsoft YaHei 多数只含 400（normal）和 700（bold）两档，你写 font-weight: 600，浏览器只能 fallback 到 400 或 700，视觉上毫无变化。
用 DevTools 打开「Computed」面板，点开 font-weight 右侧箭头，看最终解析值是 400 还是 700；再点开旁边的字体名，确认当前渲染的是哪个物理字体文件。
- 如果显示
400，说明字体不支持 600，直接被降级了 - 如果显示
700但你没写，可能是父元素或框架样式悄悄设了font-weight: bold并继承下来 - Google Fonts 要支持 600，必须显式加参数：
https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700
@font-face声明了font-weight但还是不生效
自定义字体最容易栽在这里：声明的 font-weight 值和实际字体文件的字重不匹配。比如你用 myfont-medium.woff2 文件，却在 @font-face 里写 font-weight: 700，那这个文件永远无法响应 font-weight: 500 或 600。
正确做法是——每个字重文件单独声明，且 font-weight 必须严格对应：
@font-face {
font-family: 'MyFont';
src: url('myfont-regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'MyFont';
src: url('myfont-semibold.woff2') format('woff2');
font-weight: 600;
}
@font-face {
font-family: 'MyFont';
src: url('myfont-bold.woff2') format('woff2');
font-weight: 700;
}
- 别共用一个
font-family名 + 多个font-weight声明，浏览器不认 - 文件名里的 “Medium”“Semibold” 只是提示，真正起作用的是
@font-face中的font-weight值 - 用
document.fonts.check('600 16px MyFont')可在 JS 中验证该字重是否加载完成并可用
hover或动态状态里font-weight不变化
写了 .btn:hover { font-weight: 700; } 却没反应，大概率是优先级被压，或者字体本身不支持 hover 需要的那个字重。
打开 DevTools 的「Styles」面板，检查该规则是否被划掉（strikethrough）；如果是，点开右侧显示的覆盖来源，看是哪个选择器赢了。
- 常见干扰源：
body { font-weight: 400 !important; }、UI 框架的高特异性类（如.el-button--primary） - 提升权重更稳妥：
.btn:hover→button.btn:hover或.btn:hover, .btn:focus - 避免用
bolder：它依赖父元素继承值，嵌套深了会失控，比如父是600，子bolder可能找不出更粗档位，结果还是600
Mac 和 Windows 下 font-weight 看起来粗细不同
这不是 bug，是 Core Text（macOS）和 DirectWrite（Windows）对“加粗”的实现逻辑根本不同：前者主动增厚笔画，后者优先保清晰。同一段 font-weight: 700，在 Mac 上看着更实，在 Windows 上偏细，纯属系统渲染差异。
能做的有限，但关键动作要到位：
- 禁用合成粗体：
font-synthesis: weight;或font-synthesis: none;，防止浏览器强行 fake bold 导致模糊 - 换用多字重 Web Font：比如
Inter、HarmonyOS Sans，它们明确提供 300–900 全档，并在@font-face中一一声明 - 避免依赖系统字体做精细字重控制，尤其在跨平台 H5 场景下——本地开发看着正常，上线后用户设备字体不同，效果就飘了
900 还在怀疑 CSS 写错，其实浏览器早把值 quietly fallback 到 700 了，连警告都不给。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
