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

Question

让我举几个例子：

Firefox 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;                
}

您建议我使用什么来平衡字体差异？或者更好的是，使用“Web安全”字体的好方法是什么？这样的事情存在吗？

Answer 1

不幸的是，您不能只使用任何字体，转换它并让它在所有浏览器中都能正常运行。如果可以，我会喜欢它，但你不能。

获得良好结果的最佳选择是使用typekit或fontdeck等字体投放服务，这些服务提供专为跨浏览器投放而设计的字体，因此更有可能始终如一地呈现。尽管如此，您仍然可能会在浏览器和操作系统之间获得小的变化，这就是网络的本质。

但是在具体回答您的问题时，没有任何设置或变通方法可以使该字体始终显示。对于它的价值，我认为它们看起来都很好。

Answer 2

这取决于浏览器如何解释字体。我从来没有真正使用它，但是有一个名为fontsquirrel的网站，它将采用字体并将其分解为不同的字体扩展，以用于不同的浏览器。看看这个。 http://www.fontsquirrel.com/