Amatic SC字體 - 渲染'ee'

Question

我遇到了Amatic SC font的問題，特別是當試圖渲染兩個'e'字符時，下兩個彼此。

正如你可以看到谷歌字體頁面，它應該看起來像這樣。

然而，在我的網站，我得到這樣的效果：

這可能是很難看到，但兩個「E」字已經被連接在一起成爲一個字符。突出顯示文字時，它們充當一個字符。

此外，如果我打印出一串像'eeeeeeee'這樣的長字符串並增加字母間距，可以清楚地看到問題。

我似乎無法找到這方面的消息，所以任何幫助是極大的讚賞，因爲它是很煩人！

Answer 1

我無法重現此錯誤，但由於某些字體的Safari錯誤，此問題（這是一個印刷線跡問題），此問題由as per an older Stack Overflow answer產生。

嘗試添加到您的樣式表對受影響的元素：

-webkit-font-variant-ligatures: no-common-ligatures; 
    text-rendering: optimizeSpeed; 

您可以查看問題是否仍然存在有和沒有在你的瀏覽器這些屬性：

JSFiddle.

如果問題沒有出現在任何元素中，則可能意味着您的網站上的元素存在其他一些屬性，導致此問題。

編輯的答案，所以我可以標記爲解決方案

我不完全知道爲什麼這個工作，但添加以下CSS到相關的變量固定的這個問題：

-webkit-font-feature-settings: "liga" 0; 
font-feature-settings: "liga" 0; 

Answer 2

我無法評論，因爲我的代表處是太低了，但是，我想，沒有成功複製你的問題：

JSFiddle

HTML

<p> 
Where's the beef?<br /> 
BEEEEEEEEEEEF 
</p> 

CSS

@import url('https://fonts.googleapis.com/css?family=Amatic+SC'); 
body { 
    font-family: 'Amatic SC'; 
    font-size: 40px; 
} 

是否有可能將某種代碼運行在某個地方，將E組合成一個字符？如果您可以使用codepen或小提琴向我們展示，或者提供重現步驟，那麼這對於解決您的問題非常有幫助。