html - 各种浏览器字体不一致，请问有解决办法吗？

Question

我正在做一个元素，其中内容容器的高度是有限的，并且在一些选定的浏览器(主要是 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

我在这里缺少什么吗？有什么方法可以确保文本在多种设备和浏览器中以相同的方式呈现？

Answer 1

字体渲染的细节因浏览器和平台而异，无法在 CSS 中控制。此外，不同的计算机可能在同一名称下具有(略微)不同的字体，或者例如完全没有 Times New Roman(例如，大多数智能手机都没有)。

作为一种变通方法，如果特定的行划分很重要，请考虑将文本编写为预格式化(即在 HTML 源代码中按照它在显示中应出现的方式将其划分为行)并使用 white-space: pre。缺点是有些线可能会触及甚至穿过为元素保留的区域的右边缘。但是，如果您不设置背景或边框，这几乎不会引起注意。