logo标签列表

CSS字体“Helvetica Neue”

cssfonts
46

我经常看到网站使用“Helvetica Neue”字体。这种字体安全可靠，像Arial一样吗？或者浏览器渲染它会有问题，许多机器上没有这种字体？谢谢。

1
注意，iOS 7和OS X 10.9现在在“Helvetica Neue”中包括Light和Ultra Thin，而以前版本的“HelveticaNeue-Light”、“Helvetica Neue Light”缺少这些字重。 - Josh Hunt
嗯，我想知道：还有谁停止使用这种字体了吗？ - Milche Patern
我想知道为什么Helvetica字体中使用的是“neue”而不是“new”。 - Timo
5个回答
82

这是Mac默认的字体，但在PC上很少见。由于它不是技术上的Web安全字体，有些人可能会有它，而有些人可能没有。如果你想使用这样的字体，而又不想使用@font-face，你可能需要以多种不同的方式书写它，因为它可能不适用于所有人。

我喜欢使用一个字体堆栈，像这样涵盖了所有基础:

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  Helvetica, Arial, "Lucida Grande", sans-serif;

这个推荐的字体族堆栈在这个 CSS-Tricks 片段中进一步描述 Better Helvetica，该片段也使用了 font-weight: 300;。

39

这种字体并非所有设备都有标准安装。一些Mac电脑上默认安装，但在PC和移动设备上很少见。

如果你想在所有设备上使用此字体，请使用@font-face声明在你的CSS中链接到你所希望使用的字体。

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

摘自css3.info

27
如果您进行网页嵌入，请注意版权问题。确保您购买的许可证包括网页嵌入。 - mingos
19

Helvetica Neue是一款收费字体，所以您不应该使用@font-face来引用它，否则您将会免费分发受版权保护的字体。虽然Helvetica Neue已经包含在Mac系统中，但却没有在Windows/Linux系统中包含，因此您的许多用户可能没有安装这个字体。无论如何，您可以使用“Arial Narrow”作为Windows替代字体，它是Helvetica Neue在Windows系统中的等价字体。

2
2
需要注意的是，只有在通过font-face在网站上使用字体的合法权利（许可证）时，您才能使用字体生成器。 Helvetica是一种付费字体，因此您需要购买许可证才能使用它。 - LocalPCGuy
1
没错。Fontsquirrel实际上会阻止您处理Helvetica字体。请参见https://typekit.com/lists/alternatives-to-helvetica以获取其他选项。 - Homer6
现在使用图片并不是唯一的选择了：http://css-tricks.com/adding-stroke-to-web-text/ - PhilT
这个答案已经不再适用了。现在大多数浏览器都支持抗锯齿功能。https://devhints.io/css-antialias - Maciej Paprocki
1
大多数Windows用户的计算机上都没有这个字体。此外，您不能只是将其提交到您的服务器并使用font-face调用它，因为这不是一个免费的字体... 最后要回答还没有提到的问题，Helvetica和Helvetica Neue在屏幕上呈现效果不好，除非它们有一个非常大的字体大小。你会发现很多页面使用这种字体，在所有这些页面中，你会看到一行文本的顶部边框看起来波浪形，并且有些字母看起来比其他字母高。我认为这是你不应该使用它的主要原因。有其他选项供您使用，例如Open Sans。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接