font-weight 和 font-style 混用无效的根本原因是字体文件未提供对应字重和样式的实际字形；需确认字体支持、正确加载变体并避免依赖系统字体或相对关键字。
font-weight 数值和关键字混用时为什么没效果
浏览器对 font-weight 的解析依赖于字体家族是否实际提供了对应字重的字形文件。不是所有字体都支持从 100 到 900 的完整阶梯，很多中文字体只内置了 normal（即 400）和 bold（即 700）两档。
常见错误现象：font-weight: 600; 写了但看起来和 400 没区别；或用了 font-weight: bolder; 却意外变细。
- 优先用数字值（
400、600、700），避免lighter/bolder这类相对关键字，它们依赖父元素权重，行为不可控 - 检查所用字体是否真有该字重：用浏览器开发者工具选中元素，在 Fonts 面板看 “Actual font” 后面是否标注了 weight（比如 “PingFang SC Bold”）
- Web 字体（如 Google Fonts）需显式引入对应字重，例如加载
https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700，漏掉wght@600就无法渲染600
font-style 值为 italic 但文字没变斜怎么办
font-style: italic; 不等于“强制倾斜”，它只是向浏览器发出请求：请使用该字体的斜体字形（italic glyph）。如果字体本身没提供 italic 变体，浏览器可能 fallback 到 oblique（算法倾斜），也可能直接忽略。
常见错误现象：中文字体设了 italic 毫无变化；英文 font-family: "Helvetica"; 加 italic 却还是直立。
- 确认字体文件是否含 italic 版本：查字体官网或 CSS 引入链接，比如
font-family: "Source Sans Pro";要配font-weight: 400; font-style: italic;，就得确保加载了ital,wght@1,400这一档 - 避免依赖系统字体做 italic 渲染，尤其是中文——绝大多数系统中文字体（如 “Microsoft YaHei”、“PingFang SC”）根本没有真正意义上的 italic 设计
- 不得已要视觉倾斜时，用
transform: skewX(-8deg);，但注意这会破坏可访问性（屏幕阅读器仍读作正常文本），且影响行高和换行
font-weight 和 font-style 同时设置时的继承与层叠顺序
这两个属性独立生效，但最终渲染效果取决于字体文件能否同时满足二者要求。比如请求 font-weight: 600; + font-style: italic;，就需要字体家族中存在 “600 italic” 这一具体变体。
使用场景：按钮文字加粗+斜体强调；代码注释用细字重+斜体区分；多语言站点中英文部分需保持字重一致性。
- 不要假设
font-weight: bold;+font-style: italic;总能组合成功——bold 是700的别名，而很多字体只有700 normal，没有700 italic - 在
@font-face中声明多个font-weight和font-style组合时，必须保证src指向的是真实存在的不同文件，不能靠一个文件撑起全部组合 - 用
font: 600 italic 16px/1.4 "Inter", sans-serif;一次性声明更安全，但要注意 shorthand 会重置未指定的子属性（如font-variant）
兼容性陷阱：iOS Safari 对 font-weight 的宽松处理
iOS Safari（尤其旧版本）会对未提供的字重做“就近映射”：请求 500 可能被自动 fallback 到 400 或 600，且不报错、不可调试。这种行为在 macOS Safari 上也存在，但程度较轻。
性能影响：字体加载失败时，浏览器可能触发 FOIT（Flash of Invisible Text）或 FOUT（Flash of Unstyled Text），而字重缺失常加剧这一问题。
- 上线前务必在真机 iOS Safari 中验证关键文字的字重表现，模拟器不可靠
- 对核心文案（如标题、价格），建议限制在
400/500/600/700四档内，并确保 Web 字体服务明确提供了这些档位 - 避免用
font-weight: 900;标记重要信息——多数免费字体根本不包含 black 字重，用户看到的大概率是加粗过的700
最常被忽略的一点：font-weight 和 font-style 的生效，完全取决于字体文件本身的能力边界，而不是 CSS 规则写得有多全。查字体、验加载、看实际渲染，比背数值表重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
