font-weight 和 font-style 同时设置只生效一个，主因是字体族缺失对应字重+样式的变体文件；需检查实际加载的字体文件、显式声明 @font-face 组合、避免 oblique 模拟及继承干扰。
font-weight 和 font-style 同时设置却只生效一个？优先检查字体族是否支持
很多情况下不是 CSS 写错了，而是当前 font-family 没有提供对应粗体+斜体的字重变体（如 Regular Italic、Bold Italic）。浏览器无法“合成”斜体+加粗，只能从已加载的字体文件中匹配。若字体本身缺失 700 italic 这一档，font-weight: bold; font-style: italic; 就可能退化为仅斜体或仅加粗。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的 Computed 面板查看最终生效的
font-family实际值（注意是否 fallback 到了系统字体） - 在
@font-face中显式声明所有需要的字重/样式组合，例如同时引入font-weight: 400、700、400 italic、700 italic - 避免依赖
font-style: oblique来“模拟”斜体——它不解决加粗失效问题，且视觉质量差
font-weight 数值写法与命名写法混用导致意外覆盖
bold 等价于 700，但如果你在同一个选择器里先后写了 font-weight: bold; 和 font-weight: 600;，后者会覆盖前者。更隐蔽的是：某些 CSS 框架或重置样式表（如 Normalize.css）会把 em、strong 等元素默认设为 font-weight: bolder;，而 bolder 是相对计算值，容易和你写的 700 冲突。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一使用数值写法（
400、600、700），避免bold/bolder/lighter的相对性干扰 - 检查是否有继承来的
font-weight值（比如父元素设了font-weight: 300;，子元素只写font-style: italic;，那加粗就彻底丢失） - 用
font: 700 italic 16px/1.4 "Inter", sans-serif;一次性声明，减少层叠冲突
font-style: italic 在 webfont 中被忽略？确认字体文件是否含 italic 字形
即使你写了 font-style: italic;，如果加载的 @font-face 只定义了 normal 样式（font-style: normal;），浏览器不会自动倾斜字形，也不会报错——它只是静默回退到 normal。尤其常见于只引入了 .woff2 正体文件，却期望斜体自动生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开字体文件（如用 Google Webfonts Helper），确认是否提供了
italic变体下载链接 - 在
@font-face中为斜体单独声明一个规则，font-style必须明确写成italic，不能省略 - 不要依赖
font-style: oblique应对缺失的 italic 文件——它只是几何倾斜，可读性差，且不触发字体加载逻辑
@font-face {
font-family: 'Inter';
font-weight: 700;
font-style: normal;
src: url('inter-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-weight: 700;
font-style: italic;
src: url('inter-bold-italic.woff2') format('woff2');
}
伪元素或 SVG 文本中 font-style / font-weight 失效的特殊场景
在 ::before/::after 伪元素里设置 font-style: italic;，如果内容是纯字符（如 content: "→";），部分字体对箭头类符号无斜体设计，看起来像没生效；SVG 中的 font-family，会走系统默认字体，而系统字体（如 macOS 的 San Francisco）对 font-weight: 600 和 700 可能无区分。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 伪元素中用
content插入文字时，确保该文字在目标字体中有对应 italic/glyph 支持（可先用普通元素测试） - SVG 文本务必写全
font-family、font-weight、font-style，且优先用数值font-weight="700"而非字符串"bold" - 对 SVG，考虑直接用
transform="skewX(-12deg)"手动倾斜——这是唯一可控的“斜体”方式，但仅限装饰性文本
woff2，看看实际加载了几个字体文件——少于 4 个（regular/italic/bold/bold-italic），基本就是根源所在。 
