别加 antialiased，尤其在中文项目里——它强制关闭子像素抗锯齿，使中文字体降级为灰阶渲染，导致边缘发虚、笔画不均；真正清晰依赖系统默认的 subpixel-antialiased（即 auto），而字体准时加载、整数倍缩放、字重真实匹配才是清晰度根本。
别加 antialiased，尤其在中文项目里——它大概率让字体更糊，不是更清。
为什么 antialiased 在 macOS 中文环境里反而模糊
这个类强制关闭子像素抗锯齿，把中文字体渲染降级为灰阶模式。结果是笔画边缘发虚、横竖粗细不均、小字号下尤其明显。真正清晰的渲染依赖系统默认的 subpixel-antialiased（即 -webkit-font-smoothing: auto），它利用 LCD 屏幕 RGB 子像素做精细插值。
常见误判场景：
- 加了
antialiased后发现“变糊”，其实是字体加载完成前用了系统字体，加载后又重绘，视觉上像“先清后糊” - 浏览器缩放非 100%（比如 macOS “更大文本”设置），触发非整像素渲染，此时任何平滑类都救不了
- 声明了
font-weight: 500，但只加载了 400/700 字重文件，浏览器合成加粗，边缘必然糊化
如何安全启用 subpixel-antialiased 或禁用整个功能
如果你没手动加过 antialiased 或 subpixel-antialiased，建议直接关掉字体平滑功能——省体积、防误用、中文体验更稳。
在 tailwind.config.js 中写：
module.exports = {
corePlugins: {
fontSmoothing: false,
},
}
如果必须保留并支持 hover/focus 等交互态变体（v3.4+）：
- 改到
plugins配置下，不是variants.extend - 写法是
fontSmoothing: ['hover', 'focus']，不是字符串 - 改完必须重新运行构建命令（
npm run build或对应命令），否则新类名不会生成
真正影响字体清晰度的三个硬点
字体是否准时出现、缩放是否为整数倍、字重是否真实存在——这三件事比加不加某个平滑类重要得多。
-
font-display: swap是推荐的，但要配合字体文件真实可用；否则 fallback 到系统字体再切回来，就是“闪糊”根源 - 避免在 CSS 里写
html { font-size: 62.5%; }后又用prose，会导致prose-base实际只有 10px，小字糊成一片 - 中文字体栈顺序必须是
["Noto Sans SC", "system-ui", "sans-serif"]，引号不能少，否则编译失败
最常被忽略的一点：你根本不需要干预字体平滑。系统默认行为在绝大多数场景下已经最优，强行加类等于绕过渲染引擎的智能判断——而它比你更懂怎么画好一个“口”字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
