5

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

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

当元素具有float样式或显示为时，问题发生在 Windows 上的 Chrome 中inline-block，由于某种原因，即使没有必要，它也会包装文本，这是一个示例：

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

苹果电脑

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

在此处输入图像描述

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

在此处输入图像描述

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

我认为这个问题与空白有关，特别是因为我遇到了一个问题，有时空白被 Chrome 上的矩形取代

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

4

2 回答 2

2

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

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

于 2013-12-29T14:12:08.793 回答
1

Chrome 中的各种 Google Web 字体也有类似的问题。

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

我的 2c 关于为什么会这样

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

于 2013-09-28T12:03:43.437 回答