-webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale 仅在满足整数 font-size、禁用缩放、无 transform、正确 doctype 及系统抗锯齿启用等前提下才有效；其本质是微调而非开关，单加属性无法绕过渲染链路中的任一失效环节。
直接加 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale 就能明显改善字体边缘发虚、发毛的问题，但必须配合整数 font-size、禁用缩放、避免 transform 才真正生效。
为什么 -webkit-font-smoothing 在 Chrome/Safari 里没反应
它不是“开关式”属性，而是对已有渲染策略的微调；若系统级抗锯齿被禁用（如 Windows ClearType 关闭）、或页面处于怪异模式（doctype 缺失）、或字体本身在当前尺寸下天然模糊，加了也白加。
- 确保
声明存在，否则 IE/旧 Edge 会退化到怪异模式，前缀属性完全失效 - 检查浏览器是否启用了系统缩放（
Ctrl +或系统设置），缩放会破坏像素对齐，让任何平滑设置失效 - Mac 上 Safari 默认启用次像素渲染，
antialiased反而可能让小字号更“灰”，可尝试subpixel-antialiased对比效果
font-size 不是整数会导致字体模糊
非整数像素值（如 15.6px、1.25rem 在 125% 缩放下）会让浏览器做亚像素插值，文字边缘立刻变软。这不是渲染 bug，是光栅化原理决定的。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 优先使用整数
px值：例如font-size: 16px，而非1.067rem（≈16.005px） - 用
clamp()时注意第三参数是否为整数：clamp(14px, 4vw, 20px)比clamp(14px, 4vw, 19.5px)更安全 - 慎用
em/rem套嵌计算，父级 font-size 非整数会逐层放大误差
Firefox 和 Windows 下的特殊处理
-moz-osx-font-smoothing 实际只在 macOS 上生效，Windows 版 Firefox 完全忽略它；而 Windows 原生依赖 ClearType，CSS 层面几乎无法干预。
- Windows 用户若发现字体模糊，第一反应应是检查系统设置里的 ClearType 调谐器是否启用
- Firefox 不支持
-webkit-前缀，所以单独给它加text-rendering: optimizeLegibility可能比硬套前缀更有效 - 对 Windows 高 DPI 屏幕，可加媒体查询：@media (-ms-high-contrast: active), (forced-colors: active) { body { -webkit-font-smoothing: auto; } }，避免强制平滑干扰系统高对比模式
自定义字体加载后依然发虚？重点查这三处
Web 字体（WOFF2/TTF）加载完成 ≠ 渲染就绪，字体度量、字重回退、fallback 链断裂都会导致临时模糊或跳变。
- 确认
@font-face中font-display: swap已设置，否则 FOIT（无字体时空白）或 FOUT（字体切换闪动）会掩盖平滑问题 - 避免声明不存在的
font-weight，比如 Open Sans 的font-weight: 600若未提供对应文件，浏览器会模拟加粗，必然模糊 - 检查字体文件是否包含完整字形集，缺失字符会 fallback 到系统字体，造成同一段文本中部分字清晰、部分字毛边
真正起效的平滑不是靠堆 CSS 属性，而是控制渲染链路每个环节：从 doctype、缩放、像素对齐、字体加载策略，再到最终的抗锯齿指令。漏掉任意一环，-webkit-font-smoothing 都只是贴在表面的创可贴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
