CSS 字体平滑与渲染：font-smooth 与 text-rendering

---

title: CSS 字体平滑与渲染：font-smooth 与 text-rendering

keywords:

• font-smooth
• text-rendering
• 抗锯齿
• 可读性
• 兼容策略

description: 探索字体平滑与渲染提示属性在不同浏览器的效果与兼容性，理解其非标准性并给出实践建议与替代方案。

categories:

• 文章资讯
• 编程技术

---

概述

font-smooth 与 text-rendering 影响字体抗锯齿与渲染策略，兼容性与标准化有限。应谨慎使用，并以可读性与对比度为优先。

用法/示例

/* 非标准属性，仅在部分浏览器有效 */
.text { text-rendering: optimizeLegibility }

工程建议

• 不依赖非标准属性进行外观优化；从字重、字距与对比度入手提升可读性。
• 在高 DPI 显示与不同平台进行实际验证，避免过度优化导致反效果。
• 保持品牌字体的加载与回退策略，减少 FOUT/FOIT 影响。

参考与验证

• MDN：text-rendering — https://developer.mozilla.org/docs/Web/CSS/text-rendering
• MDN：font-smooth — https://developer.mozilla.org/docs/Web/CSS/font-smooth