5

我在 OS X 10.10.3 上运行 Safari 8.0.5。

每当使用相邻的字符“f”和“i”时，我都会遇到字母间距问题。我的猜测是这是一个 Safari 错误，我已经将它提交给 Apple，但同时也想看看我是否能找到解决方法。

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

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 中的上述输出：

Safari 字母间距问题

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

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

输出如下：

HTML 注释版本

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

似乎问题仅在于“f”和“i”彼此相邻时。我不确定这些字母在 Safari 中是否有特殊含义，但这是英语中非常常见的字母序列，所以它们真的不应该有这么小的关键字。

我也尝试添加这个：

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

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

webkit 字体功能

大写的“F”没有同样的问题：

大写的 F

“fi”后面的字符似乎并不重要。我可以将其更改为其他任何内容，但仍然存在相同的问题。

fi 之后的其他字母

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

fi 中间词

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

为了说明这个问题，我创建了一个带有必要 HTML 和 CSS 的 jsfiddle，希望能在您的最后重现该问题。 https://jsfiddle.net/38keruv7/4/

是否有人对不涉及要求我的客户在所见即所得编辑器中的单词中间插入 HTML 注释的解决方法有任何想法？

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

4

1 回答 1

11

看起来您发现了一个 Safari 错误。连接的“fi”是印刷连字。CSS3 有一个font-variant-ligatures属性可以用来控制它们；-webkitSafari 通过前缀支持它。看起来-webkit-font-variant-ligatures: no-common-ligatures;解决了这个问题，至少在 Safari 8.0.3 中：

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

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

如果您仍然遇到问题，这里有一个相关的问题说rendering: optimizeSpeed;也可以解决问题：在 Safari 中连接的字母

于 2015-04-16T17:59:07.610 回答