Question

请参阅下面的修改

Edit2 我创建了一个重现问题的小提琴，因为在jsfiddle中似乎总是存在问题：https://jsfiddle.net/h1b2wn5L/（仅在chrome中）

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

我制作了2张照片。一个有问题：

一个简单的重新加载页面后：

正如您所看到的，T和E有一个粗体顶部，正常文字T和E突出。

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

编辑我发现了如何重现问题。当我在开发人员工具中切换到移动视图时出现问题。当我切换回普通视图时它就会停留。所以我想这不是一个大问题，但我很好奇为什么会这样。

Answer 1

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

您可以使用text-shadow寻找解决方法，如下所述：https://www.elfboy.com/blog/text-shadow_anti-aliasing/

Answer 2

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

然而，有些字体在某些浏览器中确实看起来很糟糕，并且注意字体大小有些在偶数中有效，有些在奇数中有效（例如13px对12px）。然后进行实验选择。

你可以尝试以下CSS规则来增强字体（不保证工作，但不会造成伤害）：

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