如何在CSS中使用Helvetica Neue Condensed Bold字体？

Question

我想在网页上使用Helvetica Neue Condensed Bold字体，但似乎无法正常工作。我尝试了这个：http://jsfiddle.net/ndFTL/，但它并不起作用，只显示为Helvetica Neue Bold字体。

我已经安装了Helvetica Neue Condensed Bold字体： 请问有谁能帮助我解决这个问题吗？

- user142019

---

强相关：https://dev59.com/YHA85IYBdhLWcg3wCfBZ - Pekka

相关内容：http://graphicdesign.stackexchange.com/questions/8827/helvetica-neue-equivalent-on-google-fonts - Adriano

Answer 1

经过一番摸索，我通过以下方法让它运行起来了（仅在Webkit中测试）：

font-family: "HelveticaNeue-CondensedBold";

font-stretch在CSS2和2.1之间被删除了，但在CSS3中又回来了，但只有IE9支持（从未想过任何CSS属性会这样！）

这行得通是因为我使用了postscript名称（在Font Book中找到字体，按cmd+I），这是非标准行为。最好还是使用：

font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";

为了防止其他浏览器无法识别，然后默认使用衬线字体。

演示：http://jsfiddle.net/ndFTL/12/

- Rich Bradshaw

---

你知道吗，这只有当客户端的机器上安装了特定字体时才有效？我在这个 fiddle 中使用 Times New Roman 字体，所以我建议至少使用 Sans-Serif 作为最后的备选字体。 - Pekka

@Radek，但我真的看不出使用它的意义在哪里 - 你可以安全地假设 95% -99% 的计算机没有安装这种字体。这是只针对你自己的电脑吗？ - Pekka

任何Mac都可以，因此根据您的网站，这可能达到90％。不过我同意，无法保证字体在各个平台上都能显示。 - Rich Bradshaw

在iOS5和iOS6的Safari WebViews浏览器中表现良好。非常感谢！ - Guillaume Gendre

尽管在Firefox中尝试了另一种字体的PostScript字体名称（不起作用），但通常情况下font-family不接受PostScript字体名称。然而，@font-face { src: local(...) }却能够实现。这意味着您可以执行类似于@font-face { font-family: Helvetica; font-weight: bold; src: local(HelveticaNeue-CondensedBold); }的操作。 - Thai

Answer 2

我曾经遇到了同样的问题，并且很难在所有浏览器上都使其正常工作。

所以这是我找到的Helvetica Neue Condensed Bold最佳字体堆叠：

font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;

更多的字体堆栈可以在以下网址找到：

http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/

- Melros

---

这是这里最好的答案。 - Chuck Le Butt

对于 Condensed Black 只需更改 font-weight: 900; - Stefan

Answer 3

如果还有人在寻找Helvetica Neue Condensed Bold字体，你基本上有两个选择：

1. fonts.com：从fonts.com许可真正的Web字体。免费（带徽章），$10/月可获取250k页面浏览量，$100/月可获取250万页面浏览量。你可以使用最昂贵的计划将字体下载到桌面上（但如果你使用Mac，你已经拥有它了）。
2. myfonts.com / fontspring.com：购买一个相似度较高的替代字体，如MyFont的Nimbus Sans Novus D（$160无限页面浏览量），或从fontspring.com购买Franklin Gothic FS Demi Condensed（约$21.95，一次性付费，无限页面浏览量）。在这两种情况下，你还可以下载字体到你的桌面上，以便在Photoshop中进行设计。

一个非常便宜的折中办法是从fontspring购买Franklin字体，然后在CSS中将"HelveticaNeue-CondensedBold"设置为首选字体。

h2 {"HelveticaNeue-CondensedBold", "FranklinGothicFSDemiCondensed", Arial, sans-serif;}

如果一个Mac用户加载您的站点，他们将看到Helvetica Neue；但是，如果他们使用另一种平台，则会看到Franklin。

更新：我发现与Helvetica Neue Condensed Bold更接近的匹配是Nimbus Sans Novus D Condensed bold。事实上，它也是由Helvetica衍生出来的。您可以在MyFonts.com上以20美元（桌面版）和20美元（Web，每1万个页面浏览次数）的价格购买。带有无限页浏览次数的Web价格为160美元。我已经在整个设计中使用了这种字体（即根本没有利用Mac的内置“NimbusSansNovusDBoldCondensed”），因为它使得跨浏览器的设计更加统一。内置的HN和Nimbus Sans在所有方面都非常相似，但是点大小不同。需要几个额外的点才能获得完全匹配的尺寸。

- Greg

---

真的是一个很好的发现。Nimbus Sans 明显比 Franklin Gothic 更接近原版 Helvetica 字体。实际上，我在 Font Book 中将原版 Helvetica 字体和 Nimbus 字体并排对比，发现后者更加清晰。它们几乎完全一样。 - Aquarelle

Answer 4

"Helvetica Neue Condensed Bold" 在 Firefox 中的使用：

.class {
  font-family: "Helvetica Neue";
  font-weight: bold;
  font-stretch: condensed;
}

但是在Opera中失败了。

- Lancee Ly

---

今天起，除了Firefox之外，这在任何地方都不起作用。https://developer.mozilla.org/en/docs/Web/CSS/font-stretch - Aniket Suryavanshi

Answer 5

您需要将字体转换为Web字体，如以下SO问题所示：

• 网页中的非标准字体？
• 如何在网站上添加一些非标准字体？

但是，您可能会遇到版权问题：并非每种字体都允许作为Web字体分发。请检查您的字体许可证以确定是否被允许。

使用Web字体最简单、免费和合法的方法之一是使用Google Web Fonts。然而，不幸的是，他们的产品库中没有Helvetica Neue字体。

最简单的非免费和合法方法是从提供Web许可证的铸造厂购买字体。我碰巧知道myFonts铸造厂就是这样做的；他们甚至给你一个包含所有JavaScript和CSS预处理的完整包。我相信其他铸造厂也会这样做。 编辑：MyFonts有Helvetica Neue库存，但显然没有Web许可证。查看类似字体列表，其中一些具有Web许可证。此外，Ray Larabie在那里有一些不错的字体，带有Web许可证，其中一些是免费的。

- Pekka