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

最新推荐文章于 2025-05-20 21:05:45 发布

原创

最新推荐文章于 2025-05-20 21:05:45 发布

·

4k 阅读

·

1

·

2

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#css

#前端

#javascript

css

专栏收录该内容

5 篇文章

订阅专栏

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

摘要生成于

C知道

，由 DeepSeek-R1 满血版支持，

前往体验 >

// 奇数像素可能导致浏览器渲染失真

1. 字体size为奇数导致，如font-size: 13px;

处理方案：改为偶数

// transform移动后可能导致浏览器渲染失真

2. transform导致（使用transform的盒子为奇数）

处理方案：在模糊字体一级级往外找，在使用了transform的位置，把使用transform的盒子宽高改为奇数

3. 告诉浏览器如何渲染：

// 浏览器强调渲染速度和几何精度的易读性。这会启用字距调整和可选的连字。

text-rendering: optimizeLegibility;