Mac-OS和Windows-OS之间字体大小的差异不一定是不同字体的结果,因为当您使用相同的字体和大小时也会发生这种差异.相反,原因是历史性的(参见本背景文章):Windows使用96 DPI呈现文本,MacOS使用72 DPI.有时,您甚至可能会看到不同的DPI值,例如,当您在Windows显示属性中选择大字体时(这会增加DPI).
关于这一点有很多困惑.当然,一个像素是一个像素,那么一个屏幕如何在MacOS上每英寸有72个点,而在Windows上每英寸相同的屏幕有96个点？好吧,它不能.这里的英寸不是真正的英寸.它们是合乎逻辑的英寸 72 DPI意味着:当前屏幕上有72个像素(每个屏幕都不同!)我们认为它好像是一英寸.在物理世界中,这绝不等于纸上的英寸,即2.54cm.
这一切与您的问题有什么关系？因为我假设你为你的尺码使用积分(好!).一点定义为1/72英寸(72英寸一英寸).既然你知道屏幕上的英寸不是实际的英寸,并且每个操作系统在每个逻辑英寸中放置不同的默认点,你也知道每个系统的点(或mm,in或pc)是不同的.
但是,你可能会问,如果一切都是平等的,按比例调整大小,相对而言,一切都应该是好的和花花公子？不,不完全.如果您使用图像或在其他元素中使用像素作为尺寸,则无效.像素是您可以使用的唯一绝对逻辑大小(即使这也许并不奇怪,这绝不是一个确切的大小:每个显示器的像素大小不同).如果指定像素,则超过OS叠加的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是MacOS上呈现的字体以及差异的原因.要确定,请查看此页面,以便在呈现的页面中发现Helvetical vs Arial.如果您使用以下CSS,您的页面在Windows(Arial)上的呈现方式将与在MacOS(Helvetica)上的呈现方式不同:
input.text {
font-family: Helvetica, Arial, sans-serif;
}
但是如果你使用下面的代码,它在Windows(Arial)和MacOS(也是Arial)上看起来是相同的.除非安装了Windows字体,否则只有Linux看起来会有所不同.
input.text {
font-family: Arial, Helvetica, sans-serif;
}
如果使用等宽字体,即使指定字体本身,最终仍可能在渲染方面存在差异.Firefox中有一个隐藏得很好的错误,但是在我之前报道的其他一些浏览器上(博客文章解释了解决方案),但没有引起太多关注.
简单的解决方案是始终指定Courier New,即使您不关心字体.我不认为这是你的问题,正如你提到的Arial和Helvetica.
为什么这一切都麻烦,为什么不是一个标准呢？阅读这篇优秀的背景文章,了解为什么Windows认为将DPI提高30%更好.