现代浏览器已废弃font-smooth，-webkit-font-smoothing仅macOS有效；应按系统分条件使用text-rendering、font-feature-settings及字体加载策略优化可读性。
font-smooth 和 -webkit-font-smoothing 为什么失效
现代浏览器基本不再支持 font-smooth（CSS标准曾定义但已被废弃），而 -webkit-font-smoothing 仅在 Safari 和 Chrome/Edge 的 macOS 渲染路径中生效，Windows 下完全无效。直接写死这个属性不仅徒劳，还可能干扰系统级字体渲染策略，比如在 Windows 上强制启用 antialiased 反而让文字发虚、对比度下降。
真正可控的是 text-rendering 和 font-feature-settings 的组合，再配合系统字体栈的合理 fallback。
-
text-rendering: optimizeLegibility在 Safari/Chrome 中激活连字与字距微调，对中文影响小，但对英文/数字可读性有提升 -
font-feature-settings: "liga", "clig"显式开启连字（需字体本身支持） - 避免在
@font-face中设置font-display: optional，它可能导致字体加载闪动，间接破坏平滑感
SCSS 混合宏如何适配不同平台渲染特性
不能靠一个 @mixin font-smooth 统一处理，必须按 OS 分支：macOS 依赖子像素抗锯齿，Windows 主要靠 ClearType，Linux 多用 FreeType 配置。SCSS 无法探测运行时 OS，所以混合宏应提供语义化选项，由开发者按部署目标手动选择。
推荐封装三个基础变体：
-
@include font-smooth("mac")→ 启用-webkit-font-smoothing: subpixel-antialiased+text-rendering: optimizeLegibility -
@include font-smooth("win")→ 禁用 WebKit 属性，仅设text-rendering: geometricPrecision（对 SVG 文字更稳）+ 合理line-height缓解 ClearType 行高错位 -
@include font-smooth("generic")→ 仅设text-rendering: optimizeSpeed+font-feature-settings: "kern"，作为降级兜底
示例：
@mixin font-smooth($target: generic) {
@if $target == mac {
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeLegibility;
} @else if $target == win {
text-rendering: geometricPrecision;
line-height: 1.4; // 防 ClearType 在小字号下压扁字形
} @else {
text-rendering: optimizeSpeed;
font-feature-settings: "kern";
}
}
自定义字体加载时的平滑断裂问题怎么修
WebFont 加载完成前浏览器会先用系统字体渲染，加载后切换到自定义字体——这个“字体重排”过程常伴随明显闪烁或尺寸跳变，用户感知为“不平滑”。这不是抗锯齿问题，而是布局稳定性缺失。
- 用
font-display: swap是底线，但需配合size-adjust或ascent-override控制字体度量一致性（仅 Chromium 120+ 支持） - 更通用的解法：在
@font-face中预设font-weight和font-style范围，避免浏览器 fallback 到不同粗细的系统字体 - 对关键文本（如标题），用
content-visibility: auto延迟非视口内字体加载，减少首屏重排密度
哪些场景下强行“平滑”反而有害
小字号（≤12px）下启用 -webkit-font-smoothing: antialiased 会让文字边缘模糊，尤其在 Retina 屏上；等宽字体（如 ui-monospace）开启连字会破坏字符对齐；中文字体若未做 hinting，optimizeLegibility 可能导致笔画粘连。
真正需要干预的，其实是字体加载链路和排版上下文，而不是硬塞抗锯齿开关。多数所谓“字体不清晰”，根源是行高、字重、颜色对比度或字体格式（WOFF2 vs WOFF）选型不当，不是渲染属性没开够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
