代码片段 → CSS → 更好的 Helvetica

更好的 Helvetica

Avatar of Chris Coyier
Chris Coyier 于 
body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

最好还是使用你能找到的最棒的 Helvetica……

嘘！创建一个 DigitalOcean 帐户，获得 $200 的免费积分 用于云托管和服务。

评论

  1. ev4n
    评论永久链接#

    太棒了，谢谢 ：D

    回复
  2. Nic Brownlee
    评论永久链接#

    很酷，我想我会用其中一些，
    谢谢 Chris

    回复
  3. Metin
    评论永久链接#

    完美！

    回复
  4. Rob Cubbon
    评论永久链接#

    刚用了这个。你永远不知道谁的电脑上安装了 Helvetica Neue！

    回复
  5. Andy Griffiths
    评论永久链接#

    使用像这样从完美到零降级的字体栈是一个好主意。

    回复
  6. nathan
    评论永久链接#

    嗯，不错，它非常有用

    回复
  7. Ryan bollenbach
    评论永久链接#

    非常酷，这将很有用。

    回复
  8. MK3Y
    评论永久链接#

    完美！喜欢这个，非常有用。我爱 Helvetica。

    回复
  9. David
    评论永久链接#

    是的，很棒的小片段。我正在搜索有关 Helvetica 的网站建议。

    回复
  10. fraser peek
    评论永久链接#

    嘿，这真棒……虽然它似乎在 Safari 或 Chrome 中不起作用……它在 Firefox 中看起来很棒……但在其他两个中没有……你知道为什么吗？

    回复
  11. Per
    评论永久链接#

    嘿。我知道这有点晚了。但是你对 Verdana 字体有任何优化技巧吗？或者只有 Helvetica 你可以这样优化吗？

    回复
    • dozza
      评论永久链接#

      Verdana 字体栈 在这里，以及许多其他字体，以及最好的已安装字体调查。

  12. Kiyan
    评论永久链接#

    很高兴知道它。

    回复
  13. Andrew
    评论永久链接#

    可能有点晚了（从这个故事的发布时间算起），但我喜欢在我的栈中加入“Liberation Sans”。

    它包含在 Red Hat、Fedora、Ubuntu（以及更多）中，但是据我所知，它看起来并不完全像 Arial/Helvetica。

    我从未将 Helvetica Neue 放入我的栈中；我通常使用 Helvetica、Arial、“Liberation Sans”，sans-serif。但是我可能会考虑使用它。:)

    回复
  14. Flaviu
    评论永久链接#

    你不能使用@font-face 并将所有 Helvetica 字体族包含到你的网站上吗？

    当然，我不确定 Helvetica 字体族是否可以在没有许可的情况下自由使用。

    回复
    • JP
      评论永久链接#

      据我所知，Helvetica Neue 可以转换为 Web 字体（我使用 Font Squirrel），只要这些文件不能在桌面使用即可。我阅读了 Mac 上安装的 Helvetica Neue 字体上的许可，它基本上说该字体可以嵌入到网站中以供显示使用，只要服务器上安装的字体不能被提取并安装到台式电脑上。

  15. Ash Blue
    评论永久链接#

    在几个项目中使用了这个，非常喜欢它！

    回复
  16. Jon
    评论永久链接#

    这真的很棒，我经常参考这个页面。

    回复
  17. Kris
    评论永久链接#

    很棒的列表。我已经将它添加到我的 CSS 文件中了。

    回复
  18. Mark
    评论永久链接#

    很棒的解决方案！一个问题：当我对文本的一部分进行加粗时，它不再起作用了，可能是因为字体粗细被设置了？

    回复
  19. Tim Holt
    评论永久链接#

    我最近有一个客户坚持要使用 Helvetica Light，但他很难理解有些设备根本没有这个字体，所以回退显示。我决定用 Typekit 字体和 Google Web 字体以及 Helvetica 和 Arial 进行比较。这是随后的演示页面

    http://demo.astronautdesigns.com/helvetica/

    回复
  20. Nick
    评论永久链接#

    新的 Android Ice Cream Sandwich 字体，叫做 Roboto，看起来很像 Helvetica，但要好很多，它可以在任何你想要的地方免费使用。谷歌太棒了，他们给了我们太多。这是一个很棒的字体。

    回复
  21. andy
    评论永久链接#

    @fontface？

    回复
  22. Ryan
    评论永久链接#

    刚注意到 Twitter 使用了这个字体栈……font: “HelveticaNeue,”Helvetica Neue”,Helvetica,Arial,sans-serif;

    但是，当我用 Chrome/Mac 查看时，“HelveticaNeue”（没有空格）导致字体默认为衬线字体（在这种情况下为浏览器默认字体），而不是栈中的下一种字体。我不确定这里发生了什么，但这让我想到了可能导致字体栈失败并恢复为浏览器默认值的的其他情况。

    提示：避免意外的浏览器默认值的一种方法是在定义任何其他字体栈之前定义 body{font-family:serif}，以确保浏览器默认值被覆盖。

    回复
    • A2D
      评论永久链接#

      在谷歌搜索同一个问题时偶然发现了这个：Chrome/Mac 不可思议地默认设置为衬线字体。
      不同的字体，但相同的原因——当它遇到一个没有空格的未安装字体时，它似乎忽略了栈中所有后续的字体……
      解决方法（在 body 或 html 元素上设置默认字体）效果很好。

  23. Ryan
    评论永久链接#

    抱歉……意思是 body{font-family:sans-serif}

    回复
  24. Bobby Jones
    评论永久链接#

    除了 Helvetica 在 IE 中看起来模糊之外，IE 最新版本，特别是 IE9+ 和 Adobe Type 1 版本的 Helvetica 还有另一个更大的、鲜为人知的问题。我已经写了一篇文章详细介绍了这个问题，但简而言之，如果最终用户在他们的电脑上安装了 Adobe Type 1 版本的 Helvetica，IE9 将无法加载任何尝试在 CSS 中使用 Helvetica 的网站。如果你想了解更多关于这个问题的信息，你可能想阅读我的文章，这里有关于这个主题的文章
    http://bobbyjoneswebdesign.blogspot.com/2011/12/internet-explorer-9-type-1-font-bug.html

    回复
  25. Paul
    评论永久链接#

    这绝对是最棒的字体。你可以通过谷歌网站获取此字体（只需复制包含字体链接的元标签），一切都会正常。

    回复
  26. Giede
    评论永久链接#

    很棒！我可以轻松地将字体堆栈与“Helvetica Neue”一起使用，而不会产生法律后果吗？

    回复
  27. ben
    评论永久链接#

    再次感谢，兄弟。你的 CSS 知识很棒，而且总是很有用。

    回复
  28. Audee
    评论永久链接#

    说到 Helvetica Neue 许可证的麻烦，有一个名为 TeX Gyre Heros（在 Font Squirrel 上找到）的 @font-face 嵌入字体，它是免费的、可嵌入的，并且与 Helvetica 相当相似。

    回复
  29. Effo Techs
    评论永久链接#

    这是我最想使用的……谢谢

    回复
  30. Daniel
    评论永久链接#

    我找到了这个很棒的工具。它向你展示了字体在不同平台上的外观。

    回复
  31. Jeremy Carlson
    评论永久链接#

    好的，这确实更好！与 Bootstrap 一起运行的默认字体堆栈是 "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;

    我在 Chrome（Mac）上遇到了恼人的字体问题，文本完全乱码——所有字母都被转换为看起来像带框的 A。

    你上面的字体堆栈解决了我的字体问题。我将在任何我想使用 Helvetica 的地方使用它……谢谢！！:)

    回复
  32. Brahma
    评论永久链接#

    谢谢！！我修复了 Safari 问题 :P

    回复
  33. Manish
    评论永久链接#

    Helvetica Neue 粗体字体在 IE7 和 IE8 上不起作用吗？

    回复
  34. Simon
    评论永久链接#

    这是一个很棒的解决方案，除了，那里的初始“HelveticaNeue-Light”是用来做什么的？我之所以这么问是因为奇怪的是，在 iPhone 4 上，这会导致出现一种非常奇怪的压缩字体，它不是任何形式的 Helvetica。导致此问题的我的确切字体堆栈是

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

    修复后的

    font-family: “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;

    另外，有哪台电脑没有安装 Arial，会回退到 Lucida Grande 吗？

    回复
    • MoOx
      评论永久链接#

      我遇到了完全相同的问题，即使是在 iOS 模拟器上。

    • Miggu
      评论永久链接#

      非常感谢，这让我苦恼了好几个星期。现在这个问题解决了！:)

  35. Shyju
    评论永久链接#

    你使用什么字体堆栈？你能给我们提供代码吗？喜欢你的字体。

    回复
  36. zx
    评论永久链接#

    添加“HelveticaNeueLT Com 55 Roman”（用于标准罗马版本）可能也很明智。为什么？我不知道。我在 Windows 上看到过几次。

    回复
  37. Chuck
    评论永久链接#

    @Heather @Bobby Jones 要消除 IE 中的模糊，请使用数字权重而不是 normal 和 bold，似乎可以解决一些问题。

    @Simon 正确。你只需要这样 -> font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; 然后 font-weight: 300; 将呈现 Light，font-weight: 200; 将呈现 UltraLight，当然 font-weight: 400; 将呈现常规。

    回复
  38. Hemant
    评论永久链接#

    我想在我的网站上使用“ff-meta-web-pro”。但我找不到操作步骤。请帮助我。

    回复
  39. Alex McCabe
    评论永久链接#

    我完全照搬了这段代码，我知道我已经安装了 Helvetica Neue 和 Helvetica。我还知道我已经安装了 Arial 和其他几种 sans-serif 字体，但它却默认为 Times New Roman。为什么会这样？

    回复
  40. Harikrishna
    评论永久链接#

    太棒了！我修复了 IE9 问题

    回复
  41. Ben
    评论永久链接#

    你应该也提到，如果 Windows 用户安装了 Helvetica，这将解决 Windows 上的问题，它会默认使用：Ultra Light（阅读起来并不容易）。

    回复
  42. zero
    评论永久链接#

    在字体堆栈中包含“HelveticaNeue-Light”会导致 iPhone 和 iPad 上的 Safari 出现问题……实际上会出现一种奇怪的字体。这就是我认为最好删除它的原因。

    回复
  43. Siem
    评论永久链接#

    这真的很棒。但如果用户没有安装该字体呢？

    但仍然很喜欢它。

    干杯

    回复
  44. Anthony Arellano
    评论永久链接#

    我不知道，但如果有看起来与 Helvetica Neue 完全相同的网络字体，那就太好了。像 Arimo、TeX-Gyre-Heros 和 Roboto 这样的字体作为网络字体备份看起来很有希望，但它们在很多方面仍然看起来不好。

    我想上面的字体堆栈是目前最好的。我唯一讨厌的就是它包含了我最大的敌人——Lucida Grande。

    回复
  45. Eric Jussaume
    评论永久链接#

    我在我的作品集网站 http://ejstudios.net 上使用了这段简单的 CSS 代码片段，效果很棒。你可以随时使用更好的 Helvetica。为什么要使用劣质版本的字体，而不用最好的呢？

    回复
  46. fjpoblam
    评论永久链接#

    不错的堆栈——尽管我倾向于省略 Lucida 和 Arial，让 sans 芯片随意掉落。不过，我注意到，我的 iPad 上斜体出现了粗体——所以我最终需要添加额外的语句将 cite、em、i 恢复为普通的 Helvetica（权重 300），才能让一切恢复正常。

    回复
  47. Mark
    评论永久链接#

    Yeue，我曾经是 Helvetica Neue 的自豪拥有者。然后出现了 Calibri/Calibri Light。Neue 的形状更好。Calibri 的形状间距更好。有一点可以肯定的是，凭借目前的科技，你无法在字体系列之间共享间距和形状。排版是一只狂野的野兽，而且确实是这样的。

    回复
  48. Scott Richardson
    评论永久链接#

    实际上使用 Helvetica 的官方 @font-face 工具包的状态如何？我自己转换过它，并在几个网站上使用过，但效果并不理想。有没有哪个在线铸造厂将它许可为 @font-face 工具包？

    回复
  49. emploi au maroc
    评论永久链接#

    尝试将此添加到你的 CSS 中，
    Safari 和 Chrome。

    html { -webkit-font-smoothing: antialiased; }

    回复
  50. John
    评论永久链接#

    除了 Mac 用户外，几乎没有人在其电脑上安装了 Neue Helvetica。

    回复
  51. jishnu
    评论永久链接#

    很棒的列表，对我很管用

    回复
  52. dav
    评论永久链接#

    来自 FontStack

    font-family: “Segoe UI”, Frutiger, “Frutiger Linotype”, “Dejavu Sans”, “Helvetica Neue”, Arial, sans-serif;

    回复
  53. rajit
    评论永久链接#

    @Simon 正确。你只需要这样 -> font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; 然后 font-weight: 300; 将呈现 Light，font-weight: 200; 将呈现 UltraLight，当然 font-weight: 400; 将呈现常规。
    http://www.kpjwebindia.com/rkjaiswal/

    回复
  54. Michael
    评论永久链接#

    设计师需要停止在网络字体中使用 Helvetica Neue（打印除外）。现在有成千上万的字体，设计师只是懒得使用 Mac 系统字体。是的，我知道你喜欢它，但如果我们不能因为限制而将其转换为 @font-face 或 cufon，那就应该说明一些问题。对于设计师来说，这是不好的做法，他们应该停止这样做，因为它会让开发人员抓狂。我甚至不记得自己曾经多少次告诉设计师去找另一种字体。

    回复
    • Brian
      评论永久链接#

      如果我能说服我的客户同意你的观点就好了。

  55. Iyan Riana
    评论永久链接#

    谢谢！

    回复
  56. Jay Carreon
    评论永久链接#

    如果你打算将此用于文本字段，最好添加“letter-spacing: 1px”并将字体权重更改为“400”，这样更容易阅读，有利于用户体验。

    回复
  57. Jim
    评论永久链接#

    非常感谢，很棒的参考！

    回复
  58. Francis Alojipan
    评论永久链接#

    你需要将 Helvetica-Neue 上传到你的服务器。并像这样编码它。

    @font-face {
    font-family: HelveticaNeue;
    src: url('fonts/Helvetica-Neue.otf'); /* this points to folder where you uploaded your custom font */
}

body {
   font-family: "HelveticaNeue", Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}
    回复
    • Scott Richardson
      评论永久链接#

      这不可行。Helvetica Neue 是一款专业且商业化的字体，价值不菲。你不能创建它的网页字体版本，然后上传到你的服务器供他人使用。不过，如果有错误，请有人纠正我。

  59. Francis Alojipan
    评论永久链接#

    试试看，斯科特，很奇怪，但它确实有效。同样的代码也适用于其他字体，如果你想添加一些自定义字体。

    在这里我使用了 projects.fiftystudio.com/saratoga

    @font-face {
    font-family: latolight;
    src: url(“../../fonts/Lato-Light.ttf”);
    }
    @font-face {
    font-family: latolightitalic;
    src: url(“../../fonts/Lato-LightItalic.ttf”);
    }
    @font-face {
    font-family: latoregular;
    src: url(“../../fonts/Lato-Regular.ttf”);
    }
    @font-face {
    font-family: latobold;
    src: url(“../../fonts/Lato-Bold.ttf”);
    }
    @font-face {
    font-family: latohairline;
    src: url(“../../fonts/Lato-Hairline.ttf”);
    }

    我还在寻找我使用“Helvetica Neue”的那个网站。:)

    回复
  60. Sergio
    评论永久链接#

    如你所知，Bootstrap 使用 font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif; 作为默认配置。

    问题是，今天我在客户的电脑（Windows 上的 Chrome）上看到了我一个项目的 Bootstrap 导航栏，它被替换成了“Helvetica Neue Bold”，并以反向和轮廓版本显示。结果很糟糕。

    检查已安装的字体确实显示了“Helvetica Neue”，但常规版本未嵌入。有“Helvetica Neue Bold”版本（印刷字体）和其他几个版本。

    我决定从列表中删除“Helvetica Neue”，并将 Helvetica 作为第一个选项。这解决了问题，但我想知道是否存在 Google Fonts 中的视觉等效替代品来代替 Helvetica Neue。我已经搜索过了，但我真的快瞎了，字体是我的致命弱点。

    干杯

    回复
  61. dude1
    评论永久链接#

    我决定请我的设计师完全停止在我们设计中使用 Helvetica。

    回复

发表评论

你的电子邮件地址不会被公开。 必填字段标记为 *

© 2024 . All rights reserved.