SCSS无法自动检测操作系统，必须手动按平台声明：macOS用-subpixel-antialiased+text-rendering；Windows禁用-webkit属性、依赖ClearType；Linux设text-rendering: optimizeLegibility。-webkit-font-smoothing在Chrome v59+/Safari 16.4+基本失效，稳定方案是text-rendering、font-optical-sizing、font-display三者组合。
SCSS里不能自动检测操作系统，必须手动分平台写
SCSS 是编译时预处理器，运行在构建阶段，无法读取用户设备的 OS 类型。所以不存在「一个 @mixin font-smooth 覆盖所有平台」的方案。强行封装成统一混合宏，只会让 Windows 用户看到更糊的文字，或让 macOS 用户失去子像素抗锯齿。
正确做法是按目标部署环境，显式声明平台分支：
-
$platform: macos时启用-webkit-font-smoothing: subpixel-antialiased（仅当系统字体平滑开启才生效） -
$platform: windows时禁用所有-webkit-属性，转而依赖 ClearType，重点控制font-weight和font-familyfallback 链 -
$platform: linux时优先设text-rendering: optimizeLegibility，并避免触发 FreeType 的 bitmap 字体回退
Chrome v59+ 和 Safari 16.4+ 中 -webkit-font-smoothing 基本失效
这不是你写错了，是浏览器主动弃用了这个非标准属性。Chrome 自 v59 起默认忽略 -webkit-font-smoothing，除非页面已触发硬件加速层（比如加了 transform: translateZ(0) 或 backface-visibility: hidden）。Safari 16.4+ 在 macOS Sonoma 及更新系统中，也受限于系统级「字体平滑」开关——关掉它，CSS 设置就完全无效。
因此，不要把它当主力手段。如果真要用，只建议在 macOS 专用主题中配合以下条件：
立即学习“前端免费学习笔记（深入）”；
- 确保
body或根元素有backface-visibility: hidden - 避免使用
filter: opacity(0.99)这类伪透明，它会让 Chrome 放弃子像素渲染 - 不与
perspective或will-change: transform混用，否则可能引发 GPU 渲染模糊
真正跨平台可控的替代组合只有三个标准属性
放弃幻想，用 W3C 标准属性组合才是稳定解法：
-
text-rendering: optimizeLegibility：强制启用连字和精细字距，对小字号英文/数字最有效 -
font-optical-sizing: auto：仅对支持光学尺寸的可变字体（如Inter、Roboto Flex）起作用，能显著改善不同字号下的笔画清晰度 -
font-display: swap：防止自定义字体加载期间 fallback 字体被错误抗锯齿（尤其影响中文显示）
示例（SCSS）：
@mixin font-rendering-macos {
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeLegibility;
font-optical-sizing: auto;
}
@mixin font-rendering-windows {
text-rendering: optimizeLegibility;
font-optical-sizing: auto;
font-weight: 450; // 避免 normal 导致黑体过粗
}
background-clip: text 在 Retina 屏出锯齿不是 CSS 写得不够多
用渐变文字时边缘发虚、有彩色阶梯，根本原因不是抗锯齿没开，而是浏览器对文字 alpha 通道做了单倍采样。只加 -webkit-background-clip: text 毫无意义。
必须三者同时存在才能压住：
text-rendering: optimizeLegibility-
-webkit-font-smoothing: antialiased（哪怕只是给 WebKit 内核兜底） -
backface-visibility: hidden（触发 GPU 合成，修复亚像素对齐偏移）
而且要注意：macOS 系统设置里「字体平滑」关闭时，这三条一起加也救不回来——这是系统级限制，没有绕过方法。
