在Windows上使用多种语言和Web字体时,Chrome包装文本

Question

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

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

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

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

这是Windows上的示例,它显示在154px宽度的两行上.

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

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

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

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

Answer 1

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

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

我的 2c 为什么它有效

我的猜测是，在渲染 web 字体时需要一些额外的步骤，并在 css 预处理器计算出字体间距后执行。添加额外的空间作为 css 预处理器的缓冲区。