Mozilla Hacks

网络排版的潜力

头像照片 由

发布日期：2009 年 6 月 29 日 分类：35 天，@font-face，CSS，以及 Firefox

这篇文章既是关于网络排版变化本质的演示，也是对它的评论。 Ian Lynam 和 Craig Mod 已经 创建了一个页面，这是一个关于排版在行动中的优秀例子，同时还提供了一些关于网络排版的下一步可能是什么样的建议。该页面本身利用了 Craig 和 Ian 获得使用许可的多种字体，并使用了一种令人愉悦的多列布局。请点击进入完整的文章以获得完整的体验。

在 Firefox 3.5 中查看演示
potential

44 评论

  1. John Slater

    太棒了！

    2009 年 6 月 29 日 下午 1:12

  2. Tomer

    作为非英语母语人士，我们更难阅读连在一起的拉丁字符。除非可读性足够高，或者有用户偏好禁用字体，否则不要使用脚本字母。

    2009 年 6 月 29 日 下午 1:14

  3. sep332

    该网站似乎很快就宕机了。我不确定是否有人有镜像或更大的截图？

    2009 年 6 月 29 日 下午 1:19

  4. sep332

    现在似乎没问题了，不用担心。

    2009 年 6 月 29 日 下午 1:20

  5. ttfn

    可惜在关闭 ClearType 后看起来很糟糕。:-(

    2009 年 6 月 29 日 下午 1:48

  6. Adam

    您几次提到 @font-face 只能在使用 FF 3.5 时使用，但这并不完全正确。Safari 4、ie6 & ie7 以及最新版本的 Opera 也使用 @font-face。

    2009 年 6 月 29 日 下午 5:01

  7. Hans Schmucker

    遗憾的是，在 Windows7 上运行的 Trunk 拒绝显示“Liza”字体，导致标题的布局非常奇怪……

    另一个问题是，Windows 版 Firefox 接受 ttf 文件，这些文件仅在演示中使用……但是它们在其他平台上不受支持。我真的认为应该尽快禁用 Windows 上对 ttf 文件的支持，因为作者（正如我们在这里看到的那样）很可能会在 ttf 文件似乎有效时使用它们，而不知道这些问题。

    最后：Tomer 说得有道理。您可以通过 about:config 将链接字体关闭，gfx.downloadable_fonts.enabled false，但我们真的应该考虑在选项/内容/字体中添加一个 GUI。

    2009 年 6 月 29 日 下午 6:26

  8. Craig Mod

    @Adam：似乎 Safari 和 Opera 在使用伪选择器（如 first-line）时，在解释 @font-face 引用方面都存在问题。

    虽然一些引用的字体在 Safari 和 Opera 中按预期呈现，但只有 Firefox 3.5 生成了完整的预期结果。

    也许我们在 CSS 中搞砸了什么，导致 Safari/Opera 无法正常工作。如果您有任何建议，请告诉我们！

    最好的祝愿，
    Craig

    2009 年 6 月 29 日 下午 9:03

  9. Alex

    TTF/OTF 文件受 Windows、OS X 和 Linux（fontconfig/freetype/pango）支持，TrueType 是标准字体格式（由 Apple 创建，由 Adobe 和 MS 扩展为 OpenType）。

    甚至像 OS/2 和 Windows CE 这样的平台也支持 TTF/OTF 文件。

    2009 年 6 月 29 日 下午 9:06

  10. […] 要评论此演示，请在 hacks.mozilla.org 帖子中进行。 […]

    2009 年 6 月 29 日 下午 10:50

  11. Hans Schmucker

    非常抱歉，看来我搞错了。
    由于某种原因，我认为我记得 TTF 文件在 Linux 上无法使用。

    2009 年 6 月 30 日 上午 4:48

  12. Hanspeter

    不幸的是，演示页面陷入了使用带有奇怪字符的字体的陷阱，这些字符与正常字母位于同一代码位置。因此，为了获得主要的项目符号的大致叶子/水果，作者输入了“A”、“B”等，然后将其样式设置为看起来像节区标记。任何无法下载所需字体的浏览器（不仅仅是不支持 @font-face 的浏览器）都会将现在看起来随机的字母绘制到文本的中间。设计非常糟糕。

    2009 年 6 月 30 日 上午 7:09

  13. Staś Małolepszy

    这是一个关于 @font-face 规则功能的非常棒的演示。不过，我有点担心的是，他们如何使用常规字母（“A”、“B”）以自定义字体（“FaukinGlyph”）进行样式设置来呈现字形。据我了解，当字体文件或字体定义不可用时（网络问题，css 关闭），这可能会导致可访问性问题。读者会在每段开头看到随机字母。

    这也意味着您可以创建一个字体，其字符和字形之间的映射与标准映射不同。在这种情况下，HTML 显示的是一个东西，而用户看到的是一个完全不同的东西。这是一种很好的保护电子邮件地址的方法，但也是一种绕过贝叶斯垃圾邮件或欺骗尝试过滤器的办法。

    2009 年 6 月 30 日 上午 7:13

  14. Craig Mod

    @Hanspeter

    说得有道理。

    由于 EULA 许可问题，我们不得不创建一些字体的自定义字形限制版本（当然，在与 Underware 合作并得到他们的批准下），包括特殊的字形字体。为了方便参考，我们将字形放置在 A B C D E F 中，知道这是一个针对 Firefox 3.5 的非常具体的演示。当然，我们建议使用对预期由各种浏览器访问的生产网站来说更优雅的降级方法。

    2009 年 6 月 30 日 上午 8:41

  15. […] 文档；能够在 Web 页面中显示无需插件的视频；私人浏览模式；花哨的可下载字体；以及可以告知 Web 网站您位置的地理定位技术； […]

    2009 年 6 月 30 日 上午 9:03

  16. […] 文档；能够在 Web 页面中显示无需插件的视频；私人浏览模式；花哨的可下载字体；以及可以告知 Web 网站您位置的地理定位技术； […]

    2009 年 6 月 30 日 上午 9:43

  17. […] 3.5，它在今天早些时候发布（6 月 30 日），该版本中最值得注意的是 @font-face css 属性，它允许 Web 设计师将自定义字体捆绑到他们的网站设计中，并使用 […]

    2009 年 6 月 30 日 上午 9:45

  18. […] 文档；能够在 Web 页面中显示无需插件的视频；私人浏览模式；花哨的可下载字体；以及可以告知 Web 网站您位置的地理定位技术； […]

    2009 年 6 月 30 日 上午 9:53

  19. Gérard Talbot

    大家好，

    演示中第 49 行存在一个格式错误的 URI 引用。

    a href=”http://github.com/blog/363-cufón-a-sifr-alternative” Cufon /a

    带重音符的 o 应该转义：%F3 是正确的做法。

    HTML 4.01，第 B.2.1 节 URI 属性值中的非 ASCII 字符
    http://www.w3.org/TR/html4/appendix/notes.html#non-ascii-chars

    此致，Gérard

    2009 年 6 月 30 日 上午 10:49

  20. Ricardo Esteves

    有一个问题我想更好地理解。@fontface 如何帮助 Web 设计师构建具有更多排版丰富性的 Web，而不会将商业字体文件公开供所有人下载（盗版）？

    2009 年 6 月 30 日 上午 11:25

  21. […] 您可能遇到的任何性能问题 - 告诉我们您喜欢哪些功能（例如可下载字体？） […]

    2009 年 6 月 30 日 上午 11:33

  22. elmimmo

    存在文件大小问题。CJK 字体往往非常大。Microsoft 的 WEFT 可以扫描页面并创建一个新的字体文件（尽管使用他们自己的“字体对象”格式），从而剥离该特定页面所有不必要的字形。

    我认为这是一个好主意。

    2009 年 6 月 30 日 下午 12:09

  23. […] 文档；能够在 Web 页面中显示无需插件的视频；私人浏览模式；花哨的可下载字体；以及可以告知 Web 网站您位置的地理定位技术； […]

    2009 年 6 月 30 日 下午 12:42

  24. Lauren W.

    我对 Web 不是很精通，但作为一名设计师，这真的很令人兴奋。

    此外，我更新到了 3.5 版本以正确查看 @font-face 文章，并注意到，当我按下 cmd+D 来添加书签时，所有文本都带上了阴影。直到我再次按下 cmd+D 时，它才消失。我以前从未见过这种情况。它实际上看起来很酷，但这里面的故事是什么？

    2009 年 6 月 30 日 下午 2:56

  25. […] 文档；能够在 Web 页面中显示无需插件的视频；私人浏览模式；花哨的可下载字体；以及可以告知 Web 网站您位置的地理定位技术； […]

    2009 年 6 月 30 日 下午 4:58

  26. Daniel

    Lauren：在网站上按下 D、B 和 G 会切换一些花哨的功能。因此，当按下 Cmd-D 时，您就在切换文字阴影。

    这让我联想到他们忽略的一个重要规则：在执行键盘处理时，始终检查修饰键。当用户想要将您的网站添加为收藏夹时，不要切换下拉阴影；您的仅限数字字段不应该阻止用户按下 Ctrl-A 等。

    此外：如果您计划使用自定义字体，请使用 font-size-adjust。观看文本在加载新字体时跳动非常、非常烦人。

    2009 年 6 月 30 日 下午 11:40

  27. Chaac

    我在演示中找不到 Firefox 和 Safari 渲染字体之间的任何区别。我将一个文件上传到我的服务器，你可以自己看看：http://www.hclientes.com/font-face.png

    (左为 Safari 4，右为 Firefox 3.5)

    如果你看到任何差异，请发布。

    问候。

    2009 年 7 月 1 日 下午 11:50

  28. Craig Mod

    @Chaac

    感谢您发布此截图。虽然很细微，但至少有一点差异：Safari 对首字下沉字体的边距/行高的解释。如果您按下页面上的“b”键以打开基线网格，则 Firefox 和 Safari 版本之间的差异会变得更加明显。

    最好的祝愿，
    C

    2009 年 7 月 1 日 下午 7:15

  29. Chaac

    @Craig Mod
    我已经在两个浏览器上看到了基线网格，并且看到了您提到的非常小的差异。就只有这个吗？我认为差异过于细微，不足以说明只有一个浏览器“按预期”渲染。我认为两个浏览器都很好地展示了“网络排版的潜力”。

    问候。

    2009 年 7 月 1 日 下午 7:26

  30. John Drinkwater

    如果您想创建自定义字形以供展示，请将它们放到 Unicode 私用区域，这样就不会与地球上的任何其他东西发生冲突……

    2009 年 7 月 2 日 下午 1:56

  31. Marcelo Cantos

    [我不在该领域工作，因此如果我的绝妙“新”想法最终和山一样老，请接受我的道歉，因为我占用大家的时间。]

    关于许可，这里的问题与 DRM 通常试图解决的问题不同。通常，DRM 会阻止最终用户体验他们已寻求并获得但未获得体验权的内容。但是，在本例中，需要控制的是一类内容提供商（网站），最终用户总是无意中成为同谋。也许在这种情况下可以找到不同的解决方案……

    设计师可以在每个网站的基础上对字体文件进行数字签名和许可。大多数网络浏览器将拒绝加载未经许可的字体文件，并将未经许可的字体文件的“指纹”报告给监控机构（主要是将每个许可的指纹映射到所有者/电子邮件的数据库）。当然，报告将由用户自行决定，因此设计字体并进行测试的设计师可以选择退出，甚至可以将指纹存储为“受信任”。但是，网站将无法控制报告，因此会让自己暴露于版权侵权指控中。指纹还可以防止设计师通过获取其他人字体的数字签名权来欺骗另一位设计师。

    唯一的真正症结在于开发一种能够在侵权者对字体进行调整后仍然有效的健壮指纹方法。理想的方法是，允许部分指纹匹配并迫使侵权者对字体的外观进行实质性更改。常见的数字“指纹”，如 SHA-1，是不可行的。

    2009 年 7 月 7 日 下午 2:43

  32. Marcelo Cantos

    更正：另一个主要症结在于最终用户仍然可以从网站窃取合法许可的字体，并在不受浏览器报告约束的离线资料中使用它们。这让我们回到了传统的 DRM 的泥潭之中。

    2009 年 7 月 7 日 下午 2:57

    1. Sam

      我不明白关于它的所有炒作。IE 从 1994 年就开始支持它了……？那么重点是什么？重点是您可能会以非法的形式分发受版权保护的字体，您甚至可能在将您的客户置于不利境地的情况下这样做。

      因此，这适用于免费字体（基本上是 90% 的垃圾或无用字体），而不适用于受版权保护的字体。

      所以，小心点，别让你们的指头被烧了，伙计们。

      2010 年 4 月 29 日 下午 6:06

  33. Koolwriting.com

    如果我们不能内联使用，它就不会像病毒一样流行起来。它也适用于内联，比如使用“span”标签吗？

    例如，假设有人想要“kool”的猫、狗等的符号。如果我能说：“来吧，复制粘贴这行代码。”，人们就会使用它。

    但是，如果尝试新字体需要在代码的不同部分连接“style”引用，这会让人困惑，您就不会看到非专业人士的采用和创造性的实施。

    2009 年 7 月 14 日 下午 12:37

  34. ugh

    Ugh，让我们都受制于全世界毫无品位的“设计师”。我将继续使用“允许页面选择自己的字体”关闭浏览，谢谢。

    2009 年 7 月 16 日 下午 5:32

  35. stk

    我发现这篇文章很令人兴奋。我继续进行实验（并成功）跨浏览器字体嵌入，并为任何有兴趣在其网页中嵌入花哨字体的人创建了一个教程。

    底线：有了 FFx 对 @font-face 的支持，现在可以使用 FFx、Safari、IE6、IE7 和 IE8（据称 Opera v10 和 Google Chrome 很快就会支持）进行跨浏览器字体嵌入。

    我的观察：在所有渲染嵌入字体的用户代理中，FireFox 是唯一一个显示明显延迟的用户代理，即在加载包含嵌入字体的页面时（即页面最初使用 – 假设“默认”字体 – 进行渲染，然后重新渲染并“闪烁”，加载嵌入的字体）。

    这种文本替换重新渲染非常烦人，我想知道是否有办法让 FireFox 纠正这个问题，因为其他用户代理似乎已经做到了？

    (在我的“跨浏览器字体”文章和“网络排版的潜力”文章中都注意到了 FireFox 的行为)。

    干杯，
    -stk

    2009 年 7 月 18 日 上午 8:49

  36. Matthew

    感谢您分享此演示。我注意到您的演示页面在 Mac 上使用 FF 3.5.2 运行良好，但在 Windows 上使用 FF 3.5.2 则完全无法运行。这两个浏览器都允许页面选择自己的字体。有什么想法吗？

    此致，
    Matthew

    2009 年 9 月 1 日 上午 12:41

  37. Vivian

    尽管这令人兴奋，但我忍不住担心 @font-face 会导致互联网上出现大量丑陋的排版。

    希望它能让互联网变得更美丽，而不是像一群设计师喝醉了潘趣酒，然后到处吐字体一样。

    我的完整博客文章：http://blog.twg.ca/2009/09/4-fears-of-font-face/

    2009 年 9 月 8 日 上午 8:17

  38. stk

    @Matthew … 这页面在我的 winFireFox3.5.2 中运行良好 … 不知道问题可能是什么

    2009 年 9 月 9 日 上午 12:54

  39. Wtk

    除了 CSS 之外，字体是如何进入页面的？它是否临时安装在最终用户的计算机上？

    2010 年 5 月 13 日 上午 5:14

  40. Bhupesh

    嗨，
    我在 Firefox 3.5 上使用 NoScript 扩展尝试了这个，如果启用了 NoScript，它就无法正常工作。

    这是为什么？如果这是纯 CSS 问题，它与 javascript 有什么关系？

    2010 年 9 月 21 日 下午 10:18

    1. Bhupesh

      好吧，事实证明，noscript 不喜欢 @font-face 属性。
      否则即使在浏览器本身中关闭了 js，它也能正常工作。

      2010 年 9 月 21 日 下午 10:30

      1. John Drinkwater

        NoScript 默认情况下阻止加载 @font-face，因为它可能用于在您的系统上运行恶意代码（通过缓冲区溢出等）。
        http://hackademix.net/2010/03/24/why-noscript-blocks-web-fonts/

        2010 年 9 月 26 日 上午 7:24

  41. Yoga Das

    我使用 @font-face {
    font-family:”Concielian Break”;
    src: url(“../font/concav2.ttf”)
    }

    但这种字体在 mozilla firefox 中没有显示。

    2011 年 3 月 12 日 上午 6:15

本文的评论已关闭。