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或小提琴向我们展示，或者提供重现步骤，那么这对于解决您的问题非常有帮助。