html - 有时字体在 chrome 中看起来很奇怪

Question

请参阅下面的编辑

Edit2 我创建了一个 fiddle 来重现这个问题，而且在 jsfiddle 中似乎问题一直存在:https://jsfiddle.net/h1b2wn5L/ (仅在 chrome 中)

有时我用于网络元素的字体看起来很奇怪。该字体称为 Istok Web，我从谷歌字体加载它:https://www.google.com/fonts/specimen/Istok+Web

我创建了 2 张图片。有问题的人:

在简单地重新加载页面之后:

如您所见，T 和 E 有一个粗体顶部和普通文本 T 和 E脱颖而出。

我不知道这是从哪里来的，而且在简单的重新加载后它也消失了。会是什么呢？我也不能说这是否也发生在其他浏览器中，因为我使用 crome，但我不知道如何重现该问题。

编辑 我找到了重现问题的方法。当我在开发人员工具中切换到移动 View 时出现问题。当我切换回正常 View 时，它仍然存在。所以我想这不是什么大问题，但我很好奇为什么会这样。

Answer 1

这是由于别名问题。您可以使用 -webkit-font-smoothing: antialiased; 为 webkit 浏览器使用一些替代方案，但您将无法在 Firefox 中重现此修复。

您可以使用文本阴影来解决问题，如下所述:https://www.elfboy.com/blog/text-shadow_anti-aliasing/