HTML文字模糊非硬件问题，是浏览器字体亚像素抗锯齿与CSS缩放、DPR适配不匹配所致，常见于Windows+Chrome/Firefox+非100%系统缩放或transform:scale()场景。
HTML文字模糊和显卡驱动无关
不是硬件问题，是浏览器渲染链路中字体亚像素抗锯齿与CSS缩放、DPR适配不匹配导致的。常见于Windows + Chrome/Firefox + 非100%系统缩放（如125%、150%）组合，或使用transform: scale()、zoom后强制重绘失真。
检查window.devicePixelRatio是否被误覆盖
很多前端框架或UI库会主动设置viewport meta或监听resize强行修正DPR，反而破坏浏览器原生渲染逻辑。尤其在Electron或WebView嵌入场景下，devicePixelRatio可能被硬编码为1，导致字体用整像素渲染而非亚像素。
- 打开开发者工具控制台，直接运行
window.devicePixelRatio，确认值是否等于系统实际缩放比（如Win 125% → 应为1.25） - 检查是否有脚本执行过
document.documentElement.style.setProperty('image-rendering', 'pixelated')这类干扰渲染的样式 - 禁用所有扩展后重试——某些字体优化插件会注入
font-smooth或-webkit-font-smoothing覆盖默认行为
font-smoothing在不同系统上的实际效果差异
-webkit-font-smoothing只对macOS Safari/Chrome生效，Windows下完全无效；font-smooth是废弃属性，现代浏览器已忽略。真正起作用的是text-rendering和系统级字体配置。
- 优先尝试
text-rendering: optimizeLegibility（对小字号中文更友好），但避免全局设在body，可能拖慢大段文本重排 - Windows用户若用ClearType，确保未在CSS中设置
paint-order: stroke或filter: blur(0.1px)，这些会触发非GPU合成路径，绕过字体子像素渲染 - 用
getComputedStyle(document.body).fontSmoothing查不到值——这个属性根本不可读，别白费力气
强制GPU合成有时反而让字更糊
加transform: translateZ(0)或will-change: transform确实能拉起GPU图层，但字体绘制阶段若没同步启用亚像素，只会把模糊结果更快地画到屏幕上。
立即学习“前端免费学习笔记（深入）”；
- 仅对动画中移动的文字有效；静态文本加了反而增加内存占用，且在部分集成显卡（如Intel UHD 620）上触发回退到CPU光栅化
- 验证方式：打开Chrome DevTools → Rendering → 勾选“FPS Meter”，看字体区域是否显示为绿色（GPU合成）还是黄色（CPU光栅）
- 更稳妥的做法是用
image-rendering: -webkit-optimize-contrast配合backface-visibility: hidden，仅对需要锐化的标题类文字局部启用
最常被忽略的一点：模糊往往出现在rem或em单位换算后产生小数像素宽高，浏览器四舍五入时丢了一半亚像素信息。与其调渲染参数，不如先用ch或ex单位试试——它们天然对齐字体度量，不依赖DPR换算。
