应删除 antialiased 类，因其在 macos 上禁用子像素抗锯齿导致中文字体发虚；正确做法是使用 subpixel-antialiased（即 auto）恢复系统默认渲染，并排查 font-display、缩放及 font-weight 匹配问题。
别加 antialiased 类——它不会让字体更清晰，反而在 macOS 上让中文字体发虚。
为什么 antialiased 在 macOS 上会让字体变糊
这个类实际注入的是 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale。前者会强制禁用 macOS 的子像素抗锯齿（subpixel rendering），剥夺 RGB 微调能力，导致中文字体边缘灰、笔画毛、对比度下降。而系统默认的 subpixel-antialiased（即 auto）才是 Retina 屏和 100% 缩放下最清晰的渲染模式。
- iOS Safari 完全忽略
-webkit-font-smoothing，写了等于白写 - Windows/Linux 不支持该属性，
antialiased对它们无任何影响 - 英文小写字母可能略“柔和”，但中文整体可读性明显下降
- Tailwind 默认不加这个类，加了反而是对系统默认策略的干扰
真正该用的类是 subpixel-antialiased
它设为 -webkit-font-smoothing: auto，等效于不干预系统行为，在 macOS 上恢复子像素渲染，在非 Retina 屏或缩放非 100% 时也更稳。
- 全局启用：直接在
html标签上加class="subpixel-antialiased" - 响应式写法如
md:subpixel-antialiased没必要——subpixel 就是默认值，加了反而多一层覆盖 - 如果已在
tailwind.config.js或全局 CSS 中手动加了antialiased，优先删掉
字体模糊的真凶往往不是抗锯齿开关
90% 的“字体糊”问题跟 antialiased 无关，而是由以下原因触发：
-
font-display: swap导致首屏用系统字体回退，自定义字体加载后重绘，视觉上像“先清后糊” - 页面被缩放（如 macOS 系统设为“更大文本”，或浏览器缩放非 100%），触发非整像素渲染
-
font-weight值（如500）与实际加载的字体文件字重不匹配，浏览器被迫合成加粗，边缘糊化 -
text-rendering: optimizeLegibility却没配连字支持，反而干扰排版精度
字体清晰的关键不在“加什么平滑类”，而在让正确字体以正确方式准时出现——删掉 antialiased，再检查 font-display 和 font-weight 匹配，通常比调任何 -webkit 属性都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
