Question

我在一个项目上工作，我想知道为什么Windows和Mac OS X之间的网络上的字体大小（宽度）有所不同。我发现Mac上的所有浏览器都具有相同的大小，但在Windows它与浏览器不同。我很沮丧，等着你。我现在的问题是为什么它们之间的宽度有差异？

Answer 1

有很多可能的原因：

不同的字体。很少有Mac字体与Windows上的字体相同。（目前尚不清楚您是否期望Windows结果与Mac结果相匹配，或者仅仅是为了在Windows上保持一致。）
不同的默认尺寸。大多数浏览器都有字体和大小的默认值，但它们可能并不完全相同。
字体大小的不同解释。当你说你想要（例如）一个10磅字体时，它的定义并不完全明确。有真正的点（1 / 72.27英寸），但更常见的是计算机点（1/72英寸）。你想要角色单元的高度吗？有无内部领导？或者你的意思是实际的角色高度还是仅仅是字体的上升？不同的浏览器可能会选择不同的解释尺寸。
不同的分辨率。浏览器可以不同地处理不同的屏幕分辨率Windows具有“逻辑英寸”的概念，其通常大于显示器上的真英寸。但是用户可以自定义多大。有些浏览器可能会忽略逻辑英寸并使用设备的实际DPI（或者至少他们认为DPI是 - 操作系统可能实际上并不知道）。
不同的渲染技术。无论您使用提示，抗锯齿，子像素渲染（例如，ClearType），还是这些的某些组合都会略微影响文本的宽度（即使每个人都同意确切的字体和确切的垂直尺寸）。
不同的尺度。大多数浏览器都提供了缩放功能，并且它们可能不会在不同浏览器上默认为相同的值。另请注意，当您更改比例时，文本宽度通常不会线性缩放（请参阅＃5）。

这些问题中的任何一个都可能导致文本宽度的差异（可以级联到不同的自动换行选项中），使得页面在浏览器与浏览器和机器之间看起来不同。在许多情况下，您可能会遇到阻碍一致性的这些问题的组合。

解决方案是设计灵活的布局。不要通过硬编码事物（比如a的大小）来创建对字体大小的隐式依赖关系，并期望文本始终适合。通常，选择相对于文本大小的大小，并准备好改变实际文本大小。

Answer 2

存在差异，因为没有标准要求网页呈现的文本大小。因此，浏览器供应商可以随意呈现任意大小的文本。

Answer 3

我在处理需要一致呈现的HTML广告时遇到了这个问题。在这种情况下，即使关闭几个像素的元素也可以使设计看起来像业余爱好者。

获得更准确的跨平台结果的一种方法是指定像素值而不是点或ems。无论设备分辨率如何，此类文本都将以相同的大小呈现，并且在放大和缩小时仍可正确缩放。即使在Retina / HD显示器上，由于CSS像素不一定与设备像素相同。

此外，强制使用Web字体或非常常见的字体，以及明确设置抗锯齿方法，将使您更接近像素完美的结果。我发现下面的代码几乎完全相同，无论环境如何。

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

Windows和Mac OS X之间的字体大小

3 个答案: