浮动本身不会导致文字模糊，真正原因是浮动容器配合border-radius或overflow:hidden时触发亚像素渲染异常，需用-webkit-font-smoothing:antialiased和-moz-osx-font-smoothing:grayscale强制灰度抗锯齿，并配合text-rendering:optimizeLegibility与transform:translateZ(0)协同优化。
浮动本身不会让文字模糊，真正出问题的是浮动容器配合 border-radius、overflow: hidden 或高 DPI 屏幕时触发的亚像素渲染异常——这时候得靠字体抗锯齿属性干预，而不是改浮动布局。
为什么 .card 里文字一加圆角就发虚？
浮动容器（如 .card）常带 border-radius 或 overflow: hidden，浏览器会为它创建新层叠上下文或裁剪边界。一旦叠加 macOS/iOS 默认的 -webkit-font-smoothing: subpixel-antialiased，中文字体或 @font-face 字体边缘就会出现彩色渗色或灰度不均，视觉上就是“毛边”“发虚”。
- iOS Safari 对自定义字体默认启用子像素抗锯齿，但在 Retina 屏上反而模糊，必须显式设为
antialiased - macOS 上 Chrome/Safari 若没设
-webkit-font-smoothing，会继承系统设置，对细字重或小字号特别不友好 - Firefox 在 macOS 必须单独加
-moz-osx-font-smoothing: grayscale，否则无效
必须用 !important 的两个声明
只写在 body 上往往不够——浮动容器内部的文字可能被更具体的选择器覆盖，或受字体加载时机影响。最稳妥的方式是直接作用于字体生效的层级：
.card, .card * {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
-
antialiased强制走灰度抗锯齿，避开子像素导致的色散，尤其对中文字体和自定义字体效果明显 -
grayscale是 Firefox 在 macOS 上的等效方案，不是可选项，不加就等于没配 - 必须用
!important：因为@font-face规则、框架默认样式或内联style可能覆盖它
text-rendering 和 transform 怎么协同优化？
单靠字体平滑属性有时还不够，尤其当浮动容器还做了旋转、缩放或圆角时，得配合渲染策略微调：
-
text-rendering: optimizeLegibility启用连字与字距优化，同时隐式增强抗锯齿权重，适合正文类文字 -
transform: translateZ(0)可强制触发 GPU 合成层，让文字绘制走更稳定的渲染管线——但它对纯文字锯齿改善有限，主要起“稳定器”作用 - 避免在浮动容器内嵌套
transform-style: preserve-3d，否则子元素反复被 GPU 重采样，模糊加剧
真正决定清晰度的不是浮动，而是渲染路径是否可控：打开 Chrome DevTools → Layers 面板，如果文字区域标红（独立 GPU 图层），那 -webkit-font-smoothing 就已经失效了，此时该停用 transform 类动效，改用 color 或 text-shadow 过渡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
