css - 在 Windows 上使用多种语言和网络字体时，Chrome 换行文本

Question

我有一个包含阿拉伯语和英语内容的网站，我使用网络字体来设计标题和一些按钮的样式 Source Sans Pro英语和 Droid Arabic Kufi对于阿拉伯语，所以基本上我的 css 看起来像这样:

.header {
    font-family: 'Droid Arabic Kufi', 'Source Sans Pro', sans-serif;
}

当元素具有 float 样式或显示为 inline-block 时，问题发生在 Windows 上的 Chrome 中，它出于某种原因将文本换行，即使它不是必要的，这里是一个例子:

这是 Mac 上的示例，它显示在一行上，宽度为 156px。

这是 Windows 上的示例，它显示在宽度为 154px 的两行上。

如果我将 white-space: nowrap; 添加到元素 windows 将正确显示它，真正奇怪的是它使用相同的宽度 154px。

我不想应用white-space: nowrap; 因为有时我需要将文本换行，而且要找到我们需要使用自定义字体的地方并不是一件容易的事并且不换行。

我认为这个问题与空格有关，特别是因为我有时遇到一个问题 whitespace is replaced by a rectangle on Chrome

此问题仅出现在 Windows 上的 Chrome 中。

Answer 1

我有类似的问题，使用 white-space: nowrap; 不是一个选项。

我们只需要等待 chrome 更新，因为我在 chrome beta channel v32 中测试了同一页面并且没有进行不必要的包装。