1

我对 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';
}

这是渲染的文本：

这是图片.

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

4

2 回答 2

1

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

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

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

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

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

仅提及该选项，您可以使用 JavaScript 检测 Chrome，然后应用一些特定的 CSS 来调整它。

于 2012-04-18T18:28:51.367 回答
0

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

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

于 2012-04-18T17:24:37.977 回答