【发布时间】:2011-07-11 10:25:32
【问题描述】:
我使用的是大 Arial 字体 - 40px Arial Bold。
我注意到它在 Windows 的 Chrome/Firefox 浏览器中无法准确呈现。它很接近,但它有微妙的不同。将字体大小增加到 46px 会使事情变得更好。
我猜这是一个像素级渲染的东西,那么 Arial 字体的“正确”像素大小是多少?
【问题讨论】:
-
好问题,但我不确定是否有明确的答案。
标签: css
我使用的是大 Arial 字体 - 40px Arial Bold。
我注意到它在 Windows 的 Chrome/Firefox 浏览器中无法准确呈现。它很接近,但它有微妙的不同。将字体大小增加到 46px 会使事情变得更好。
我猜这是一个像素级渲染的东西,那么 Arial 字体的“正确”像素大小是多少?
【问题讨论】:
标签: css
定义“准确渲染”?您的意思是它以不同方式 呈现给其他应用吗?但如果是这样,哪一个是真正准确的?
如果你真的很幸运,你可能会让给定平台上的所有浏览器呈现几乎相同的渲染,因为你似乎在 46px 上进行了管理,但它肯定不是给定的,就像你在 40px 上发现的那样。
但是,即使您确实设法在 Windows 上的所有浏览器中达到最佳效果,如果您将相同的页面加载到 Mac 或 Linux PC 上的任何浏览器中,您将获得完全不同的效果,更不用说它在手机或平板电脑上的外观。
你问它是否是像素级的东西。字体实际上是在子像素的基础上渲染的(有关更多信息,请参阅http://en.wikipedia.org/wiki/Subpixel_rendering),这意味着您应该获得非常高的准确度。但是,有许多不同的字体渲染方法,这可能会导致应用程序和平台之间存在显着差异。
大多数 Windows 应用程序会将其字体呈现推迟到 Windows API。然而,像网络浏览器这样的应用程序需要对其字体渲染进行更大的控制,而不是操作系统的 API 所能提供的,因此它们必须实现自己的。这显然意味着浏览器的字体渲染与其他应用程序的字体渲染可能存在差异。
尤其如此,因为微软在字体渲染领域拥有多项专利,这意味着 Firefox 和 Chrome 无法在其渲染中使用某些技术(无需支付版税)。苹果在这方面也有专利。这些技术很容易避免,但又意味着 Firefox 的字体渲染与 Windows 略有不同。没有错;只是不同。
最后,这也归结为一个选择问题。如果将 Apple Mac 与 Windows PC 进行比较,很容易发现 Mac 的字体渲染与 PC 截然不同。 Mac 上的文本看起来更模糊但更平滑,而 PC 文本更清晰但可能有更多锯齿状边缘。这些差异取决于操作系统设计人员在亚像素渲染级别上所做的选择。它们看起来不同,但它们都是有效的选择,可以大力捍卫。 Firefox 在这方面也做出了自己的选择。
底线?请不要试图在网络浏览器中坚持像素完美的字体渲染。
【讨论】: