在网站中使用Helvetica Neue

23

通常情况下,我在一些网站中使用"Helvetica Neue"字体,但是在查看其他网站时,我发现有些网站使用"HelveticaNeue-Light"、"Helvetica Neue Light"、"Helvetica Neue"

这种方式参考Helvetica Neue有什么原因吗?还是我应该坚持使用我平常使用的方式呢?

3个回答

41

我建议阅读Chris Coyier在CSS Tricks上发表的文章“Better Helvetica”:

http://css-tricks.com/snippets/css/better-helvetica/

他主要推荐以下声明来覆盖所有情况:

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}

谢谢!是的,我注意到他的文章并想知道为什么他以那种方式引用Helvetica Neue。 - user1505209
1
@BillyMoat,为什么有些字体名称用引号括起来,而有些则没有?这是有意为之吗? - Ĭsααc tիε βöss
2
@Ĭsααctիεβöss 这只适用于那些名称中有空格的情况。 - Julix

19
他们采用了“散弹枪”方法来引用字体。浏览器将尝试将每个字体名称与用户机器上安装的任何字体进行匹配(按照它们被列出的顺序)。
在您的示例中,首先尝试使用“HelveticaNeue-Light”,如果此字体变体不可用,则浏览器将尝试使用“Helvetica Neue Light”,最后是“Helvetica Neue”。
据我所知,“Helvetica Neue”不被认为是“网络安全字体”,这意味着您不能指望它被安装在您的整个用户群体中。通常将“衬线”或“无衬线”定义为最终默认位置。
为了使用不是“网络安全”的字体,您需要使用一种称为字体嵌入的技术。嵌入的字体不需要安装在用户计算机上,而是作为页面的一部分下载。请注意,这会增加总负载(就像图像一样),并可能影响页面加载时间。
一个非常好的、带有开源许可证的免费字体资源是Google Fonts。(在使用之前仍需检查各自的许可证。)每个字体都有下载链接和嵌入网站的说明。

是的,我不认为它是一个网页安全字体,但它是一个很棒的字体。有没有一个地方可以下载网络字体和@font-face套件?或者你必须拥有许可证? - user1505209
8
Helvetica Neue在Linux和Windows中都没有。最安全的做法是使用完整的字体栈:font-family: "Helvetica Neue", Helvetica, Arial, sans-serif - Marcelo De Polli
2
Helvetica Neue是需要许可的字体。请注意,许多“Web字体”购买都有对字体“查看”次数的限制。这可以按月计算或总计算。如果您拥有高流量网站,这可能会变得异常昂贵:http://www.linotype.com/1266/NeueHelvetica-family.html?site=webfonts&format=ot-cff&branding=pro。但是,如果您想要一个免费的替代方案,您可以尝试使用Liberation Sans:http://graphicdesign.stackexchange.com/a/15464。 - haxxxton
另外我想提一下,现在你可以使用@font-family来包含“自定义”字体。 - Julian F. Weinert

0
假设您已经引用并正确地将字体集成到您的网站中(可能使用@font-face工具包),那么只需按照您所做的方式引用您的字体即可。假定这样做是为了在某些浏览器无法正确呈现字体时有备选方案。

我还没有将Helvetica Neue添加为@font-face套件。如果我这样做会更好吗? - user1505209
是的,你需要这样做。Helvetica不是Web标准字体,这意味着它在许多浏览器中无法渲染。你应该购买该字体的许可证并生成一个@font-face套件。尽管有些字体实际上已被其创建者限制为不能转换为Web字体。 - Andrew Morris
没有人这样做,因为网页许可证的价格约为1000美元。最好使用另一种字体作为备用或完全不同的字体。除非你正在开发一个真正大而有价值的网站。 - actimel
是的,我知道,它们的价格太贵了,特别是如果你不是一家企业。我可能认为他所问的是为什么会引用它,并以那种方式编写,而不是回退是什么。 - Andrew Morris

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接