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

How can I use Helvetica Neue Condensed Bold in CSS?

提问by Rich Bradshaw

I want to use Helvetica Neue Condensed Bold on my webpage but it doesn't seem to be working. I have tried this: http://jsfiddle.net/ndFTL/but it does not work, it simply shows up as Helvetica Neue Bold.

我想在我的网页上使用 Helvetica Neue Condensed Bold，但它似乎不起作用。我试过这个：http: //jsfiddle.net/ndFTL/但它不起作用，它只是显示为 Helvetica Neue Bold。

I have Helvetica Neue Condensed Bold installed:

我安装了 Helvetica Neue Condensed Bold：

Could anyone please help me out?

有人可以帮我吗？

回答by Rich Bradshaw

After a lot of fiddling, got it working (only tested in Webkit) using:

经过大量摆弄后，使用以下方法使其工作（仅在 Webkit 中测试）：

font-family: "HelveticaNeue-CondensedBold";

font-stretch was dropped between CSS2 and 2.1, though is back in CSS3, but is only supported in IE9 (never thought I'd be able to say that about any CSS prop!)

font-stretch 在 CSS2 和 2.1 之间被删除，虽然在 CSS3 中又回来了，但只在 IE9 中受支持（从没想过我能对任何 CSS 道具这么说！）

This works because I'm using the postscript name (find the font in Font Book, hit cmd+I), which is non-standard behaviour. It's probably worth using:

这是有效的，因为我使用的是 postscript 名称（在 Font Book 中找到字体，点击cmd+ I），这是非标准行为。它可能值得使用：

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

As a fallback, else other browsers might default to serif if they can't work it out.

作为后备，如果其他浏览器无法解决，其他浏览器可能会默认为衬线。

Demo: http://jsfiddle.net/ndFTL/12/

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

回答by Melros

I had the same problem and trouble getting it to work on all browsers.

我遇到了同样的问题，并且无法在所有浏览器上运行它。

So this is the best font stack for Helvetica Neue Condensed Bold I could find:

所以这是我能找到的 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;

Even more stacks to find at:

更多堆栈可在以下位置找到：

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

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

回答by Greg

In case anyone is still looking for Helvetica Neue Condensed Bold, you essentially have two options.

如果有人仍在寻找 Helvetica Neue Condensed Bold，您基本上有两种选择。

1. fonts.com: License the real font as a webfont from fonts.com. Free (with a badge), $10/month for 250k pageviews and $100/month for 2.5M pageviews. You can download the font to your desktop with the most expensive plan (but if you're on a Mac you already have it).
2. myfonts.com/ fontspring.com: Buy a pretty close alternative like Nimbus Sans Novus D from MyFont($160 for unlimited pageviews), or Franklin Gothic FS Demi Condensed, from fontspring.com (about $21.95, flat one time fee with unlimited pageviews). In both cases you also get to download the font for your desktop so you can use it in Photoshop for comps.

1. fonts.com：从 fonts.com 将真实字体许可为 webfont。免费（带徽章），25 万次浏览量每月 10 美元，250 万次浏览量每月 100 美元。您可以使用最昂贵的计划将字体下载到桌面（但如果您使用的是 Mac，您已经拥有它）。
2. myfonts.com/ fontspring.com：从 MyFont购买非常接近的替代品，例如Nimbus Sans Novus D（无限浏览量 160 美元），或来自 fontspring.com 的Franklin Gothic FS Demi Condensed（约 21.95 美元，一次性固定费用，无限浏览量） . 在这两种情况下，您还可以下载桌面字体，以便在 Photoshop 中使用它进行合成。

A very cheap compromise is to buy Franklin from fontspring and then use "HelveticaNeue-CondensedBold" as the preferred font in your CSS.

一个非常便宜的折衷方案是从 fontspring 购买 Franklin，然后在 CSS 中使用“HelveticaNeue-CondensedBold”作为首选字体。

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

Then if a Mac user loads your site they see Helvetica Neue, but if they're on another platform they see Franklin.

然后，如果 Mac 用户加载您的网站，他们会看到 Helvetica Neue，但如果他们在另一个平台上，他们会看到 Franklin。

UPDATE: I discovered a much closer match to Helvetica Neue Condensed Bold is Nimbus Sans Novus D Condensed bold. In fact, it is also derived from Helvetica. You can get it at MyFonts.com for $20 (desktop) and $20 (web, 10k pageviews). Web with unlimited pageviews is $160. I have used this font throughout (i.e. NOT exploiting the Mac's built in "NimbusSansNovusDBoldCondensed" at all) because it leads to a design that is more uniform across browsers. Built in HN and Nimbus Sans are very similar in all respects but point size. Nimbus needs a few extra points to get an identical size match.

更新：我发现与 Helvetica Neue Condensed Bold 更接近的匹配是 Nimbus Sans Novus D Condensed bold。事实上，它也是源自 Helvetica。您可以在 MyFonts.com 上以 20 美元（桌面）和 20 美元（网络，10k 浏览量）的价格购买。具有无限浏览量的 Web 为 160 美元。我一直在使用这种字体（即根本没有利用 Mac 内置的“NimbusSansNovusDBoldCondensed”），因为它导致设计在浏览器之间更加统一。内置 HN 和 Nimbus Sans 在所有方面都非常相似，但点大小不同。Nimbus 需要一些额外的点来获得相同大小的匹配。

回答by Lancee Ly

"Helvetica Neue Condensed Bold" get working with firefox:

“Helvetica Neue Condensed Bold”开始使用 Firefox：

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

But it's fail with Opera.

但它在 Opera 上失败了。

回答by Pekka

You would have to turn your font into a web font as shown in these SO questions:

您必须将字体转换为网络字体，如这些 SO 问题所示：

• Non-Standard fonts in web?
• How to add some non-standard font to a website?

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

However, you may run into copyright issues with this: Not every font allows distribution as a web font. Check your font license to see whether it is allowed.

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

One of the easiest free and legal ways to use web fonts is Google Web Fonts. However, sadly, they don't have Helvetica Neue in their portfolio.

使用网络字体的最简单的免费和合法方式之一是Google 网络字体。然而，遗憾的是，他们的投资组合中没有 Helvetica Neue。

One of the easiest non-free and legal ways is to purchase the font from a foundry that offers web licenses. I happen to know that the myFontsfoundry does this; they even give you a full package with all the JavaScript and CSS pre-prepared. I'm sure other foundries do the same.

最简单的非免费和合法方式之一是从提供网络许可证的代工厂购买字体。我碰巧知道myFonts代工厂是这样做的；他们甚至会给你一个完整的包，其中包含所有预先准备好的 JavaScript 和 CSS。我相信其他代工厂也是如此。

Edit:MyFonts have Helvetica neue in Stock, but apparently not with a web license. Check out this list of similar fontsof which some have a web license. Also, Ray Larabiehas some nice fonts there, with web licenses, some of them are free.

编辑：MyFonts 在 Stock 中有 Helvetica neue，但显然没有网络许可证。查看此类似字体列表，其中一些字体具有网络许可证。此外，Ray Larabie有一些不错的字体，带有网络许可证，其中一些是免费的。