按钮文字模糊主因是浏览器渲染与缩放机制不匹配，尤其由transform缩放、font-size未同步line-height或高dpi屏下子像素抗锯齿禁用所致；修复需设置-webkit-font-smoothing: subpixel-antialiased和-moz-osx-font-smoothing: grayscale，避免transform干扰，优先用px+媒体查询或clamp()控制字号。
button文字模糊的常见表现
按钮内文字边缘发虚、有毛边、小字号看不清，或在高DPI屏幕（如Mac Retina、Windows高清屏）上明显糊成一片——这不是字体本身问题，而是浏览器渲染层与缩放机制不匹配导致的。尤其当按钮用了transform: scale()、zoom、或父容器设置了font-size但未同步调整line-height时，文字会先被缩放再渲染，最后被反锯齿算法“柔化”掉细节。
强制启用子像素抗锯齿（Chrome/Edge/Safari）
现代浏览器默认对缩放后的文字禁用子像素渲染，导致模糊。加一行样式可恢复清晰度：
.btn {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
注意：-moz-osx-font-smoothing: grayscale在 macOS 上实际效果更稳，而subpixel-antialiased在 Chrome/Edge 中更有效；二者共存无冲突。不要写antialiased——它反而会让文字更虚。
避免 transform 缩放干扰文字渲染
用transform: scale(1.2)放大按钮？那文字也会被GPU缩放，失去原生渲染精度。改用以下方式之一：
- 直接调大
font-size和padding，保持CSS layout flow不变 - 若必须用
transform，搭配will-change: transform+backface-visibility: hidden触发独立图层，减少合成干扰 - 对文字单独包裹
<span></span>，只对其设font-size，按钮本身不动
特别提醒：transform: scale() + backdrop-filter组合极易引发双重模糊，应避免。
响应式场景下 font-size 单位选择
用rem或em做响应式字号时，如果根元素font-size被JS动态修改（比如根据屏幕宽度重设），文字可能因重排重绘不及时而短暂模糊。更稳妥的做法是：
- 优先用
px固定字号（如16px），配合媒体查询分段切换 - 若必须用相对单位，确保
html元素的font-size仅通过clamp()定义，例如：font-size: clamp(14px, 4vw, 18px); - 避免在
@media中反复设置html { font-size: ... }，改用CSS变量+calc()统一调控
文字模糊往往不是单一原因，而是缩放、图层、字体设置、DPR适配四者叠加的结果。调试时先关掉所有transform和filter，确认基础文字是否清晰，再逐个开启验证影响点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
