网页字体发虚有两种完全不同的成因：一种是抗锯齿策略让字形显粗显软，可用 CSS 属性调节；另一种是元素被放到半像素位置或被缩放，任何字体属性都救不了。多数人只调前者，所以问题反复出现。本文依据 MDN 两个属性页原文整理。

一、font-smoothing：官方四个取值的真实含义

MDN 的 -webkit-font-smoothing 页（实测 200）标注为 Non-standard，并明确写道："We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed." 四个值是：

• auto：让浏览器决定，"Uses subpixel anti-aliasing when available; this is the default"。
• none：关闭平滑，"display text with jagged sharp edges"。
• antialiased：按像素级而非亚像素级平滑。官方一句极重要："Switching from subpixel rendering to anti-aliasing for light text on dark backgrounds makes it look lighter."
• subpixel-antialiased："On most non-retina displays, this will give the sharpest text."

Firefox 用另一个属性 -moz-osx-font-smoothing，MDN 提示它"implements a similar property, but with different values"，取值 auto（通常等价 grayscale）与 grayscale，且只在 macOS 生效。

由此得到一条常被反着用的经验：深色背景上的浅色文字，加 antialiased 能变细，代价是失去亚像素清晰度；而在非视网膜屏上追求最锐利，官方答案是 subpixel-antialiased。两者目标冲突，一句 CSS 无法同时满足。

二、text-rendering：出身于 SVG，不是 CSS 标准

MDN 的 text-rendering 页（实测 200）说明它 "provides information to the rendering engine about what to optimize for when rendering text"，浏览器需在 speed、legibility、geometric precision 三者间取舍。官方 Note 是一段少人知道的冷事实："The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux."

语法给出三个取值：optimizeSpeed、optimizeLegibility、geometricPrecision。最值得注意的是官方对 optimizeLegibility 的告诫："One very visible effect is optimizeLegibility, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, Microsoft's Calibri, Candara, Constantia, and Corbel, or the DejaVu font family)." 它开启的是连字与字距调整并带来排版开销，官方页面另有 "optimizeSpeed vs. optimizeLegibility" 一节专门讨论取舍。

三、第二类原因：缩放

文字按整数倍尺寸栅格化。元素一旦 transform: scale() 放大（例如含正文的悬停放大卡片），字形被位图拉伸必然发糊；scale 不触发重排，正因复用的是已栅格化的层，字才会糊。解决只能靠不在含正文的元素上做 scale，或改用改变实际字号的方案。

动画同理：will-change: transform 会把元素提升为独立合成层，层内文字按初始尺寸光栅化后交给 GPU 变换，缩放过程中发虚、结束后恢复清晰属正常现象。

四、半像素定位，最隐蔽的一种

亚像素抗锯齿假设字形对齐像素栅格。元素落在 x.5 位置时边缘横跨两个像素，看起来就是灰边糊字。常见来源：translateY(-50%) 居中而容器高度为奇数；line-height 用小数倍（如 1.45）在部分字号下算出半像素；百分比栅格换算出小数宽度；filter、backdrop-filter、opacity 与阴影叠加使边缘更软。定位方法是用 getBoundingClientRect() 打印坐标看是否带小数，修正靠取整或改用整数间距。

五、移动端与图片化文字

缺少响应式视口声明时，移动浏览器会先按约 980px 排版再整体缩放，等效把位图放大，文字必糊，与字体属性无关。用图片承载正文也是常见来源。

六、常见问题 FAQ

问：全站加 antialiased 有风险吗？
答：有，非标准且只影响 WebKit/Blink；深色底文字会变细变淡，长文正文建议保留默认策略。

问：optimizeLegibility 能全站打开吗？
答：不建议，它有排版开销，宜只对标题等少量文字使用。

问：只有个别字重发糊？
答：多与该字重的 hinting 数据有关；若同字号所有字都糊，更可能是渲染或定位问题。

七、总结

处理网页字体模糊的顺序是：①先分清"字形发软"还是"位置带小数"，用 getBoundingClientRect 看坐标并检查 scale/will-change；②缩放类只能靠避免缩放解决，字体属性无效；③深色底浅字可用 antialiased 但失去亚像素锐度，非视网膜屏要最锐利应用 subpixel-antialiased；④text-rendering 出身 SVG 且不在 CSS 标准内，optimizeLegibility 会为小于 20px 的文字开启连字并有性能开销，不宜全局；⑤补视口声明，不要用图片代替正文。先判成因再动手，比盲目加 CSS 有效得多。

• MDN
• css
• 字体
• 渲染