css - Arial 字体大小

Question

我使用的是大号 Arial 字体 - 40px Arial Bold。

我注意到它在 Windows 的 Chrome/Firefox 浏览器中无法准确呈现。它很接近，但有微妙的不同。将字体大小增加到 46px 会让事情变得更好。

我猜这是像素级渲染，那么 Arial 字体的“正确”像素大小是多少？

Answer 1

定义“准确呈现”？您是说它的呈现方式与其他应用不同吗？但如果是这样，哪一个是真正准确的？

如果您真的很幸运，您可能会让给定平台上的所有浏览器呈现几乎相同的效果，就像您在 46px 时所管理的那样，但它肯定不是给定的，就像您在 40px 时发现的那样。

但即使您确实设法在 Windows 上的所有浏览器中都达到了最佳效果，如果您将同一页面加载到 Mac 或 Linux PC 上的任何浏览器中，您将获得完全不同的效果，更不用说它在手机或平板电脑上的显示效果。

你问是不是像素级的东西。字体实际上是在子像素的基础上呈现的(有关更多信息，请参见 http://en.wikipedia.org/wiki/Subpixel_rendering)，这意味着您应该获得非常高的准确性。然而，有许多不同的字体呈现方法，这可能会导致应用和平台之间存在显着差异。

大多数 Windows 应用程序会将其字体渲染推迟到 Windows API。然而，Web 浏览器等应用程序需要对其字体渲染进行比操作系统 API 所能提供的更大的控制，因此他们必须实现自己的。这显然意味着浏览器的字体渲染与其他应用程序的字体渲染可能存在差异。

尤其如此，因为微软在字体渲染领域拥有多项专利，这意味着 Firefox 和 Chrome 无法在渲染中使用某些技术(不支付版税)。苹果在这方面也有专利。这些技术很容易避免，但再次意味着 Firefox 的字体呈现与 Windows 的字体呈现有细微差别。没有错;只是不同而已。

最后，这也归结为一个选择问题。如果将 Apple Mac 与 Windows PC 进行比较，很容易发现 Mac 的字体渲染与 PC 截然不同。 Mac 上的文本往往看起来更模糊但更平滑，而 PC 文本更清晰但可能有更多锯齿状边缘。这些差异取决于操作系统设计人员在亚像素渲染级别所做的选择。它们看起来不同，但它们都是有效的选择，可以大力捍卫。 Firefox在这方面也做出了自己的选择。

底线？请甚至不要尝试在 Web 浏览器中坚持像素完美的字体呈现。