有時字體看起來很奇怪鉻

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; 
}