在最新版本的Chrome中，如果您有一个<html>元素（如顶部栏）并且其中包含一些文本，并且正文内容足以使窗口滚动条出现，则该文本该元素将模糊。
这是我最近浏览的网站的一个非常简单的例子。在最新版本的Chrome浏览器中打开此链接（注意：我使用的屏幕尺寸为15.6英寸1366 x 768）。
https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/
向右倾斜屏幕以帮助您更好地查看这种模糊，当前顶部栏中的文本将具有字体模糊（但是您可能没有注意到它），然后打开Chrome开发人员工具，选择{{1} }元素，并添加：overflow: hidden;以摆脱窗口滚动条，轻拂此overflow: hidden;，然后您将清楚地看到何时出现轻微的模糊和何时没有模糊。
使用图标字体时，这种模糊更加明显。以下内容不能解决问题：
body { -webkit-font-smoothing: antialiased; }