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

【问题标题】：How can I use Helvetica Neue Condensed Bold in CSS?如何在 CSS 中使用 Helvetica Neue Condensed Bold？
【发布时间】：2011-08-02 12:29:48
【问题描述】：

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

我安装了 Helvetica Neue Condensed Bold：

谁能帮帮我？

【问题讨论】：

强相关：stackoverflow.com/questions/2969323/non-standard-fonts-in-web
相关graphicdesign.stackexchange.com/questions/8827/…

标签： css fonts

【解决方案1】：

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

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

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

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

编辑： MyFonts 在 Stock 中有 Helvetica neue，但显然没有网络许可证。查看this list of similar fonts，其中一些拥有网络许可证。另外，Ray Larabie 那里有一些不错的字体，有网络许可证，其中一些是免费的。

【讨论】：

【解决方案2】：

经过大量的摆弄，让它工作（仅在 Webkit 中测试）使用：

font-family: "HelveticaNeue-CondensedBold";

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

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

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

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

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

【讨论】：

@Radek 您知道，但是，只有在客户端计算机上安装了该特定字体时，这才有效？我得到了 Times New Roman 的小提琴 - 我至少会使用 Sans-Serif 作为最后的后备。
@Radek 但我真的不明白使用这个字体的意义——你可以放心地假设 95%-99% 的计算机没有安装这种字体。这仅适用于您的计算机吗？
任何 Mac 都可以，因此取决于您的站点，这可能是 90%。不过我同意，你不能保证字体会跨平台显示。
在 iOs5 和 iOs6 的 safari webviews 浏览器中也能很好地工作。非常感谢！
虽然font-family 通常不接受 PostScript 字体名称（因为我在 Firefox 中尝试使用另一种字体，但不起作用），@font-face { src: local(...) } does。这意味着您可以执行@font-face { font-family: Helvetica; font-weight: bold; src: local(HelveticaNeue-CondensedBold); } 之类的操作。

【解决方案3】：

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

fonts.com：将真实字体许可为来自 fonts.com 的网络字体。免费（带有徽章），每月 10 美元的 25 万次网页浏览量和 100 美元/月的 250 万次网页浏览量。您可以使用最昂贵的套餐将字体下载到桌面（但如果您使用的是 Mac，则您已经拥有它）。
myfonts.com / fontspring.com：从 fontspring.com 购买非常接近的替代品，例如 Nimbus Sans Novus D from MyFont（无限浏览量 160 美元）或 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 美元（网络，10k 浏览量）的价格获得它。无限浏览量的网站是 160 美元。我一直使用这种字体（即根本没有利用 Mac 内置的“NimbusSansNovusDBoldCondensed”），因为它导致了跨浏览器的设计更加统一。内置 HN 和 Nimbus Sans 在所有方面都非常相似，但点大小。 Nimbus 需要一些额外的点才能获得相同的尺寸匹配。

【讨论】：

非常非常好的发现。 Nimbus Sans 绝对比 Franklin Gothic 更接近。事实上，我将 Font Book 中的原始 Helvetica 版本与 Nimbus 字体并排比较，发现后者更清晰。他们是同卵双胞胎。

【解决方案4】：

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

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

但是 Opera 失败了。

【讨论】：

截至今天，除了 Firefox 之外，这将无法在任何地方使用。 developer.mozilla.org/en/docs/Web/CSS/font-stretch

【解决方案5】：

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

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

【讨论】：

感谢 Melros，遇到了同样的问题！
这是最好的答案。
对于浓缩黑只需更改font-weight: 900;