-webkit-font-smoothing和text-rendering组合使用是当前最可控的中文字体清晰化手段，但需按平台区别对待：前者仅macos有效，后者激活字距与连字以提升小字号可读性，二者误用反而导致发虚或降级渲染。
-webkit-font-smoothing 和 text-rendering 这两个属性组合使用，是目前最可控、见效最快的中文字体清晰化手段，但必须按平台和场景区别对待——硬套一套 CSS 在 Windows、macOS、Linux 或不同浏览器下效果可能完全相反。
为什么直接加 font-smoothing: antialiased 没用
这个写法本身就不合法：font-smoothing 是已被废弃的非标准属性，Chrome 110+、Edge 110+、Firefox 全部忽略它。很多开发者调试半天发现没变化，其实是浏览器压根不解析这行 CSS。
真正起效的是带前缀的 -webkit-font-smoothing，但它只在 macOS 的 Safari/Chrome 中有效；Windows 下 Chrome 完全无视该属性，强行写上反而可能干扰 ClearType 渲染，让文字变灰、变细、发虚。
- 错误写法：
font-smoothing: antialiased;（无效） - 正确写法（仅限 macOS）：
-webkit-font-smoothing: antialiased; - Firefox 专用替代：
-moz-osx-font-smoothing: grayscale;（注意：仅 macOS Firefox 生效）
text-rendering: optimizeLegibility 的真实作用
它不控制抗锯齿，而是告诉浏览器“优先保证可读性”，会激活 OpenType 字体的字距调整（kerning）和连字（ligatures）。对中文影响有限，但能缓解某些字体在小字号下的拥挤或断字问题——尤其在 Gradio 等工具生成的 UI 中，.gr-textbox 或 .gr-markdown 容器里文字密度过高时明显。
不过要注意：optimizeLegibility 在部分旧版 Android 浏览器中会拖慢渲染，且和 -webkit-font-smoothing: antialiased 同时启用时，后者可能被降级处理。
- 推荐搭配场景：深色背景 + 浅色中文字体（如
Microsoft YaHei），字号 ≥ 14px - 慎用场景：小屏移动设备、低性能平板、或使用非系统字体（如自定义 WOFF2）时
- 别写成
text-rendering: auto或留空——默认值在各浏览器中不一致，容易回退到optimizeSpeed，牺牲清晰度换速度
Gradio 等 WebUI 中中文模糊的根源与修复点
Gradio 默认不加载中文字体，Linux 服务器上更常见：浏览器 fallback 到无中文支持的 sans-serif，结果就是方块或断字。这不是渲染参数问题，是字体栈缺失。
修复必须两步走：先确保字体存在，再调渲染策略。
- 字体栈要显式声明，优先用系统预装字体：
font-family: 'Microsoft YaHei', 'Source Han Sans CN', 'Noto Sans CJK SC', sans-serif; - 避免用
font-display: optional加载自定义字体——会导致闪动+重排，破坏平滑感 - Gradio 的
css参数可注入全局样式，但别只写body { ... }，要精确到组件类名，比如：.gr-textbox input, .gr-markdown p - 行高也关键：
line-height: 1.6～1.8能减少中文字形上下挤压导致的视觉模糊感
transform 缩放导致的二次模糊最容易被忽略
很多人给整个页面加 transform: scale(0.9) 应对高 DPI 缩放，但这会让所有文字被 GPU 重采样一次，彻底丢失亚像素信息。哪怕你前面所有 CSS 都写对了，这一句就全废。
真正安全的缩放方式是改 html { font-size } 配合 rem，或者用 viewport 控制初始缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果必须用 transform（比如动画），至少做到：
- 平移用整数像素：
transform: translate(10px, 20px)，别写translate(10.5px, 20.3px) - 缩放避开小数：
scale(1.2)比scale(1.23)更稳 - 旋转尽量用 90° 倍数，非整数角度（如
rotate(17deg)）大概率触发模糊
最麻烦的是：这种模糊在开发机上看不出，一上远程服务器或用户用 Surface Pro 访问就立刻暴露——因为渲染链路依赖本地 GPU 驱动和系统字体引擎，根本没法完全模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
