font-weight 设为600未变粗，是因为字体文件未提供该字重轮廓数据，浏览器只能模拟或降级；需用@font-face引入含600字重的web字体并验证加载。
font-weight 为什么设了 600 却没变粗？
浏览器对 font-weight 的支持依赖字体文件本身是否包含对应字重（weight）的轮廓数据。很多系统默认字体（比如 macOS 的 San Francisco、Windows 的 Segoe UI）只提供 normal（400）和 bold（700）两个实际可用档位，中间值如 500、600 会被浏览器“模拟加粗”或直接降级为 400。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@font-face引入完整字重的 Web 字体（如 Google Fonts 提供的Inter:wght@400;600;700），并显式声明font-weight: 600 - 检查开发者工具中“Computed”面板里的
font-weight实际计算值，以及“Fonts”标签页是否加载了目标字重 - 避免在不支持的字体上依赖
font-weight: 600做视觉区分——改用font-weight: bold或搭配text-shadow微调
font-style: italic 和斜体字体文件不是一回事
CSS 的 font-style: italic 默认触发的是浏览器的算法倾斜（synthetic oblique），即把正体字形强行向右倾倒，边缘锯齿明显、字宽拉伸、可读性下降。真·斜体（italic）是设计师专门绘制的独立字形，有不同笔画角度、连字逻辑和字间距。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
@font-face中为斜体单独声明font-style: italic并指向真正的*-italic.woff2文件，而非复用正体路径 - 用
font-synthesis: none禁用浏览器自动合成，强制缺失时回退到正体（比丑斜体更可控） - 英文场景下，
font-style: oblique可设角度（如oblique 12deg），但仅当字体无真实 italic 时才生效；中文基本无效
font-weight 和 font-style 组合失效的常见原因
当同时设置 font-weight: 600 和 font-style: italic，却只看到正体或只看到加粗，大概率是字体族未提供该“字重 × 样式”的组合档位。浏览器不会自动拼凑——它只会找完全匹配的 @font-face 规则，找不到就按规则降级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个需要的组合（如 400/normal、600/normal、600/italic、700/italic）都写一条独立的
@font-face，明确指定src、font-weight、font-style - 用
font-display: swap避免 FOIT（闪白），但注意：若 italic 文件加载失败，浏览器不会 fallback 到 normal + synthetic italic，而是卡在等待状态 - 检查字体 CDN 的 URL 参数是否正确（例如 Adobe Fonts 要求
subset=latin&fvd=n6i7表示 normal/600 + italic/700）
内联样式、class、@layer 里 font-weight 冲突怎么排？
CSS 优先级不看语义，只看具体性（specificity）和声明顺序。style="font-weight: 700" 是内联样式，权重高于任何 class 或 @layer 中的规则，除非后者用 !important（不推荐）。而 @layer 本身不改变优先级，只定义层叠顺序——同层内仍按选择器权重和源码顺序决定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免在 HTML 标签上写
style="font-weight: ..."，统一收口到 class（如.text-emphasis）便于维护和覆盖 - 如果必须用
!important（比如第三方组件库锁死样式），只加在font-weight上，别污染整个 rule；且确保它出现在最终打包 CSS 的末尾 -
@layer base, components, utilities中，把字体基础规则放base层，实用类放utilities层，这样即使同权重，utilities也会覆盖base
真正麻烦的不是写对属性，而是字体文件本身有没有你想要的那个“字重+样式”组合——所有 CSS 设置都只是在调用，不是在生成。查不到对应文件，再准的 font-weight 和 font-style 也白搭。
