在Safari中连接的字母

Question

我的字体中的某些字符连接到相邻的字符。 Safari 7.0.4和Chrome 35.0.x中存在此行为;它不存在于Firefox中。以下是该行为的屏幕截图。 And here is a fiddle of it

这个问题是＆＃39; F＆＃39;而且我的＆＃39; s＆＃39;正在坚持在一起。我可以使用-webkit-font-feature-settings: "liga" 0; which disables common ligatures在Chrome中阻止此操作，但这在Safari中无效（我正在尝试修复＆＃39;）。

Answer 1

从您的图片看，它看起来不像letter-spacing问题，因为您的第一个i顶部没有点。您可能将css属性font-variant-ligatures设置为common-ligatures。尝试将其设置为no-common-ligatures。

修改

根据提供的jsfiddle，将text-rendering: optimizeLegibility替换为text-rendering: optimizeSpeed;可以解决您的问题。

text-rendering上的

Here's a more detailed explanation。

Answer 2

与不同浏览器中的字体呈现引擎的行为方式不同。

愚蠢的修复只是添加字母间距：

letter-spacing: 1px; // feel free to get crazy in how you decide what spacing value to use.

Smart-ish修复是检测safari并添加字母间距。

• Detect Safari browser

最好的解决方法是使用一个没有这个问题的好的网络标准字体。

• http://cssfontstack.com/

---

更新：我注意到你的“F”与其他角色之后的空格不同。这让我想知道你的字体文件是否有问题。但无论如何，这样的事情怎么样：

<h1>E<span>ff</span>iciently</h1>

h1 { letter-spacing: 4px; }
h1 span { letter-spacing: 6px; }