我有一个阿拉伯语和英语内容的网站,我使用网页字体为标题设置样式,一些按钮
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中测试了相同的页面并且没有执行不必要的包装.