CSS 字体“Helvetica Neue”

Question

我经常看到使用字体“Helvetica Neue”的网站。这种字体使用安全吗，例如。宋体？或者浏览器在渲染它时遇到问题，或者没有多少机器有这种字体？谢谢。

Answer 1

它是 Mac 上的默认字体，但在 PC 上很少见。 由于它在技术上不是网络安全的，因此有些人可能拥有它，有些人可能没有。 如果你想使用这样的字体，而不使用@font-face，你可能想用几种不同的方式写出来，因为它可能并不适合每个人。

我喜欢使用涉及所有基础的字体堆栈，如下所示：

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

这个推荐的字体系列堆栈在这个 CSS-Tricks 片段Better Helvetica 中得到了进一步描述，它也使用了

font-weight: 300;

。

Answer 2

此字体并非所有设备上的标准字体。它默认安装在某些 Mac 上，但很少安装在 PC 和移动设备上。

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

@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

Answer 3

Helvetica Neue 是一种付费字体，因此您不应该@font-face 它，因为您可以自由分发受版权保护的字体。它包含在 Mac 系统中，但不包含在 Windows/Linux 系统中，所以是的，很多用户不会安装它。无论如何，您可以使用“Arial Narrow”作为 Windows 替代品，这是它的 Windows 等效项。

Answer 4

您可以使用 http://www.fontsquirrel.com/fontface/generator 为网站编码任何字体。它将生成包含字体的代码。

我并不真正将它用于超过 30px 的字体。它们作为图像看起来要好得多（因为图像是抗锯齿的，并且某些浏览器不会在浏览器中抗锯齿字体）。

参见：http://www.truetype-typography.com/ttalias.htm

希望有帮助...

Answer 5

大多数 Windows 用户的计算机上没有该字体。另外，您不能只是将其提交到服务器并使用 font-face 调用它，因为这不是免费字体...

最后但并非最不重要的一点是，回答尚未有人提到的问题，Helvetica 和 Helvetica Neue 在屏幕上渲染效果不佳，除非它们有一个非常大的

font-size

。您会发现很多页面都使用这种字体，并且在所有页面中您都会看到一行文本的顶部边框看起来呈波浪状，并且某些字母看起来比其他字母更高。在我看来，这是您不应该使用它的主要原因。还有其他选项供您使用，例如 Open Sans。

Answer 6

参考：https://www.cdnfonts.com/helvetica-neue-55.font

<link href="https://fonts.cdnfonts.com/css/helvetica-neue-55" rel="stylesheet">
<style>
font-family: 'Helvetica Neue', sans-serif;
</style>

或者

<style>
 @import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');
 font-family: 'Helvetica Neue', sans-serif;
</style>