各种浏览器中的字体差异,是否有解决方案?

时间:2014-10-21 11:36:30

标签: html css fonts

我正在开发一个内容容器高度有限的项目,在一些选择的浏览器(主要是Android上的Chrome)上,文本似乎在不同的地方打破了,尽管几乎所有字体属性看起来都相同到目前为止,我已经检查过了:

  • 容器元素的宽度
  • 字体大小
  • 行高
  • 字体家庭
  • 字母间距

所有这些都是相同的,包括给定值和计算值。

这通常不是一个大问题,但由于内容容器高度限制,这些差异让我头疼不已。

我已设法使用以下代码在fiddle中复制问题:

HTML

<p>We are not able to sleep or We cannot sleep.</p>

CSS

p {
    font-family: "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
    letter-spacing: 0;
    max-width: 200px;
}

此示例中的文本在大多数浏览器的一行中呈现,但在某些最后一个单词“sleep”中。出现在新的一行。

您可以在以下网址的许多不同浏览器中查看此示例的屏幕截图:

http://www.browserstack.com/screenshots/cf75bb4fa9a22db2e660a0073698be86b55becb6

这里有什么我想念的吗?有没有办法确保文本以相同的方式呈现在多个设备和浏览器中?

3 个答案:

答案 0 :(得分:1)

我担心这里唯一的解决方案是使用width =“XXX”的图片,或告诉客户端完全不可能在每个浏览器上制作相同的网页,除非你使用不光彩的方法就像使用图片而不是文本。

答案 1 :(得分:1)

字体呈现的细节因浏览器和平台而异,并且无法在CSS中控制。此外,不同的计算机可能在同一名称下具有(稍微)不同的字体,或者例如完全缺乏Times New Roman(例如,大多数智能手机缺乏它)。

作为一种解决方法,如果特定的行划分至关重要,请考虑将文本编写为预格式化(即将其划分为HTML源中的行,使其显示在显示中)并使用white-space: pre。缺点是某些线可能会撞击甚至越过为元素保留的区域的右边缘。但如果你没有设置背景或边框,这几乎不会引人注意。

答案 2 :(得分:0)

我能够通过用最小宽度替换max-width来解决浏览器中的问题,请参阅此http://jsfiddle.net/79j57L8L/4/

p {
font-family:"Times New Roman", serif;
font-size: 11px;
font-style: italic;
min-width: 200px;
}