/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
我之前使用过一些字体栈,其中包括“Helvetica Neue”,但系统字体在屏幕上显示不正常。我不得不放弃。
也许网页上特定大小的字体会失效?
看来字体显示不正确(在 Firefox 中)的原因是 Windows 中未启用 Clear Type。
如果在 Windows 中 Firefox 中的字体看起来很糟糕,请查看此链接:http://support.microsoft.com/kb/306527
Chris,感谢你引用我的文章。事后看来,其中一些字体栈有点重,可以进行修剪。我建议任何看到此代码片段的人都先阅读文章,然后再整体复制字体栈,并仔细阅读 SP 论坛上的热烈讨论。
Windows 用户很难找到 Helvetica 版本,除非他们愿意购买。网上有大量做得很糟糕的“盗版”Helvetica 版本。我曾经使用过几个,其中一个甚至用西里尔字母显示标题(?!)。我已经删除了所有这些,直到我可以找到合法免费获取副本的方法,或者能够负担得起一些核心 Helvetica 字体,包括 Helvetica Neue。总的来说,基本 Helvetica 字体在显示器上显示得很好,即使在相对极端的尺寸上也比它们的“杂种”表亲 Arial 好得多。
我喜欢这个。
我最喜欢的字体栈是
font-family:sans-serif;
Chris,
对于复制粘贴这些栈的人,你能在第一个栈中修改一个错误吗?
“DejaVu Serif,”
应该改为
“DejaVu Serif”,
谢谢!我喜欢你的作品!
Max Black 等人,请在将垃圾场字体下载到那些认为字体家族中的每种字体都必须安装在他们系统上的笨蛋时,考虑一下系统压力。哈哈!这不是要贬低 codestyles.org 上简单、自然、充满活力的优秀作品(超乎想象)。但是... 只能使用从 Agfa、Adobe、Microsoft、ITC 和其他 Monotype 认可的“代理”处个人获得的已购买字体,并将任何异常行为报告给尽可能多的字库。当你完成这些操作后,删除所有不合理帖子... 或者编辑它们,清楚地表明为什么垃圾场不属于任何严肃的帖子中 [Max,G 你可以比任何在“?”区域的人说得更多 - 无论你在哪里。阿门。BURB 这条评论应该从有史以来最臭的臭鼬堆的中心删除,永远在网络空间里腐烂。
是的 Ryan,Chris 的作品很棒,世界上最好的代码片段药剂。即使 Ctrl-A 有点失控。
振作起来!这个代码片段在几乎每行的末尾都弄错了。鉴于当今五彩缤纷的互联网上,使用通用字体所带来的令人作呕的视觉侮辱所产生的丑陋评论,Chris 的字体家族努力只缺少一个功能来处理已安装字体的频率:五个基础字体,每个都对应于每种操作系统类型中的一种最流行的变体。例如,衬线字体“拥有”Times New Roman (Win)、Times (Mac) 和 Century Schoolbook L (Uni):以任何顺序,这三种字体应该放在“衬线”字体左边的位置。它们被设置为屏蔽 99.9-100% 的后续字体。其他四个分支也是如此。然后应该将 Web 字体脚本应用于正确排版的网站 - 当前最佳实践。
你可以在任何高速公路上快速行驶,但如果你倒车,就不是一件好事。世界上有十种司机,其中一个使用二进制系统,另一个迷路了。
嘿 Chris,
我刚刚创建了一个可视化字体栈库,只需点击一个按钮即可复制字体栈并粘贴到你的 CSS 中。我包含了所有标准栈,但它肯定会随着一些更奇特、不太常见的栈而增长。你可以在 cssfontstack.com 找到它。
评论和建议非常受欢迎。
@Denis - 非常棒的小工具,恭喜你。
我个人不会使用任何包含我没有亲自测试过其布局的字体的字体栈。虽然这些字体栈是一个很好的参考,但我还是要提醒大家不要盲目使用它们 ;)
每个列表中的“sans serif”后备缺少连字符,应该为“sans-serif”。
啊,我希望你能包含每个栈的示例!
此致,
Geoff
我不想做广告或任何其他事情,但我为所有这些字体栈创建了一个 jsFiddle,只是想看看它们的样子。我最喜欢的是“现代基于 Georgia 的衬线字体栈”和“传统基于 Garamond 的衬线字体栈”。http://jsfiddle.net/mkRXx/embedded/result/
怎么样,有没有一个窄的无衬线字体栈?
您好,您认为使用谷歌字体怎么样?事实上,由于字体托管在第三方服务器上,它可能会更有效。
我使用 Verdana 的原因是字母之间的清晰区别,尤其是“I”和“l”。有没有一种字体栈可以保持这种清晰度?(给定的 Verdana 栈包含 Corbel 和 Lucida Grande,它们都无法满足我的需求。)
我一直测试 Palatino Linotype 栈,但它在 Android 上完全无法执行任何操作。有没有类似的方案,Android 可以支持?
测试表明,移动 Android 会放弃任何包含 Palatino 的栈,并自动将其分配给 Droid Serif,无论 Palatino 在栈中的位置如何。我不知道移动 Android 中还有哪些强制替换。
如果我们能够为字体添加一个标识符来测试哪个字体在每个浏览器中显示,那就太好了。例如,arial 是红色,times 是蓝色等等。另一个想法是使用伪元素。如果 arial 出现,arial 就会出现在之前。这将需要大量代码来识别上面的所有字体,但对于测试你网站上的单个栈来说,代码量要少得多。
由于 Apple Safari 近年来以过分粗体的方式显示“Hoefler Text”,我发现,在针对笔记本 Safari 时,在“Hoefler Text”之前指定字符串“HoeflerText-Regular”很有帮助。(截至 OSX 10.11.5)
(注意,“HoeflerText-Regular”本身还不够。笔记本 Firefox 在 OSX 10.11.5 上更喜欢“Hoefler Text”。)
有趣的文章。这些字体栈有最新更新吗?
有人知道 Montserrat 的一个好的后备字体栈吗?我最近设计中经常使用它,我正在尝试构建一个可靠的后备栈,因为我开始在构建的 HTML 邮件中使用 Web 字体,并且由于 HTML 邮件中对 Web 字体的支持非常低,因此拥有一个可靠的后备栈至关重要。
我一直在寻找相同的东西,最终自己做了。这个堆栈很棒,因为主要字体可以通过 Google Fonts 和 Typekit 获得。Source Sans 与 Montserrat 非常相似。我没有使用 Open Sans,因为它不是几何字体。Helvetica Neue IMO 稍微好一点,但大多数机器都安装了原始 Helvetica。当然,如果你使用的是粗体,那么 Arial Black 会更好。欢迎反馈
font-family: 'Montserrat', 'montserrat', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;
这些堆栈中的一些顺序似乎很奇怪。
例如,在 Helvetica 堆栈中,为什么
"Helvetica Neue", Helvetica, Arial
不在列表的第一位?通过 mARK 和 ANT 的评论,我有点想知道,是否有任何参考可以告诉我最有可能在大多数地方获得通用字体?例如,在 iPadOS Safari 上,我看到“font-family:serif”会生成“font-family:'Times New Roman’” (反之亦然)。我可以找到“serif”和“sans-serif”最有可能生成什么吗?这可以为那些对排版很懒的人节省大量输入。