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

请参见下面的编辑

Edit2我创建了一个小提琴来重现这个问题，正如在JSFIDLE中所看到的那样，问题总是存在的：（只是在chrome中）

有时，我用于Web项目的字体看起来很奇怪。该字体名为

istokweb

，我从谷歌字体加载它：

我创作了两张图片。问题之一是：

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

正如您所看到的，

T

和

E

有一个加粗的顶部，在普通文本中，

T

和

E

非常突出

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

---

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

这是由于别名问题。 您可以使用

-webkit字体平滑：抗锯齿

但您将无法在Firefox中复制此修复程序

---

您可以使用文本阴影来解决问题，如下所述：

当您刷新页面时，Web浏览器会在大部分时间（以及Web服务器，取决于其配置）进行缓存，它会重新加载页面资源并从google获得正确的字体。此外，可能字体在第一次加载时没有完全加载

不过，有些字体在某些浏览器中看起来确实不好，请注意字体大小。有些字体在偶数和奇数中效果更好（例如13px与12px）。做实验，然后选择

您也可以尝试使用以下CSS规则来增强字体（不保证有效，但不会造成伤害）：

---

如果在页面的任何地方使用translate3d，我会有奇怪的错误。@Blowski我以前也有过，这是图形卡驱动程序的问题。但在这种情况下，我不使用translate3d，也无法重现问题。它只是有时候会出现，在重新加载之后，如果没有一些代码来重现问题，每个人都会猜测，正如现有答案所示。“如果你能做一把小提琴，其他人会更容易地帮助你。”米克姆卡恩我加了一把小提琴。我甚至不需要打开开发人员工具就可以看到JSFIDLE中的问题。我再次遇到了问题，并对此进行了测试，但没有帮助。重新加载页面，问题就消失了（之前我也没有硬加载什么的，很奇怪）我看到你的小提琴，你用的是字体大小=15px；当我尝试16px时，它好多了。我想这就是问题所在，注意当你换成16或14个字母时，字母看起来是多么的不同。15岁时，它垂直拉伸，质量下降。同样的，我再次遇到问题，并测试了这个，它没有帮助。我还尝试了文本阴影（它看起来好一点，但问题仍然是一样的，我不知道为什么它每100次才发生一次）

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