使用数值（如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("woff2");
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 和参数是否严丝合缝。
