css：浏览器中文字显示模糊的原因及处理方案

最新推荐文章于 2025-04-23 07:33:53 发布

原创最新推荐文章于 2025-04-23 07:33:53 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

css 专栏收录该内容

5 篇文章

订阅专栏

文章探讨了奇数像素在字体大小和transform属性中可能引发的浏览器渲染问题，提出将尺寸改为偶数以避免失真。同时，建议使用text-rendering:optimizeLegibility来确保文本的易读性和渲染质量。

//  奇数像素可能导致浏览器渲染失真
1. 字体size为奇数导致，如font-size: 13px;
处理方案：改为偶数

//  transform移动后可能导致浏览器渲染失真
2. transform导致（使用transform的盒子为奇数）
处理方案：在模糊字体一级级往外找，在使用了transform的位置，把使用transform的盒子宽高改为奇数

3. 告诉浏览器如何渲染：
// 浏览器强调渲染速度和几何精度的易读性。这会启用字距调整和可选的连字。
text-rendering: optimizeLegibility;