mac浏览器字体大小不一致答案

【问题标题】：Font size inconsistancy between browsers on macmac浏览器字体大小不一致
【发布时间】：2013-12-09 19:58:43
【问题描述】：

在以下示例中，它是一个导航栏。它的元素的宽度是可变的，它们的宽度之和就是它们容器的宽度，ul 元素。问题是，每个元素在所有 Windows 浏览器上都有相同的宽度，它们的宽度之和是 379px。但在 mac 上，每个浏览器似乎呈现的字体略有不同，导致宽度增加或减少，因此最后一个元素换行到第二行。

<html>
<head>
<style>
body {margin:0;padding: 0;}
ul {margin:0;padding:0;list-style-type: none;}
.nav {
    width:379px;
}
.nav li {
    float: left;
    margin: 5px;
    padding: 20px;
    background-color: #0099ff;
    color: white;
    font-family: Arial;
    font-size: 16px;
}
</style>
</head>
<body>
    <ul class="nav">
        <li>asdf</li>
        <li>qwer</li>
        <li>test 1</li>
        <li>testing test</li>
    </ul>
</body>
</html>

问题是，如何仅通过指定字体大小来保证所有浏览器上每个元素的宽度。

【问题讨论】：

标签： html css macos fonts

【解决方案1】：

在处理文本时，设置一个固定宽度的 div 加上填充大小是很棘手的。您不太可能在所有主要浏览器和平台上获得完全相同大小的字符串。尽管您可以非常接近；这里有一些建议。

指定px 值而不是pt 或em。无论设备分辨率如何，此类文本都将以相同的大小呈现，并且在放大和缩小时仍会正确缩放
使用非常常用的字体或网络字体。您可以使用 Font Squirrel 删除您想使用的特定字体的版本
显式设置font-smoothing方法
使用计算的 CSS 属性将 letter-spacing 偏移一个分数，该分数基于生成的 div 宽度与目标的差异量。这将是准确的，但也很复杂且兼容性较差
改用 JavaScript 进行上述计算，代码兼容度更高
预先渲染一些 PNG，或在运行时渲染到服务器端

这里有一些示例代码，说明了一种获得更一致的跨平台 Arial 文本渲染的方法。

html, body {
    font-family: Arial, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

【讨论】：

【解决方案2】：

首先，验证您的 HTML。你有一些问题，比如缺少 DOCTYPE。我还推荐 HTML5BOILERPLATE 来完成大量的规范化。

下一个：为什么要让宽度取决于字体大小？将字体大小设为静态并为元素设置一定的静态宽度不是更好吗？
如果你害怕这种行为会导致在小屏幕（移动设备）上出现阅读问题，你应该阅读响应式布局。他们利用媒体查询来使用基于某些规则的替代 CSS。

【讨论】：

好的，谢谢你的建议。不过，DOCTYPE 不是这里的问题。并且宽度取决于字体大小，以避免文本侧边距大小的差异。

【解决方案3】：

如果你不能让它工作，加载具有透明背景的文本的 .png 会相当简单。

【讨论】：