Html 使用“Safari”时的字距调整问题；f"；及；我"；

我正在OS X 10.10.3上运行Safari 8.0.5

每当我把字母“f”和“I”放在一起时，我就遇到了字母间距问题。我猜这是一个Safari bug，我已经将它提交给了苹果公司，但我也想看看我是否能同时找到解决方法

HTML以两种不同的字体输出短语“鱼很大”。为了强调这个问题，我在每个字符之间增加了10px的字母间距

HTML:

这就是我在Safari中的上述输出：

出于测试目的，我在“f”和“I”字符之间添加了一条HTML注释，这似乎起到了作用：

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

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

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

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

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

我已经证实，在我运行最新版本Safari的iPhone6Plus上似乎也存在这个问题，所以我怀疑这只是我自己的问题

为了说明这个问题，我创建了一个JSFIDLE，其中包含了必要的HTML和CSS，希望能在您这边重现这个问题。

有没有人想办法让我的客户在WYSIWYG编辑器中插入HTML评论，而不是在所见即所得的编辑器中？p>

---

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

看起来您发现了Safari bug。连接的“fi”是一个。CSS3具有可用于控制它们的属性；Safari使用

-webkit

前缀支持它。它看起来像

-webkit字体变体连字：没有通用连字解决了问题，至少在Safari 8.0.3中：

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

这是最新的提琴：

如果您仍然有问题，这里有一个相关的问题，即
渲染：优化速度也解决了这个问题：
我试过渲染：优化速度；这个选项似乎不起作用。但“无共同连字”声明非常有效。谢谢。也就是说，这实际上不是一个bug。如果字体是以默认情况下使用普通连字的方式生成的，那么文本整形器将自动应用连字（将两个字母“f”和“i”的顺序转换为单个字母“fi”）。这不是Safari控制的东西，除非你明确告诉它，所以如果你想绕过它，你可以使用CSS3功能说明，如回答中所示。不，这是正确的行为。浏览器会要求字体呈现一系列代码点，而不会覆盖其应如何呈现代码点，文本呈现引擎会返回一个不同字形的列表，这些字形仅按照字体包含的说明进行间隔和紧排。然后CSS启动，应用字母间距，在单个glyph“fi”、“s”和“h”之间添加间距。因此，如果你不想让这个连字生效，你要么强制
不使用普通连字
，这样文本引擎就知道如何绕过它们，要么甚至使用
liga=0
之类的方法关闭所有连字。@Mike'Pomax'Kamermans那么为什么“fi”和“s”之间没有空格？这可能是一个bug，但似乎是一个单独的问题，例如。“连字+下一个字母”没有正确应用CSS字母间距，而“f+i”没有在它们之间获得字母间距，因为它们被替换（默认情况下）。
<div class="p1">
    The f<!----->ish is large
</div>

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

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