Firefox 3.6 之后 – 面向设计师的新字体控制功能

注意:以下讨论适用于正在进行的工作,这些工作可能会出现在 Firefox 3.7 中。它不描述 Firefox 3.6 中的功能。

这篇文章来自 Jonathan Kew 和 John Daggett。他提供了一个 5 分钟的视频,展示了一些这些功能的动态效果。如果您是一位十足的字体发烧友,并且喜欢舒缓的英国口音,您可能想看看它。

使用 @font-face 允许网页设计师选择更广泛的字体,而且随着商业字体供应商支持 WOFF 字体格式,字体选择集应该会进一步改善。因此,下一步显然是尝试更好地利用这些字体中可用的功能。

多年来,“智能”字体格式(如 OpenType 和 AAT)为字体设计师提供了一种方法,可以将丰富的变体集包含在他们的字体中,从连字和花体到小写字母和大写数字。OpenType 规范 描述了这些功能,并为每个功能分配了一个唯一的特征标签。但这些功能通常只适用于使用专业出版应用程序(如 Adobe InDesign)的用户。Firefox 当前使用字体默认设置进行渲染;提供一种通过 CSS 控制这些字体功能的方法,将会更有趣。

Opera 的 Håkon Wium Lie,基于与 Tal Leming 和 Adam Twardoch 的讨论,建议扩展 CSS 的“font-variant”属性以包含字体功能的值。Mozilla 正在 积极地进行一项新提案,沿着这条思路。这对 CSS 来说是一个相当大的补充,因此很可能需要一些复杂的讨论,讨论如何最好地支持这些功能。

实验性实现

作为这项工作的一部分,Jonathan Kew 一直在努力将 Pango 库的一部分移植到所有受支持的平台上,用于处理复杂脚本和启用字体功能。他目前有一个 实验性版本,它使用一个特殊的 CSS 属性将 OpenType 功能列表与页面中的特定元素相关联。这不是 建议的格式,它只是提供了一种更好的方式来讨论可能的 font-variant 属性集以及它们应该映射到的 OpenType 功能设置。

.altstyles {
  /* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
  -moz-font-feature-opentype: "dlig=1,ss01=1";
}

上面的功能设置字符串意味着使用可选连字 (dlig) 和第一组风格变体 (ss01) 进行渲染。一个使用 Jack Usine 的 MEgalopolis Extra 的示例

此字体广泛使用 OpenType 功能;字体主页包含一个示例渲染,其中使用了许多这些功能。下面是使用启用 OpenType 功能的 HTML 编写的相同样本的渲染

表格数字用于数字对齐

OpenType 功能还可以实现对对齐的更好控制。当数字以表格形式列出时,比例形式通常会导致数字在行之间错位,从而使列表更难扫描。启用表格对齐后,单个数字使用固定宽度进行渲染,以便数字在行之间对齐

自动分数

OpenType 功能也可以实现自动分数,请注意下面食谱配料清单中分数形式的内联使用

语言敏感性

OpenType 还包括对每种语言的支持。这对于某些语言的文本正确渲染非常重要。例如,土耳其语使用带点的 i 和不带点的 i,因此在渲染连字或小写字母时需要保留这种区别。下面是英语和土耳其语的相同文本,显示了土耳其语文本的默认渲染和语言敏感渲染

历史文本

文本的渲染方式不断发展;曾经常用的字形往往会演变成其他形式,使历史形式与现代形式区别开来。下面是马萨诸塞湾殖民地的一条旧法律的文本,取自波士顿学院法学院 Daniel R. Coquillette 古籍室 的一本书。

原始扫描图像

下面是使用启用 OpenType 功能的 Igino Marini 的 Fell Types 复兴字体 在 HTML 中渲染的相同文本。请注意“ct”连字和“s”的上下文形式

更多资源

CSS 中的字体功能支持提案
OpenType 字体功能列表
Igino Marini 的 Fell Types 复兴字体


61 条评论

  1. Tjobbe

    非常好,但对我来说,口音听起来非常像澳大利亚人!

    2009 年 10 月 21 日 下午 09:29

  2. […] 关于 « Firefox 3.6 之后 – 面向设计师的新字体控制功能 […]

    2009 年 10 月 21 日 下午 10:01

  3. Greg

    提醒一下,这句话“It’s your a total font nerd and you enjoy a soothing British accent, you might want to watch it.” 应该写成

    “If you’re a total font nerd and you enjoy a soothing British accent, you might want to watch it.”

    你明白我不能忍受它出现在与“British”相同的句子中……

    2009 年 10 月 21 日 下午 10:09

  4. […] Firefox 3.7 不仅将支持 WOFF,还将开始支持更多 OpenType 功能。通过 CSS 控制这些功能正在进行中。Christopher Blizzard 和 Jonathan Kew 进行了详细说明。[…]

    2009 年 10 月 21 日 下午 10:20

  5. cuz84d

    期待着有一天我们会看到一些非常棒的网站。我知道,如果你想在网上查看另一种语言,目前我们必须设置操作系统以使用特定的键盘和语言包。但这将是酷炫的,一旦网页开发者掌握了这一点。..

    2009 年 10 月 21 日 下午 10:26

  6. Christopher Blizzard

    @Greg – 是的,对不起,那里的打字错误。我把它修正了。:)

    @Tjobbe – 我很确定他来自英国,而且他就是那里的人!但我会再次确认。(我们是一个全球项目,因此有时很难知道人们来自哪里。)

    2009 年 10 月 21 日 下午 10:27

  7. @F1LT3R

    旧字体看起来真的很漂亮。令人难以置信的是,五年后,随着目前正在进行的所有工作,网络将是一个多么不同的世界。

    2009 年 10 月 21 日 下午 10:34

  8. Jakub Pawlowicz

    这真的非常棒!!感谢此功能,我们很快就能在浏览器中看到一些真正的排版。

    @F1LT3R – 五年后,我们可以在所有主流浏览器中都支持它 - 希望 Explorer 不会成为其中之一……

    2009 年 10 月 21 日 下午 13:23

  9. Hans Pinckaers

    哇,太棒了。如果每个浏览器都兼容它就好了。但我们还没有到那一步。

    顺便说一句,口音很不错,先生。

    2009 年 10 月 21 日 下午 13:46

  10. John Faulds

    哇,这里讨论了一些非常酷的功能。期待着能够尽快使用它们。

    @Tjobbe:我来自澳大利亚,我可以告诉你 Jonathan Kew 的口音绝对是英国的。

    2009 年 10 月 21 日 下午 14:11

  11. skierpage

    我迫不及待地想在夜间版中体验这种雄伟而美丽的排版,Firefox 是最好的!:-) 希望许多页面所有者会购买为网络授权的高级字体,以利用这些功能。

    2009 年 10 月 21 日 下午 15:22

  12. Nathan Myers

    这对于网页设计师来说可能非常不错,尤其是那些逃避真正工作的人。你如何帮助那些不得不查看肯定会出现的那些难以阅读的网页的人?那些被迫尝试阅读这些网页的人怎么办?

    我不得不修改我的环境,迫使我的浏览器使用 Linux Libertine 来代替所有这些由时髦的网站设计师指定的丑陋字体。在当前的 Firefox 上这很容易 - 虽然有时会失败 - 但对于 Webkit 浏览器以及处理这些失败,我不得不编辑 fontconfig 的 XML 来强制执行替换。这种强硬的方法肯定会导致其他问题。为了让 Libertine 中的“st”和“ct”历史连字默认显示,我不得不使用 fontforge 编辑字体文件本身,将它们复制到标准连字集中。

    它仍然不令人满意;大多数页面以太小的字号进行渲染,我不得不“缩放”大多数页面。

    在网页中放置华丽的字体很有趣。尝试阅读除了“lorem ipsum”以外的任何内容,以及使用大多数这些字体渲染的内容,都没有趣。

    2009 年 10 月 21 日 下午 17:55

  13. John Daggett

    @skierpage
    请记住,大多数用户已经拥有包含其中一些功能的字体!!为什么表格数字还没有在网络上可用,这对我来说是一个谜……

    2009 年 10 月 21 日 下午 18:13

  14. […] 面向设计师的字体控制 […]

    2009 年 10 月 21 日 下午 21:24

  15. WalterGR

    鉴于 Firefox 的核心是网页标准,你能告诉我批准该规范的标准机构吗?

    谢谢,

    Walter

    2009 年 10 月 21 日 下午 22:27

  16. tom

    jonathan kew 是英国人,参见:http://www.tug.org/interviews/interview-files/jonathan-kew.html

    2009 年 10 月 21 日 下午 23:04

  17. Richard Le Poidevin

    我爱死它了,这将是太棒了!

    2009 年 10 月 22 日 上午 01:22

  18. […] 你是一个十足的字体发烧友,而且你喜欢舒缓的英国口音,你可能想看看这个视频» 关于未来的 Firefox 功能(对不起,[…]

    2009 年 10 月 22 日 上午 02:53

  19. Zéfling

    Ruby(HTML 和 CSS3)的支持仍然在计划中吗?

    2009 年 10 月 22 日 上午 02:54

  20. […] 如果你对网络上的字体感兴趣,你真的应该看看这个页面,了解一下未来的发展方向。虽然这是 Firefox 的实验性工作,[…]

    2009年10月22日 下午08:41

  21. James John Malcolm

    这项工作太棒了!

    我希望“font-variant: do-numbers-in-tabular-style;” (和其他扩展) 不仅在@font-face中被支持,而且在其他地方也能被支持。能够做到“#mytable td:nth-one(2n) {font-variant: do-numbers-in-tabular-style;}”将是一个巨大的福音。[1]

    另外,在最终实现中,“font-variant:small-caps;” 是否会与 “font-variant:real-opentype-small-caps;” 分开?我认为这样做并不明智。

    [1] 勿怪我的“猪拉丁文”CSS

    2009年10月22日 下午08:47

  22. John Daggett

    @WalterGR
    正如文章所述,这是一项正在开发的工作,它不是一个现有的标准。最初的提案发布在 www-style 邮件列表上,讨论将在 www-style 邮件列表、www-font 邮件列表和 W3C CSS 工作组内进行。

    2009年10月23日 下午15:26

  23. […] Firefox 3.6 之后 - 为设计师提供的新字体控制功能 […]

    2009年10月23日 下午20:44

  24. Phil Ricketts

    这很有趣,这些功能早就该出现了。网络需要更好的排版,而我们正在慢慢地实现它。不过说真的,真正能改变现状的是让 IE 实现像这样的字体控制标准。

    这个家伙听起来像 Salad Fingers (David Firth)。听了他的话之后,我感觉很不舒服。

    2009年10月24日 上午02:29

  25. […] 未来会如何发展,浏览器将如何开始充分利用 OpenType 功能:阅读 Firefox 3.6 之后 - 为设计师提供的新字体控制功能,并确保观看 […]

    2009年10月24日 下午13:25

  26. […] 今天,Dan Klyn 在推特上分享了一篇博客文章的链接,文章描述了 FireFox 的新字体功能。视频中男子的独特声音让我想起了某个人… 很快我们将能够 […]

    2009年10月24日 下午16:46

  27. […] Firefox 3.6 之后 - 为设计师提供的新字体控制功能:hacks.mozilla.org "以下是使用 Igino Marini 的 Fell Types 复兴字体在 HTML 中渲染的相同文本,启用了 OpenType 功能。请注意 'ct' 连字和 's' 的上下文形式:" (标签:排版 opentype 设计 图形设计 HTML 浏览器 渲染) […]

    2009年10月24日 下午23:01

  28. dfthdfhdfh

    SVG字体怎么样?
    它们在 WOTT 中可用吗?
    因为它们基于矢量,所以有优势。

    2009年10月25日 上午07:45

  29. […] 未来会如何发展,浏览器将如何开始充分利用 OpenType 功能:阅读 Firefox 3.6 之后 - 为设计师提供的新字体控制功能,并确保观看 […]

    2009年10月25日 下午12:49

  30. […] 未来会如何发展,浏览器将如何开始充分利用 OpenType 功能:阅读 Firefox 3.6 之后 - 为设计师提供的新字体控制功能,并确保观看 […]

    2009年10月25日 下午15:22

  31. […] 未来会如何发展,浏览器将如何开始充分利用 OpenType 功能:阅读 Firefox 3.6 之后 - 为设计师提供的新字体控制功能,并确保观看 […]

    2009年10月26日 下午12:04

  32. […] 为设计师提供的新字体控制功能 […]

    2009年10月27日 上午10:27

  33. Tjobbe

    @John Faulds - 我是英国人(你不能从我的名字看出来吗?),我不认为他口音很英国,听起来像,但它有点不像英国,确实有点奇怪!

    回到主题,我非常兴奋地看到网络字体的发展方向,未来将会非常激动人心,Arial 的末日?你在这里先睹为快;o)

    2009年10月27日 下午14:02

  34. […] https://hacks.mozilla.ac.cn/2009/10/font-control-for-designers/ (Firefox 3.6 ile yeni font tipi desteği) […]

    2009年10月29日 上午10:18

  35. Dogan Weber

    太棒了!

    我期待着在未来的 Firefox 版本中看到这些功能的实现。开源正在改变着计算的每一天。继续摇滚吧。

    2009年11月7日 上午06:31

  36. […] 我们把在Mozilla的工作都设定在这个前提下。我们第一个使提速JavaScript成为可能,CORS(跨域XHR请求),混合使用HTML和SVG,最先提出的基于Canvas3D的WebGL,支持硬件设备的地理定位和重力感应。我们正在帮助实现和标准化一些全新的CSS规则,这些规则可能被其他浏览器实现;我们带领互联网朝着现代的字体系统前进;我们提供互联网网站作者和用户更多的安全工具。我们的工作就是帮助保证互联网变得更加丰富多彩并勇往直前──这也是我们公司公共利益使命中非常重要的一条。这是五年中Firefox提供给我们的机遇。 […]

    2009年11月9日 上午04:32

  37. Mozilla 用户

    我太喜欢它了!比 WOFF 有用多了。你能为 Linux 构建一个版本吗?我迫不及待地想要 FF 3.7!

    2009年11月10日 下午11:55

  38. […] 未来会如何发展,浏览器将如何开始充分利用 OpenType 功能:阅读 Firefox 3.6 之后 - 为设计师提供的新字体控制功能,并确保观看视频。WOFF 示例页面 - 您需要最新的开发版 […]

    2009年11月13日 上午10:22

  39. […] 随着网络情况的改善(嘿,我们甚至获得了连字!),控制在很长一段时间内仍然会很糟糕。印刷设计师是 […]

    2009年11月14日 上午06:13

  40. […] XeTeX 的作者 Jonathan Kew 虽然仍然在开发 TeXworks,但工作的重心已经放到了 Mozilla Firefox 3.6 的 WOFF 格式和 OpenType 复杂排版支持上,最近的一个视频里 Jonathan 提供了一个很棒的概览,有这样的一些特性之后,在浏览器里做一些认真的文本排版才可能成为现实 — 可惜浏览器仍然缺乏好的断行算法实现。这部分工作其实就是基于 harfbuzz-ng 的。而 WebKit-GTK 版本也开始了基于 harfbuzz-ng 的实现。 […]

    2009年11月17日 下午22:48

  41. […] 有趣的功能,例如更好的字体渲染和控制(这是其他浏览器最近非常重视的事情),更高的速度等等。分享并 […]

    2009年11月19日 上午06:45

  42. […] 随着网络情况的改善(嘿,我们甚至获得了连字!),控制在很长一段时间内仍然会很糟糕。印刷设计师是 […]

    2009年11月19日 上午08:54

  43. Patrick Chuprina

    您好,

    我似乎无法在 firefox 3.6beta 或 3.7 landmine (PC 版本) 中找到:gfx.text_layout.harfbuzz 进行更改,我错过了什么?任何帮助将不胜感激。

    Patrick Chuprina

    2009年11月25日 下午20:03

  44. […] 由 Mozilla 和字体铸造厂支持,介绍了 WOFF 中的一些规范演绎和技术说明。在 Firefox 3.6 之后 - 为设计师提供的新字体控制功能 […]

    2009年12月1日 上午03:19

  45. […] 所有这些方法都是权宜之计,因为我们等待所有浏览器允许通过 @font-face 嵌入自定义字体(提示:我们主要等待 Microsoft Internet Explorer),以及为了了解很快将可能实现的功能,您可以观看 Mozilla 制作的精彩视频:为设计师提供新的字体控制功能。 […]

    2009年12月8日 上午05:29

  46. Christian

    已经存在用于四分之一、二分之一和四分之三分数的特殊字符实体,但我之前一直想知道为什么至少没有用于三分之一和三分之二的特殊字符实体。

    http://developer.cmzmedia.com/?p=32

    我真的很期待能够使用连字和替代字等等。

    2009年12月14日 下午16:02

  47. hurr

    由于 Kew 先生来自 SIL - Firefox 有计划支持 Graphite 字体吗?他在 8 月份[1] 说 WOFF 允许使用任何 sfnt 字体,但 WOFF 草案规范只提到了“TrueType、OpenType 和 Open Font Format 字体”。我还找到了 mozdev 上的 sila 项目[2],但它似乎已经很久没有维护了。

    [1] http://lists.w3.org/Archives/Public/www-font/2009JulSep/1279.html (WebOTF 现在被称为 WOFF)
    [2] http://sila.mozdev.org

    2009年12月22日 下午13:01

    1. John Daggett

      目前没有计划支持 Graphite,但一切皆有可能。像往常一样,欢迎提交补丁!

      2010年1月6日 下午19:30

  48. […] 为了标准化和实现一些正在其他浏览器中开发的新 CSS 功能,我们正在引导网络走向现代的字体系统,并为网络作者和用户提供更多安全工具。我们的工作就是帮助保持网络的丰富性和 […]

    2009年12月28日 下午19:16

  49. […] 启动他们的网络浏览器,它会变得更好。也许它会崩溃得更少,也许它会在 […]

    2010年1月15日 下午23:10

  50. […] och stöd i vävläsare (Firefox), typsättningsprogram (XeLaTeX) och program för att skapa typsnitt […]

    2010年1月21日 下午14:19

  51. […] https://hacks.mozilla.ac.cn/2009/10/font-control-for-designers/ (Firefox 3.6 ile yeni font tipi desteği) […]

    2010年1月22日 下午11:36

  52. […] su navegador y será mucho mejor. Probablemente con menos cuelgues, quizás con mejoras en el soporte para tipografías en la […]

    2010年1月23日 下午14:39

  53. BWRic

    有什么方法可以帮助我在 Firefox 中进一步开发这个功能吗?我是一家设计工作室的网络开发人员,非常愿意提供帮助。

    2010年1月29日 上午06:52

  54. […] 一段时间。我们最近受到美丽重新设计的启发,浏览器支持越来越复杂,越来越多的字体铸造厂选择拥抱 […]

    2010年2月23日 下午16:25

  55. Knsi

    您好,
    感谢您提供这些信息,我现在可以使用 OpenType 字体并使用 Firefox 显示连字功能,大部分情况下都能做到。
    但是,在打印时,字体被 Firefox 替换了,我该怎么解决呢?

    2010年11月5日 上午06:04

  56. […] (从去年的博客文章更新而来:) […]

    2010年11月9日 下午18:32

  57. John Ward

    我对上面的视频很着迷,但不幸的是,它似乎有问题。音频会一直播放,但视频不会移动。如果您单击进度条,您将获得更新,但只有在您这样做之后才会更新。有没有机会重新上传或发布到 YouTube 上?

    2010年12月14日 上午10:17

    1. John Ward

      我应该说我使用的是 Chrome 8.0.552 和 Firefox 3.6.12,两者都存在相同的问题。

      2010年12月14日 上午10:18

  58. Derek Newcastle

    感谢您的文章,我的网络设计师经常使用 @font-face,但我确实想知道我们在整个网络上启用如此大量的自定义排版会带来什么后果 - 生产时间增加,以及更多跨浏览器问题,可能是这样吗?

    2010年12月17日 下午23:00

  59. dynamis

    关于示例代码的说明
    “-moz-font-feature-opentype” 属性已更改为 “-moz-font-feature-settings”

    https://bugzilla.mozilla.org/show_bug.cgi?id=511339#c7
    将属性重命名为 -moz-font-feature-settings(遵循当前 CSS3 字体编辑器的草案)

    2011年5月29日 下午21:06

此文章的评论已关闭。