css字体粗细与斜体设置_font-weight与font-style应用

使用数值（如400、700）比normal/bold等关键词更可靠，因后者依赖字体是否真实提供对应字重；未匹配时浏览器会模拟加粗或倾斜，导致模糊或失真。

font-weight 数值设置比关键词更可靠

用 font-weight 控制粗细时，normal 和 bold 看似简单，但实际渲染依赖字体是否真正提供了对应字重。很多自定义字体只包含 400（常规）和 700（加粗）两个字重，此时写 font-weight: bold 会被浏览器映射为 700，但若字体没提供 700，就可能回退到模拟加粗（faked bold），边缘发虚、清晰度下降。

更稳妥的做法是直接使用数值：400、500、600、700 等，并确保 @font-face 中已声明对应 font-weight 值：

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("wof
f2");
  font-weight: 500; /* 明确声明该文件对应 500 */
  font-style: normal;
}

• 避免用 lighter / bolder，它们相对当前继承值计算，行为不可控
• 数值范围是 100–900，但只有 400/500/600/700 被广泛支持；100–300 多数字体不实现
• 检查字体实际支持的字重：用浏览器开发者工具的“Computed”面板看 font-weight 最终解析值

font-style: italic 不等于斜体视觉效果

font-style: italic 的本意是启用字体中内建的斜体字形（italic glyphs），而非单纯倾斜文字。如果字体文件没打包 italic 变体，浏览器会 fallback 到 oblique（倾斜），也就是对常规字形做几何变换——这会导致字形失真、字间距异常、可读性变差。

正确做法是显式加载独立的斜体字体文件，并配对声明：

@font-face {
  font-family: "MyFont";
  src: url("myfont-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic; /* 关键：这里必须是 italic */
}

• 不要依赖 font-style: oblique，它只是 CSS 属性，不是真实字体变体
• 同一字体族下，font-style: normal 和 font-style: italic 应指向不同物理文件
• 用 font-synthesis 可禁用浏览器自动合成（如 font-synthesis: none），避免意外 fallback

font-weight + font-style 组合需匹配 @font-face 声明

当同时设置 font-weight: 600 和 font-style: italic 时，浏览器会查找完全匹配的字体资源：即 font-family 相同、font-weight 为 600、font-style 为 italic 的 @font-face 规则。缺一不可。

• 常见错误：只声明了 font-weight: 600 的 normal 版本，却对某段文字设 font-weight: 600; font-style: italic → 浏览器降级为 400 italic 或 600 normal，结果出人意料
• 字体加载工具（如 Google Fonts）生成的链接常默认只含 400 和 700，需手动添加 &display=swap&family=xxx:wght@400;600;700;ital,wght@400;600;700 才能覆盖斜体+多字重
• 用 font-display: swap 配合 @font-face 可避免 FOIT，但前提是所有组合变体都已声明并加载

浏览器对 font-weight 的兼容性差异仍存在

旧版 Safari（≤15.4）和部分 Android WebView 对 font-weight 数值的支持不稳定，比如 500 可能被当作 400 渲染。这不是 bug，而是字体栈匹配逻辑差异所致。

• 测试时务必在真机或对应 WebView 环境验证，不能只信桌面 Chrome
• 若设计稿严格要求 500，建议提供完整字重集（包括 500 文件），并在 CSS 中明确写死数值，不依赖继承或相对关键字
• 用 font-weight: 500 !important 无法解决底层匹配失败问题，重点仍在字体资源本身是否可用

实际项目里，最常被忽略的是：字体文件本身是否真的包含你写的那个 font-weight 值和 font-style 变体。一切样式表现，最终都卡在那一行 @font-face 的 src 和参数是否严丝合缝。