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

时间:2010-07-14 18:38:33

标签: html css firefox rendering font-size

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

有没有办法设计或修复它?我试过设置输入{font-size:XXpx;无济于事!

4 个答案:

答案 0 :(得分:5)

字体大小差异的原因

Mac-OS和Windows-OS之间字体大小的差异不一定是不同字体的结果,因为当您使用相同的字体和大小时也会发生这种差异。相反,原因是历史性的(参见此background article):Windows使用96 DPI呈现文本,MacOS使用72 DPI。有时,您甚至可能会看到不同的DPI值,例如,当您在Windows显示属性中选择大字体时(这会增加DPI)。

混乱和物理

对此存在很多困惑。当然,一个像素是一个像素,那么一个屏幕如何在MacOS上每英寸有72个点,而在Windows上每英寸相同的屏幕有96个点?好吧,它不能。这里的英寸不是真正的英寸。它们是合乎逻辑的英寸72 DPI意味着:当前屏幕上有72个像素(每个屏幕都不同!)我们认为它好像是一英寸。在物理世界中,这绝不等于纸上一英寸,即2.54厘米。

返回网页和您的问题

这一切与您的问题有什么关系?因为我假设你为你的尺码使用积分(好!)。一点定义为1/72英寸(72英寸一英寸)。既然您知道屏幕上的英寸不是实际的英寸,并且每个操作系统在每个逻辑英寸中放置不同的默认点,您也知道这些点(或mmin或{{1每个系统都不同。

迈向(非完美)解决方案

但是,你可能会问,如果一切都是平等的,按比例调整大小,相对而言,一切都应该是好的和花花公子?不,不完全。如果您使用图像或在其他元素中使用像素作为尺寸,则无效。像素是您可以使用的唯一绝对逻辑大小(即使这也许并不奇怪,这绝不是一个确切的大小:每个显示器的像素大小不同)。如果指定像素,则超过OS叠加的DPI或PPI限制(另一个historical note)。即:

pc

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

一个微妙之处:一旦开始使用像素,与图像相比,测量字体可能会变得更容易,但是您将无法扩展整个设计,并且您将无法在任何地方指定精确的尺寸。因此,在您的情况下这是否是一个好主意取决于您(通常的做法是坚持使用积分并将渲染留给浏览器和操作系统,以便让用户体验他们在系统中习惯的东西)。

Helvetica vs Arial解决方案

有人建议在这个帖子中,Helvetica是MacOS上呈现的字体,是造成差异的原因。要确定,请在呈现的页面中查看此页面中的spotting Helvetical vs Arial。如果您使用以下CSS,您的页面在Windows(Arial)上的呈现方式将与在MacOS(Helvetica)上的呈现方式不同:

/* 
   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 */
}

但是如果您使用以下代码,它在Windows(Arial)和MacOS(also Arial)上看起来是相同的。除非Windows fonts have been installed

,否则只有Linux看起来会有所不同
input.text {
    font-family: Helvetica, Arial, sans-serif;
}

monospace的奇怪小错误可能会增加混乱

如果您使用等宽字体,即使您指定了字体本身,您最终仍可能在渲染方面存在差异。 Firefox中存在一个隐藏得很好的错误,但在其他一些浏览器中也存在I reported a while ago(博客文章解释解决方案),但没有引起太多关注。

简单的解决方案是始终指定Courier New,即使您不关心字体。我不认为这是你的案子中的问题,因为你提到了Arial和Helvetica。

最后的想法

为什么这一切都麻烦,为什么不是一个标准?请阅读此excellent background article,了解为什么Windows认为最好将DPI提高30%。

进一步阅读:有whole site dedicated to DPI issues

答案 1 :(得分:2)

我猜每个操作系统中使用的等宽字体不一样。如果我记得很清楚,Mac OS X上的Monaco和Windows XP上的Courier New。

用户习惯于他们使用的操作系统上使用的等宽字体,他们不一定会欣赏另一个(或者关心btw)。你需要在操作系统中采用统一的风格并严格执行吗? 仅供您参考,因为您在许多浏览器上测试您的网站(这是一件好事!)。 绝大多数用户将在一个操作系统上只使用一个浏览器访问您的网站,并且不会发现差异,并且注意到差异的1%将无关紧要,除非它的大小是某个地方的两倍或影响可读性显示的信息。

要设置这些文本的样式,您可以使用font-family(请参阅此处声明的字体,使用Firebug或Web Developer Toolbar(Ctrl-Shift-F),我觉得这很好),font-stretchfont-size-adjust
AFAIK font-stretch未在任何地方实现

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

答案 2 :(得分:2)

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

尝试将 CSS重置应用到您的网站之前,然后从那里开始构建。也许有帮助。 http://developer.yahoo.com/yui/3/cssreset/

答案 3 :(得分:0)