使用"f“和"i”时的Safari kerning问题

Question

我在OSX10.10.3上运行Safari 8.0.5。

每当使用"f“和"i”两个字符时，我都会遇到一个字母间距问题。我的猜测是，这是一个Safari的错误，我已经把它作为这样的提交给苹果，但也想看看我是否能在同一时间找到一个解决办法。

HTML以两种不同的字体输出短语"The fish is large“。为了强调这个问题，我在每个字符之间添加了10 To的字母间距。

HTML：

<div class="p1">
    The fish is large
</div>
<div class="p2">
    The fish is large
</div>

CSS：

div { letter-spacing: 10px; margin-bottom: 10px; }

div.p1 { 
    color: #009900;
    font-family: Helvetica;
}
div.p2 {
    color: #000099;
    font-family: Arial;
}

这就是我在Safari中输出的内容：

​

​

为了测试目的，我在"f“和"i”字符之间添加了一个HTML注释，这似乎奏效了：

<div class="p1">
    The f<!----->ish is large
</div>

输出如下：

​

​

虽然这在技术上有效，但对我来说并不是一个理想的解决方案，因为这里的内容实际上是由WYSIWYG编辑器生成的。

似乎只有当"f“和”我“在一起时，才是问题所在。我不确定这些字母在Safari中是否有特殊的含义，但在英语中这是一个非常常见的字母序列，所以它们真的不应该有那么小的关键字。

我还试着添加以下内容：

 -webkit-font-feature-settings: "kern";

这确实把"s“推到了右边，但"f”和"i“仍然在一起。

​

​

大写的"F“不存在相同的问题：

​

​

而"fi“之后的角色似乎并不重要。我可以把它换成任何其他的东西，但它仍然有同样的问题。

​

​

如果"fi“出现在单词中间，它也会做同样的事情：

​

​

我已经证实，这个问题似乎也存在于我的iPhone 6 Plus上，运行最新版本的Safari，所以我怀疑这仅仅是我的问题。

为了说明这个问题，我创建了一个处理必要的HTML和CSS的工具，希望它能在您的终端上重现这个问题。https://jsfiddle.net/38keruv7/4/

有没有人有什么解决办法，不要求我的客户在WYSIWYG编辑器的中间插入HTML注释？

我想我可以在输出数据之前扫描和替换特定的组合，但是在处理大得多的数据块时，这似乎是对服务器资源的一种效率很低的使用。

Answer 1

看来你发现了一个Safari虫。连接的"fi“是一个排印结扎。CSS3有一个可以用来控制它们的font-variant-ligatures属性；Safari使用-webkit前缀支持它。看起来-webkit-font-variant-ligatures: no-common-ligatures;解决了这个问题，至少在Safari8.0.3中是这样的：

div {
    -webkit-font-variant-ligatures: no-common-ligatures;
    letter-spacing: 10px;
    margin-bottom: 10px;
}

这里有一个更新的小提琴：https://jsfiddle.net/38keruv7/5/

如果您仍然有问题，下面有一个相关的问题，即rendering: optimizeSpeed;也解决了这个问题：用Safari连接的信件