css - 使用 css font-face 的自定义字体，在不同的浏览器上有所不同

Question

我举几个例子:

火狐 13:

Chrome(最新):

如您所见，在 Firefox 中，字体显得更平滑，而在 Chrome 中，字体显得更断断续续。我很好奇为什么会发生这种情况，以及我可以采取哪些步骤来平衡我的用户体验。

我使用的是 .otf 字体:

HelveticaNeueLTPro-LtCn.otf

并使用以下 CSS 规则来应用此自定义字体:

@font-face {
    font-family: "Helvetica Neue LTPro";
    src: url("/Public/assets/fonts/HelveticaNeueLTPro-LtCn.otf");
}

a {
    color: #665548;                
    display: block;
    font-family: "Helvetica Neue LTPro";
    font-size: 15px;
    padding: 17px;                
}

您建议我使用什么来消除字体差异？或者更好的是，使用“网络安全”字体的最佳做法是什么？有这种东西吗？

Answer 1

不幸的是，您不能只采用任何字体，将其转换并使其在所有浏览器中都能正常工作。如果可以，我会很高兴，但你不能。

获得良好结果的最佳选择是使用字体传送服务，例如 typekit或 fontdeck提供专为跨浏览器交付而设计的字体，因此更有可能呈现一致的效果。不过，您仍然可能会在浏览器和操作系统之间出现细微差异，这就是网络的本质。

但是在具体回答您的问题时，没有任何设置或解决方法可以使该字体始终如一地显示。对于它的值(value)，我认为它们看起来都不错。