FF 3.5 for Mac 上输入字段的字体大小差异？

Question

我在测试我的网站时注意到，Mac 上的 FF 3.5 上的字段字体大小比 Windows 或任何其他浏览器上的 FF 3.5 上的字体大小要大。

有没有办法设计或修复它？我尝试过设置 input { font-size: XXpx;无济于事！

Answer 1

字体大小差异的原因

Mac 操作系统和 Windows 操作系统之间的字体大小差异不一定是字体不同的结果，因为当您使用相同的字体和大小时也会发生这种情况。相反，原因是历史悠久的（请参阅此背景文章）：Windows 以 96 DPI 渲染文本，并且MacOS 使用 72 DPI。有时，您甚至可能会看到不同的 DPI 值，例如，当您在 Windows 显示属性中选择大字体时（这会增加 DPI）。

混乱和物理学

关于这一点有很多混乱。当然，像素就是像素，那么 MacOS 下的一个屏幕如何每英寸 72 点，而 Windows 下的同一个屏幕每英寸 96 点呢？嗯，它不能。这里所说的英寸并不是真正的英寸。它们是合乎逻辑的英寸。 72 DPI 意味着：当前屏幕上的 72 像素（每个屏幕都不同！）我们将其视为一英寸。这绝不等于纸上的一英寸，即物理世界中的 2.54 厘米。

返回网页和您的问题

这一切与您的问题有什么关系？因为我假设您使用点（很好！）来表示您的尺寸。 1 点定义为 1/72 英寸（1 英寸有 72 点）。现在您知道屏幕上的英寸不是实际的英寸，并且每个操作系统在每个逻辑英寸中放置了不同的默认点，您还知道点（或 mm、in 或 pc）因系统而异。

走向（不完美）的解决方案

但是，您可能会问，如果一切都平等地按比例调整大小，那么相对而言，一切都应该很好而且花花公子？不，不完全是。如果您使用图像或在其他元素中使用像素大小，则这将不起作用。像素是唯一可用的绝对逻辑尺寸（即使这绝不是精确的尺寸也不足为奇：像素的尺寸因显示器而异）。如果指定像素，则会超出操作系统叠加的 DPI 或 PPI 限制（另一个 历史记录）。即：

/* 
   different font-size per OS / DPI display 
   setting compared to input box 
*/
input.text {
    width: 120px;
    font-size: 10pt;
}

/* 
   equal font-size per OS / DPI display 
   setting compared to input box 
*/
input.text {
    width: 120px;
    font-size: 12px;   /* typically, pixels are slightly smaller than points */
}

但是，即使在上述情况下，渲染问题也可能会困扰您。本地样式表、可用字体、视口大小调整和抗锯齿可能仍然会增加细微的差异。但这是最接近违反操作系统相关规则的方法。

一个微妙之处：一旦开始使用像素，与图像相比，测量字体可能会变得更容易，但是您将失去缩放整个设计的可能性，并且您将不得不在各处指定精确尺寸。因此，这在您的情况下是否是一个好主意取决于您（常见的做法是坚持要点并将渲染留给浏览器和操作系统，以便为用户提供他们在系统上习惯的体验）。

Helvetica 与 Arial 解决方案

在此线程中有人建议 Helvetica 是 MacOS 上的渲染字体，也是造成差异的原因。为了确定这一点，请查看此页面在渲染中识别 Helvetic 与 Arial页。如果您使用以下 CSS，您的页面在 Windows (Arial) 上的呈现方式将不同于在 MacOS (Helvetica) 上的呈现方式：

input.text {
    font-family: Helvetica, Arial, sans-serif;
}

但如果您使用以下代码，它在 Windows (Arial) 和 MacOS (也是 Arial）。只有 Linux 看起来仍然会有所不同，除非 Windows 字体已被已安装。

input.text {
    font-family: Arial, Helvetica, sans-serif;
}

等宽字体的奇怪小错误可能会增加混乱

如果您使用等宽字体，即使您指定了字体本身，您最终可能仍然会在渲染方面存在差异。 Firefox 中有一个隐藏得很好的错误，而且在其他一些浏览器上也有一个错误，我不久前报告过（博客文章解释了解决方案），但还没有引起了很多关注。

简单的解决方案是始终指定 Courier New，即使您不关心字体也是如此。正如您提到的 Arial 和 Helvetica 一样，我认为这不是您的问题。

最后的想法

为什么这么麻烦，为什么不制定一个标准呢？阅读此优秀的背景文章，解释了为什么 Windows 认为将 DPI 提高 30% 更好。

进一步阅读：有一个专门讨论 DPI 问题的整个网站。

Answer 2

我猜每个操作系统中使用的等宽字体并不相同。如果我没记错的话，Mac OS X 上是 Monaco，Windows XP 上是 Courier New。

用户习惯了他们使用的操作系统上使用的等宽字体，他们不一定欣赏另一种字体（或顺便说一句关心）。您是否需要跨操作系统采用统一的风格并严格执行？
仅供参考，您是唯一一个看到您提到的浏览器之间存在差异的人，因为您在许多浏览器上测试了您的网站（这是一件好事！）。
绝大多数用户将在一种操作系统上仅使用一种浏览器访问您的网站，并且不会发现差异，而注意到差异的 1% 也不会在意，除非它的大小是某处的两倍或影响了可读性显示的信息。

要设置这些文本的样式，您可以使用 font-family （请参阅此处使用 Firebug 或 Web 开发工具栏 (Ctrl-Shift-F) 声明的字体，这对我来说似乎是深思熟虑的），font-stretch 和 字体大小调整
AFAIK font-stretch 没有在任何地方实现

浏览器的字体支持仍然需要很多改进，你不能像在 Photoshop 中那样对它们进行微调。

Answer 3

Felipe 是对的：每个操作系统/浏览器组合在字体大小和其他一些元素方面都有不同的起点。

尝试在执行任何操作之前对您的网站应用 CSS 重置，然后从那里开始构建。也许有帮助。
http://developer.yahoo.com/yui/3/cssreset/

Answer 4

尝试将字体强制为 arial，因为它包含在所有操作系统中，而且看起来不错。