字体模糊需排查font-weight伪加粗、抗锯齿设置（如-webkit-font-smoothing）、字体格式与加载时机；优先使用字体原生支持的字重，启用font-display: swap并避免权重映射错误。
字体模糊通常不是单一原因导致的，关键要同时排查 font-weight 是否被浏览器“强行加粗”以及系统/浏览器的抗锯齿（font-smoothing）设置是否被意外关闭或弱化。
检查 font-weight 是否触发了伪加粗
某些字体本身不包含你指定的字重（比如写了 font-weight: 600，但该字体只提供了 400 和 700 两个字重），浏览器会自动对 400 进行算法加粗——这种“伪粗体”极易导致边缘发虚、文字变胖、细节糊掉。
- 用浏览器开发者工具（Elements → Computed）查看实际生效的 font-weight 值，对比你写的值和“Computed”栏是否一致
- 优先使用字体明确支持的字重，例如 Roboto 可用 300/400/500/700；思源黑体支持 300/400/700/900
- 避免在 Web Font 中混用相近字重（如同时加载 400 和 500），易引发渲染冲突
统一启用现代抗锯齿渲染
css 中的 -webkit-font-smoothing 和 font-smoothing 能显著改善 macOS/ios 下的字体清晰度；windows 则依赖 ClearType，但可通过 text-rendering 辅助优化。
- 全局增强（推荐放在
body或:root）：
body {<br> -webkit-font-smoothing: antialiased;<br> -moz-osx-font-smoothing: grayscale;<br> text-rendering: optimizeLegibility;<br>} -
antialiased强制亚像素抗锯齿，适合中英文混合；grayscale在 macos 上更锐利，减少彩色边纹 - 慎用
subpixel-antialiased（默认值），在高分屏或缩放场景下反而容易模糊
留意字体格式与加载时机的影响
WOFF2 字体压缩率高，但部分旧版浏览器或系统解析时可能降级渲染；FOIT（Flash of Invisible Text）期间浏览器可能用系统字体临时替代，而系统字体的 hinting 和抗锯齿策略不同，也会造成“忽清忽糊”感。
立即学习“前端免费学习笔记（深入）”；
- 确保使用 WOFF2 + WOFF 双格式回退，并通过
@font-face显式声明font-display: swap - 避免在
@font-face中为同一字体族设置多个font-weight却只加载一个文件，易导致权重映射错误 - 在字体加载完成前，可用
font-display: optional或配合 js 检测document.fonts.load控制样式切换节奏