文字模糊的根源在于gpu双线性插值导致的亚像素渲染，而非盒模型属性；需通过整数坐标对齐、偶数宽高、避免混用transform、强制重光栅化及优化字体渲染策略来解决。
box-sizing、padding、border 这些盒模型属性本身不能解决文字模糊问题。它们只参与布局计算，不干预像素渲染流程。
为什么调 box-sizing 或 margin 对文字模糊没用
文字模糊的根源不在盒模型尺寸计算错误，而在于：浏览器将文字光栅化为纹理后交由 GPU 采样，当坐标落在非整数像素位置（比如 transform: rotate(12.7deg) 或 translateX(0.5px)），GPU 默认用双线性插值平滑边缘——这就是发虚的本质。
-
box-sizing: border-box只改变 width/height 是否包含 padding/border，不影响渲染精度 -
margin和padding的值哪怕设成0.3px，也只会让容器偏移，不会让文字变清晰 - 所有盒模型属性都不触发重光栅化，也不修正亚像素对齐
真正起效的是控制像素对齐和图层生命周期
如果你发现用了 transform 后文字模糊，重点不是改盒模型，而是让渲染坐标“踩在像素格子上”：
- 把旋转角度四舍五入到整数：
Math.round(angle) + 'deg' - 容器宽高设为偶数 px（如
width: 200px），配合transform-origin: 50% 50%，确保中心落在物理像素中心 - 避免
scale()和rotate()混用——缩放会放大坐标误差 - 用
transform: translateZ(0)强制重光栅化，比will-change: transform更轻量且无需 JS 管理
容易被忽略的字体渲染细节
即使坐标对齐了，某些设备仍会因字体渲染策略导致轻微发虚：
- 移动端 Safari 必须加
-webkit-font-smoothing: subpixel-antialiased，但仅在rotate()值为整数时生效 -
font-size尽量避开奇数（如13px→ 改为14px或16px） - 必要时加
text-rendering: optimizeLegibility，启用字距调整提升可读性
盒模型是布局工具，不是渲染开关。想让文字不糊，得盯住坐标、图层、字体这三层，而不是 padding 或 border。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
