-webkit-font-smoothing在ios上完全无效，因apple从ios 7起强制禁用该属性，仅macos safari支持；真正有效的是viewport配置、font-display控制、弹性根字号及text-rendering优化。
移动端字体“发虚”“毛刺”“小字糊成一片”，不是-webkit-font-smoothing没写对，而是它在 iOS 上根本不起作用——Apple 从 iOS 7 起就硬性禁用该属性，所有真机测试都证实：设成 antialiased 或 subpixel-antialiased 都无变化，DevTools 里甚至不显示为已应用。
为什么 -webkit-font-smoothing 在 iOS 上完全无效
这不是 bug，是 Apple 的主动设计。iOS 强制使用灰度抗锯齿（grayscale antialiasing），且不允许网页干预系统级文本渲染策略。即使你用 @supports (-webkit-font-smoothing: antialiased) 包裹，也只会匹配失败。Chrome on iOS 同样无效，因为它底层仍是 WebKit 渲染。Android 端虽部分支持，但效果微弱，且新版已逐步弃用该属性。
- iOS Safari / WebView 忽略所有
-webkit-font-smoothing值，包括antialiased、subpixel-antialiased、none - macOS Safari 是唯一能感知该属性的环境，但仅影响子像素渲染策略，对清晰度提升有限
- 误以为“加了前缀就生效”，是开发者最常踩的坑——它不会报错，也不会警告，只是静默失效
真正有效的字体渲染控制手段
别再折腾无效属性，聚焦三个实际起效的点：字体加载时机、根字号弹性、边缘收紧策略。
- 用
font-display: optional或swap控制自定义字体加载行为，避免回退阶段用系统细体渲染再重绘造成的临时模糊 - 给
html设置弹性根字号：font-size: clamp(14px, 2.5vw, 18px)，既适配小屏和系统字号缩放，又避开 iOS 默认最小可读字号（14px）触发的强制放大 - 对正文启用
text-rendering: optimizeLegibility，实测能改善英文连字与字距；搭配-webkit-text-stroke: 0.5px transparent可抑制 iOS 过度抗锯齿导致的灰蒙感，尤其对system-ui类字体有效
viewport 和 device-pixel-ratio 才是模糊根源
很多所谓“字体模糊”，其实是页面被意外缩放或 CSS 像素与物理像素不匹配所致。iPhone 13 的 window.devicePixelRatio 是 3，若你写死 font-size: 16px，系统会在高 DPR 下做次采样柔化，此时调任何渲染参数都晚了。
- 检查
<meta name="viewport">是否含user-scalable=no或初始缩放异常；内容宽度超视口也会触发浏览器自动缩放 - 用 Chrome DevTools 的 “Rendering” 面板勾选 “Device pixel ratio”，看是否显示非 1 值；真机调试时注意 Safari 的 “Responsive Design Mode” 模拟不准
- 避免在 font-size 中使用小于 14px 的绝对值；必须小字时改用
transform: scale(0.8)+transform-origin: top left，但需同步处理可访问性（如aria-label补充说明）
最易被忽略的点：字体模糊问题往往不是单一 CSS 属性能解决的，它横跨字体加载、视口管理、系统渲染策略三层。修复顺序应是先查 viewport 和 devicePixelRatio，再控 font-display，最后才微调 text-rendering 和描边——跳过前两步直接调样式，等于在流沙上砌墙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
