Mac VS 上的字体渲染。个人电脑答案

【问题标题】：Font rendering on Mac VS. PCMac VS 上的字体渲染。个人电脑
【发布时间】：2011-11-30 07:05:57
【问题描述】：

我正在使用 CSS 创建网页，我注意到 Mac(Safari) 呈现的字体比 PC（其他浏览器）更宽更厚。

我有十个类别以 960 像素的固定宽度大小水平显示。我使用填充在每个类别之间留出一些空间，它在 PC 上看起来很棒，但是当我在使用 Safari 的 Mac 上看到它时，由于字体渲染更宽，它创建了两行。我知道有办法破解 IE，但要使用 Safari。

在 Safari 和其他浏览器上正确显示的最佳方式是什么？

【问题讨论】：

您不能依赖完全按照您的意图呈现的文本。没有一种“正确”的方法。

标签： css safari

【解决方案1】：

如果您想保证您的类别框不跨越两行，您必须固定框的宽度，以便它们总加起来正好为 960 像素。

例如：

<div class="container">
  <div class="category">...</div>
  ...(9 more)...
  </div>
<div>

.container { width: 960px; margin: 0 auto; }
.category { width: 86px; padding: 5px; float:left; }

您只需调整它以适应您想要的外观和感觉。除非文本实际上是图像，否则您不会在所有浏览器和平台上获得完全一致的文本呈现，因此您只需通过定义文本适合您希望它在页面上的布局方式的框来考虑这一点.

【讨论】：

【解决方案2】：

由于围绕跨平台字体渲染的微妙之处编写 CSS 非常困难，我建议使用诸如 variable padding 之类的东西。

ul {
   display: table;
   width: 100%;
}

ul li {
   display: table-cell;
}

jsFiddle.

您选择一种适用于您正在测试的平台的字体大小，并让display: table-cell 计算填充。

【讨论】：

“非常困难”是什么意思？你有参考吗？