css - mozilla 的 arial 字体问题

Question

我需要你的帮助来解决一个非常奇怪的问题。 我们需要让“Arial”在所有浏览器中都 100% 相似。为此，我们使用了@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。 friend 们好心帮我找出问题所在。 谢谢

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)并明智地使用字体后备。