在Windows上使用多种语言和Web字体时，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中，由于某种原因它甚至不需要包装文本，这是一个示例：< / p>

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

这是Windows上的示例，它显示在两条宽154像素的行上。

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

我不想应用white-space: nowrap;，因为有时我需要包装文本，找到我们需要使用自定义字体但不包装文本的地方并不容易。

我认为问题与白色空间有关，特别是因为我遇到了有时whitespace is replaced by a rectangle on Chrome

的问题

此问题仅在Windows上的Chrome中显示。

Answer 1

我遇到了类似问题，使用white-space: nowrap;不是一种选择。

我们只需要等待Chrome更新，因为我在chrome beta channel v32中测试了相同的页面，并且没有执行任何不必要的换行。

Answer 2

我在Chrome中使用各种Google网络字体时遇到了类似的问题。

我在打印文本的末尾添加了一个空格，chrome能够解析长度并正确包装。

我的2c解释了为什么会这样做

我的猜测是，在css-preprocessor计算出字体间距之后，渲染Web字体还有一些额外的步骤。添加额外空间可充当css预处理器的缓冲区。