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

前端之家收集整理的这篇文章主要介绍了css – Chrome在Windows上使用多种语言和Web字体时包装文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个阿拉伯语和英语内容的网站,我使用网页字体为标题设置样式,一些按钮 Source Sans Pro为英语,Droid Arabic Kufi为阿拉伯语,所以基本上我的css看起来像这样:
.header {
    font-family: 'Droid Arabic Kufi','Source Sans Pro',sans-serif;
}

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

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

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

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

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

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

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

解决方法

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

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

猜你在找的CSS相关文章