加 antialiased 类反而让 macOS 中文字体更糊，因其强制设置 -webkit-font-smoothing: antialiased，禁用子像素抗锯齿，导致边缘发灰、笔画毛糙；系统默认的 subpixel-antialiased（auto）才是清晰前提，且该类在 iOS 和 Windows/Linux 上无效或被忽略。
为什么 macOS 上中文字体加了 antialiased 反而更糊
因为 antialiased 强制设了 -webkit-font-smoothing: antialiased，这在 macOS 上会禁用子像素抗锯齿（subpixel rendering），让中文字体边缘发灰、笔画毛糙。系统默认的 subpixel-antialiased（即 auto）才是清晰前提。iOS 完全忽略这个属性，Windows/Linux 也不支持，所以它只在 macOS Safari/Chrome 里起副作用。
如果你已在全局 CSS 或 tailwind.config.js 里启用了 antialiased，优先删掉。Tailwind 默认不加这个类，加了反而偏离系统渲染逻辑。
-
subpixel-antialiased是等效于不干预系统策略的“安全开关”，可显式恢复子像素渲染 - 响应式写法如
md:subpixel-antialiased没必要——subpixel 就是默认值，无需条件启用 - 英文小写字母可能看起来略“柔和”，但中文整体可读性下降明显，尤其在 Retina 屏上
真正导致字体模糊的三个常见原因
模糊几乎从不来自“没开平滑”，而是字体加载、缩放或匹配问题：
-
font-display: swap导致首屏用系统字体回退，等自定义字体加载后重绘，视觉上像“突然变糊又变清” - 页面被缩放（如 macOS 系统缩放设为“更大文本”，或浏览器缩放非 100%），触发非整像素渲染
-
font-weight值（如500）和实际加载的字体文件字重不匹配，浏览器被迫做合成加粗，边缘糊化 - 用了
text-rendering: optimizeLegibility却没配连字支持，反而干扰排版精度
字体清晰度的关键不在“加什么平滑类”，而在让正确字体以正确方式准时出现。
立即学习“前端免费学习笔记（深入）”；
如何统一跨平台字体栈并避免回退失控
不同系统默认字体差异大：macOS 用 San Francisco，Windows 用 Segoe UI，Linux 常 fallback 到 DejaVu Sans——直接写 "Helvetica" 会导致 Windows 上用 Arial，Android 上用 Roboto，视觉大小和字宽都不一致。
推荐写法（中英兼顾）：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
- 必须包含三层回退：首选字体 → 同类替代 → 通用族名（
sans-serif） - 第三方组件库（如 Ant Design）常自带字体规则，需用更具体选择器覆盖，例如：
body, .ant-typography { font-family: inherit !important; } - 表单控件（
input、textarea、button）不会自动继承body字体，要显式加font-family: inherit;
哪些 CSS 属性会让文字悄悄变糊（比 antialiased 更危险）
transform、opacity、filter 这些属性本身不直接改字体，但会触发浏览器创建独立 GPU 合成层，让文字被当作位图处理，失去亚像素渲染能力。
-
opacity: 0.99就足够升层，opacity: 1才安全 -
filter: blur(0)或filter: brightness(1)——只要声明了filter，不管值多少，一律升层 -
backface-visibility: hidden和perspective: 1000px也属于“看起来无害实则拉文字进 GPU”的隐蔽陷阱 - Chrome DevTools 的 Layers 面板里看到文字区域标红+多层叠加，就是糊的铁证
这类问题往往在 html2canvas 截图时集中暴露——文字垂直偏移、边缘虚化，根源不是字体本身，而是渲染层级错乱。修复不是调 line-height，而是删掉那些“悄悄升层”的属性。
