浮动容器内文字发虚主因是border-radius/transform触发亚像素渲染异常，需用-webkit-font-smoothing: antialiased和-moz-osx-font-smoothing: grayscale强制灰度抗锯齿，并配合text-rendering: optimizelegibility与transform: translatez(0)协同优化。
浮动本身不会直接导致文字锯齿，真正出问题的是浮动容器内文字在特定渲染路径下（比如配合 border-radius、transform 或高DPI屏幕）触发了亚像素渲染异常——这时候得靠字体抗锯齿属性干预，而不是调浮动布局。
为什么浮动容器里的文字更容易发虚
浮动元素常被用于卡片、侧边栏等需要脱离文档流的场景，而这类容器又常带 border-radius 或 overflow: hidden。一旦加上这些，浏览器可能为该区域创建新的层叠上下文或裁剪边界，再叠加系统默认的 -webkit-font-smoothing: subpixel-antialiased（iOS/macOS 默认），就会让非系统字体（尤其是中文字体或 @font-face 加载的字体）边缘出现彩色渗色或灰度不均，视觉上就是“发虚”“锯齿”“毛边”。
- iOS Safari 对
@font-face字体默认启用子像素抗锯齿，但 Retina 屏上反而模糊；必须显式覆盖为antialiased - macOS 上 Chrome/Safari 若未设
-webkit-font-smoothing，会继承系统设置，对细字重或小字号特别不友好 - Firefox 在 macOS 需单独用
-moz-osx-font-smoothing: grayscale，否则无效
必须加 !important 的两个关键声明
仅写在 body 上往往不够——浮动容器内部的文字可能被更具体的选择器覆盖，或受字体加载时机影响。最稳妥的方式是直接作用于字体生效的层级：
/* 针对所有浮动卡片内的文本 */<br>.card, .card * {<br> -webkit-font-smoothing: antialiased !important;<br> -moz-osx-font-smoothing: grayscale !important;<br>}
-
antialiased强制走灰度抗锯齿，避开子像素导致的色散，尤其对中文字体和自定义字体效果明显 -
grayscale是 Firefox 在 macOS 上的等效方案，不是可选项，不加就等于没配 - 必须用
!important：因为@font-face规则、框架默认样式或内联 style 可能覆盖它
text-rendering 和 transform 的协同作用
单靠字体平滑属性有时还不够，尤其当浮动容器还做了旋转、缩放或圆角时，得配合渲染策略微调：
-
text-rendering: optimizeLegibility启用连字与字距优化，同时隐式增强抗锯齿权重，适合正文类文字 -
transform: translateZ(0)可强制触发 GPU 合成层，让文字绘制走更稳定的渲染管线——但它对纯文字锯齿改善有限，主要起“稳定器”作用；别单独用，要和上面两个 font-smoothing 声明一起上 - 避免
text-rendering: optimizeSpeed：它会禁用抗锯齿，专为性能敏感动画设计，不适合静态文本
容易被忽略的兼容性陷阱
看似一行 CSS 就能解决，但实际部署时几个点经常翻车：
- Windows 用户看不到
-webkit-font-smoothing效果，但也不能删——Chrome 在 Windows 上仍会读取它并 fallback 到系统 ClearType，删了反而可能退化到无抗锯齿状态 - 某些字体（如像素风、等宽终端字体）开启
antialiased后会变糊，需用@supports隔离：例如@supports (-webkit-font-smoothing: antialiased) and (font-smooth: never) - 如果用了
font-display: swap，首屏字体加载前 DOM 已渲染，默认字体可能按不同规则抗锯齿，造成闪动；建议搭配font-display: optional或预加载关键字体
浮动只是表象，文字锯齿本质是渲染管线在多层合成、字体 hinting、系统策略之间没对齐。你得同时管住字体怎么画、文字怎么排、图层怎么建——少一个环节，边缘就容易漏光。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
