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

时间:2011-04-10 14:45:19

标签: css fonts

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

我安装了Helvetica Neue Condensed Bold: enter image description here

有人可以帮帮我吗?

5 个答案:

答案 0 :(得分:74)

经过大量的摆弄后,使用以下方法使其工作(仅在Webkit中测试)

font-family: "HelveticaNeue-CondensedBold";

字体拉伸在CSS2和2.1之间被删除了,虽然回到CSS3中,但只在IE9中支持(从未想过我能说出任何CSS道具!)

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

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

作为后备,否则其他浏览器可能会默认为serif,如果他们无法解决问题。

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

答案 1 :(得分:36)

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

所以这是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/

答案 2 :(得分:12)

如果有人还在寻找Helvetica Neue Condensed Bold,你基本上有两种选择。

  1. fonts.com :从fonts.com将真实字体许可为webfont。免费(带徽章),250k综合浏览量每月10美元,2.5M浏览量每月100美元。您可以使用最昂贵的计划将字体下载到桌面(但如果您使用的是Mac,则已经拥有它)。
  2. myfonts.com / fontspring.com :购买非常接近的替代方案,例如Nimbus Sans Novus D from MyFont(无限制的综合浏览量为$ 160)或Franklin Gothic FS Demi Condensed,来自fontspring.com(约21.95美元,平均一次性费用,无限制的综合浏览量)。在这两种情况下,您还可以下载桌面的字体,以便在Photoshop中使用它来进行比较。
  3. 一个非常便宜的折衷方案是从fontspring购买富兰克林,然后使用“HelveticaNeue-CondensedBold”作为CSS中的首选字体。

    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需要一些额外的点来获得相同的大小匹配。

答案 3 :(得分:4)

“Helvetica Neue Condensed Bold”与firefox合作:

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

但是Opera失败了。

答案 4 :(得分:3)

您必须将字体转换为Web字体,如以下SO问题所示:

但是,您可能会遇到版权问题:并非每种字体都允许以网络字体形式发布。检查字体许可证以查看是否允许。

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

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

编辑:MyFonts让Helvetica有了新的库存,但显然没有网络许可证。查看this list of similar fonts,其中一些人拥有网络许可。此外,Ray Larabie有一些很好的字体,有网络许可证,其中一些是免费的。