css 字体加粗和斜体同时设置不生效怎么办_font-weight 与 font-style 检查_技术教程

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)" 手动倾斜——这是唯一可控的“斜体”方式，但仅限装饰性文本