有时字体看起来很奇怪铬

Question

见编辑下面

EDIT2我创建了一个小提琴重现该问题，并因为它似乎在的jsfiddle问题是永诺有：https://jsfiddle.net/h1b2wn5L/（只是在镀铬）

有时我用于web项目的字体看起来很奇怪。字体被称为Istok Web，我从谷歌字体加载它：https://www.google.com/fonts/specimen/Istok+Web

我创建了2张图片。其中的问题：

而且一个页面的简单重装后：

正如你可以看到T和E有这样一个大胆的顶部，并在一个正常的文本T和E脱颖而出。

我不知道这是从哪里来的，它也没有了简单的重新加载后。会是什么呢？我也不能说这是否也发生在其他浏览器中，因为我与克罗姆工作，我不知道如何重现问题。

编辑我发现了如何重现问题。我在开发人员工具中切换到移动视图时出现问题。当我切换回正常视图时，它会保持不变。所以我想这不是一个大问题，但我很好奇为什么会发生这种情况。

Answer 1

这是由于混叠问题。 您可以使用-webkit-font-smoothing: antialiased;的webkit浏览器的一些替代品，但您将无法在Firefox中重现此修复程序。

你可以使用文本阴影走了解决方法，如下所述：https://www.elfboy.com/blog/text-shadow_anti-aliasing/

Answer 2

Web浏览器不缓存大部分的时间（和Web服务器，根据其配置），当你刷新它重新加载页面页面资源，并从谷歌带来正确的字体。另外，也许字体没有在第一次完美加载。

但是有些字体不看坏在某些浏览器，并在偶数有的在奇数注意字体大小一些工作更好地（例如13像素VS 12像素）。然后进行实验选择。

你可以试试下面的CSS规则，以增强字体以及（不能保证工作，但做无妨）：

html { 
    text-rendering: optimizeLegibility !important; 
    -moz-osx-font-smoothing: grayscale !important; 
}