Chrome 中的 Arial答案

【问题标题】：Arial in ChromeChrome 中的 Arial
【发布时间】：2012-04-30 02:50:32
【问题描述】：

我对 Chrome/Chromium 中的 Arial（可能还有其他字体）有疑问。当我使用 font-family: Arial; 时看起来不错但是当我通过 @font-face 包含 Arial 字体文件时，它看起来不一样了！为什么会这样？我该怎么做才能让它们看起来一样？ Chrome 究竟在哪里使用它的字体？这是我的css

@font-face {
    font-family: 'My Arial';
    src: url(Arial.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    padding: 20px;
    font-size: 16px;
}

body#native {
    font-family: Arial;
}

body#fontface {
    font-family: 'My Arial';
}

这是渲染的文本：

对不起，我的英语不是我的母语。

【问题讨论】：

@noHDD 在 Debian Squeeze 和 Arch Linux 上都有这个问题
我猜这是系统 OpenType 文件 (.otf) 和包含字体的 Truetype 文件 (.ttf) 之间的暗示不同。你能仔细检查一下系统文件是什么格式的吗？
@Sparky672 我的样本不是最好的，但您仍然可以看到问题。实际上这个问题在数字和西里尔文中变得更加明显。如果你愿意，我可以再举一个例子。
@Robin find / -iname "*arial*" 发现的唯一 arial 字体是 truetype。而fc-match -v Arial | grep fontformat 的输出是 fontformat: "TrueType"(s)
我看到了细微的差别。然而，我的观点是：大量的努力值得小小的最终结果吗？ 每个浏览器处理字体的方式都略有不同，并且还取决于操作系统及其安装的字体。字体、浏览器、操作系统等的各种组合实际上是无限的。

标签： css google-chrome fonts font-face chromium

【解决方案1】：

您使用@font-face 包含的Arial 文件是否与您系统中的完全相同的文件，还是您从其他地方获得的？导致差异的文件可能存在差异。如果不是，那么正如@Sparky672 在他最后的评论中所说，您无能为力，这只是浏览器渲染问题。

另外，出于好奇，您为什么要在 @font-face 中包含 Arial，因为它几乎在每个系统上都可用？

【讨论】：

我使用了系统中的 Arial 文件，但是我尝试了从 Internet 下载的文件并得到了相同的结果。 Arial 并非在每个系统上都可用，当我安装它们时，它不在 Debian 或 Arch 上。
那么在呈现原生字体与使用@font-face 的字体方面肯定是有区别的。

【解决方案2】：

我经常使用@font-face，而且不同的浏览器呈现它的方式总是存在差异的。对于某些字体，它变得非常丑陋，在您的特定情况下，我想说差异是微不足道的，其他一切就像 Sparky672 已经评论的那样。

如果您绝对必须在所有系统上进行像素精确的相同渲染，也许一些基于 javascript 的解决方案可能会有所帮助，请检查：

https://stackoverflow.com/a/692994/525445

同样，如果这是我的网站在你的屏幕截图中，我会非常满意它的外观。

这只是网络的本质，不是每个人都会看到相同的东西，有不同的显示器具有不同的颜色设置、不同的分辨率、有些人放大文本等等。

顺便提一下，您可以使用 JavaScript 检测 Chrome，然后应用一些特定的 CSS 对其进行调整。

【讨论】：