1

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

4

3 回答 3

6

可能的原因有很多：

  1. 不同的字体。很少有 Mac 字体与 Windows 上的字体相同。（不清楚您是否希望 Windows 结果与 Mac 结果匹配，或者只是希望它们在 Windows 上保持一致。）

  2. 不同的默认尺寸。大多数浏览器都有字体和大小的默认值，它们可能并不完全相同。

  3. 字体大小的不同解释。当你说你想要（例如）一个 10 磅的字体时，它的含义并不完全明确。有真点（1/72.27 英寸），但更常见的是计算机点（1/72 英寸）。你想要字符单元格的高度吗？有没有内部领导？还是您的意思是实际的字符高度或仅仅是字体的上升？不同的浏览器可能会选择以不同的方式解释大小。

  4. 不同的分辨率。浏览器可能会以不同的方式处理不同的屏幕分辨率。Windows 有一个“逻辑英寸”的概念，它通常比显示器上的真实英寸大。但是用户可以自定义多大。一些浏览器可能会忽略逻辑英寸并使用设备的实际 DPI（或者至少他们认为 DPI 是什么——操作系统可能实际上并不知道）。

  5. 不同的渲染技术。无论您使用提示、抗锯齿、亚像素渲染（例如，ClearType）还是这些的某种组合，都会稍微影响文本的宽度（即使每个人都同意确切的字体和确切的垂直大小）。

  6. 不同的尺度。大多数浏览器都提供缩放功能，并且它们可能在不同浏览器上没有默认为相同的值。另请注意，当您更改比例时，文本宽度通常不会线性缩放（参见#5）。

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

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

于 2013-04-09T16:05:08.467 回答
0

存在差异，因为没有标准规定网页呈现的文本大小。因此，浏览器供应商可以自由地以他们希望的任何大小呈现文本。

于 2013-04-09T15:42:26.143 回答
0

我在处理需要一致呈现的 HTML 广告时遇到了这个问题。在这种情况下，即使相差几个像素的元素也会使设计看起来很业余。

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

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

html, body {
    font-family: Arial, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
于 2014-11-12T22:26:15.587 回答