Mozilla浏览器下Arial字体显示问题

Question

我需要您的帮助解决一个非常奇怪的问题。我们需要让“Arial”在所有浏览器中都完全相同。为此，我们使用了 @font-face，并为 Arial 使用了不同的文件名。在所有浏览器中都可以正常工作（每个像素都相同），但是在某些机器上表现不同.... 所有系统都具有相同的配置和浏览器版本。目前来看，问题似乎出现在 Mozilla 上。我已经尝试了一切，但没有结果。我使用了“Font Squirrel”转换字体（基本/最佳/专家）。以下是我的 CSS。

@font-face {
font-family: 'conduit_arial';
src: url('../Helper/Fonts/conduit_arial.eot');
src: url('../Helper/Fonts/conduit_arial.eot?#iefix') format('embedded-opentype'),
     url('../Helper/Fonts/conduit_arial.woff2') format('woff2'),
     url('../Helper/Fonts/conduit_arial.woff') format('woff'),
     url('../Helper/Fonts/conduit_arial.ttf') format('truetype'),
     url('../Helper/Fonts/conduit_arial.svg#conduit_arial') format('svg'); 
font-weight: normal;
font-style: normal;
}

我们在字体名称和文件名称上使用不同的名称，以便浏览器不会从系统字体中加载Arial字体。 朋友们，请帮助我确定问题所在。 谢谢

- ali khan

---

问题是字体在不同的机器上表现不同，但浏览器相同吗？还是字体根本没有加载，导致它变得不同？ - 97ldave

字体在不同的机器上表现不同，但是浏览器相同。 - ali khan

对于完全不显示的机器，您能否在开发者工具的网络选项卡中看到错误？如果是这样，错误是什么？对于字符之间有额外空格的情况，这可能只是分辨率/机器渲染问题。 - 97ldave

所有机器上都有相同的分辨率 :( - ali khan

现在您的声望已经达到11，您可以编辑帖子以添加图片。 - Tom Robinson

Answer 1

我很抱歉，这不可能达到100%。让我解释一下原因：

1. Arial可能是最广泛使用的字体。但这并不让我们感到安全。

2. 像你所做的那样，你可以使用font-face和一个不同的字体名称来确保加载相同的字体。现在你确定了吗？并不完全确定，因为还有一些浏览器可能不支持font-face...

3. 假设你不需要支持早于ie9的浏览器。现在你必须确定...还是不行！不同的浏览器和不同的操作系统处理字体的方式不同。Windows拥有ClearType引擎进行渲染，它与OS X的引擎不同（更多信息请参见：http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/）

4. 假设您只需要支持Windows 7和8。现在你确定了吗？还是不行！不同的浏览器可能以不同的方式呈现字体。例如，旧版本的Chrome在Windows上的反锯齿效果并不好。它们的字体更锐利但更丑陋！

我的建议：正如你所看到的，有很多事情是你无法控制的...但是，还有一些好的实践方法可以遵循，以减少问题。尽量给你的字体精确的像素尺寸，即使你使用 em，特别是对于较小的字体大小。例如，使用 0.875em 而不是 0.9em，避免使用专为印刷设计的字体，特别是在内容中（如常用的 Helvetica），并明智地使用字体回退。

- Vandervals