-webkit-font-smoothing: antialiased 仅对 webkit 内核浏览器生效，非标准属性且 firefox/ie 不支持；需配合 -moz-osx-font-smoothing 和规避 transform 等干扰才能实现有限跨平台平滑。
-webkit-font-smoothing: antialiased 是目前最直接有效的全文字体平滑方案，但仅对 WebKit 内核浏览器（Chrome、Safari、Edge 新版）生效；Firefox 和旧版 IE 完全不识别该属性，不能当作跨浏览器统一解。
为什么只用 -webkit-font-smoothing 不够？
这个属性本质是告诉 WebKit 渲染引擎“用灰度抗锯齿替代子像素渲染”，能缓解 macOS 上字体发虚、Windows 上字体发粗的问题。但它不是 CSS 标准属性，font-smoothing（无前缀）从未被标准化，所有浏览器都不支持。常见误区是以为加了 text-rendering: optimizeLegibility 就能补足——其实它只影响字距微调（kerning）和连字（ligatures），对平滑度几乎无感。
如何在 index.html 中全局启用？
把这段 CSS 放进 的 <style></style> 块或外部样式表里即可生效：
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-
-moz-osx-font-smoothing: grayscale是 Firefox 在 macOS 上的等效替代，Windows/Linux 下无效，但加了也无害 - 必须作用于
body或根级容器，不能只写html—— 因为字体渲染由文本所在元素继承，html本身不渲染文字 - 避免套在
@supports里检测：WebKit 浏览器不支持@supports (-webkit-font-smoothing: antialiased)这种写法，会直接跳过
哪些场景会让平滑失效？
即使写了上述 CSS，以下情况仍会退回到默认渲染：
- 元素设置了
transform: translateZ(0)或任何触发硬件加速的 CSS（如will-change: transform），会强制关闭字体抗锯齿 -
font-weight设为100–300且系统无对应字重时，部分浏览器（尤其是 Chrome）会自动降级为非平滑渲染 - 使用了
canvas绘制文本，或 SVG 中的<text></text>元素——这些走的是图形渲染管线，不受 CSS 字体平滑控制
真正需要「全文字体平滑」的项目，往往卡在 macOS Safari 的毛边或 Windows Chrome 的糊字上；但别指望靠一个属性一劳永逸——它只是个渲染提示，最终效果还取决于系统字体、DPI 设置和 GPU 驱动。如果发现某段文字始终不平滑，先检查是否被 transform 干扰，再确认字体文件本身是否含 hinting 信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
