自定义字体模糊源于加载时机、回退机制、gpu合成层干扰及系统渲染限制；font-display是唯一可控手段，需按场景选swap/optional/block；禁用触发合成层的transform等属性；确保viewport正确及系统缩放为整数倍。
不同浏览器对自定义字体（WOFF2/TTF）的渲染策略差异极大，模糊问题不是字体本身质量差，而是加载时机、回退机制、GPU合成层干扰和系统级渲染限制共同作用的结果。直接换字体或加 -webkit-font-smoothing 基本无效，尤其在 iOS 上该属性被 WebKit 完全忽略。
font-display 控制字体加载生命周期
模糊最常发生在字体尚未加载完成时，浏览器用系统字体临时回退，等自定义字体到位后又重绘——这个过程伴随字号微调、字宽变化，视觉上就是“闪一下+变糊”。font-display 是唯一能稳定干预这一阶段的 CSS 属性。
-
font-display: swap：首屏文字立即显示，但可能用细/窄的系统字体撑开布局，加载完成后跳变，小字号下模糊感明显 -
font-display: optional：iOS Safari 会跳过加载慢的字体，直接用系统字体，反而更稳；适合正文类非关键文本 -
font-display: block：阻塞文本渲染最多 3 秒，确保首屏只用目标字体，适合标题、Logo 等必须清晰的场景 - 避免
font-display: auto或不声明——这是默认值，行为不可控，各浏览器回退策略不一致
transform 触发的合成层让文字变位图
哪怕只是给文字容器加了 transform: translateZ(0) 或 will-change: transform，浏览器就会把它提升为独立 GPU 合成层。一旦进层，亚像素渲染失效，文字被当位图处理，任何缩放、平移、旋转都会触发双线性插值，边缘立刻发虚。
- Chrome DevTools 的
Layers面板里看到文字区域标红+多层叠加，就是糊的铁证 - 比
transform更隐蔽的是：opacity: 0.99、filter: brightness(1)、backface-visibility: hidden——只要声明就升层 - 修复方法不是“关掉硬件加速”，而是删掉这些属性，或改用
clip-path、mask等不触发合成的替代方案
viewport 和系统缩放破坏子像素对齐
网页字体模糊，很多时候跟 CSS 无关，而是物理像素和 CSS 像素没对齐。iOS Safari 允许双指缩放，用户手动放大过，或者 <meta name="viewport"> 写错，就会让 1px CSS 像素对应 1.5 个物理像素，ClearType 或 subpixel rendering 直接失效。
- 检查
<meta name="viewport" content="width=device-width, initial-scale=1.0">是否缺失或scale被篡改 - Windows 用户需确认系统缩放设为 100%、125%、150% 等整数倍，110% 或 133% 会导致整个浏览器窗口被 GPU 拉伸
- Chrome/Edge 地址栏右侧缩放数值不是 100%？按
Ctrl + 0重置；再进chrome://settings/content/zoom清掉该网站专属缩放记录
真正起作用的从来不是“怎么让字体更平滑”，而是让字体在正确的时间、以正确的尺寸、在正确的渲染层里出现。iOS 上别白费劲写 -webkit-font-smoothing，Android 上慎用 transform，Windows 下先校准系统缩放——这些点漏掉任何一个，其他优化都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
