Fontello:图标字体服务的过去和未来

Avatar of Vitaly Puzrin
Vitaly Puzrin 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

以下是 Vitaly Puzrin 的客座文章,他是图标字体服务 Fontello 的开发者。我也很喜欢 IcoMoon,这是一项类似的服务。但我也是竞争、分享想法和开源软件的忠实粉丝,所以感谢 Vitaly!

我的过去

我过去非常热衷于遥控模型。我实际上运营着 俄罗斯语最大的遥控模型社区。该网站至今仍在支持我,让我有空从事其他项目。今天,我和一个小团队一起开发软件,仅仅因为我喜欢编程!

我的编程生涯始于我决定彻底重写 RC Design 的软件。多年来,我(后来是我和我的团队)为 IPB 和 vBulletin 论坛开发组件。最终,我们意识到我们在修改第三方软件以满足我们的需求上花费了太多时间。最受欢迎的论坛是商业化的,它们更注重最佳销售而不是最佳质量

因此,在我们的案例中,在长期内为我们中等规模的项目投入几年时间进行开发是合理的1

第一个 Fontello 版本

在探索新技术时,我对使用网络字体显示图形的想法感到兴奋。从开发的角度来看,这非常方便。

一开始这很奇怪。为什么可用的图标字体这么少?为什么不是每个人都在使用它们?在我看来,这是因为流程出现了问题。从想法到使用的过程相当漫长且复杂

  1. 设计师设计图标
  2. 图标以矢量格式创建
  3. 将多个图标转换为字体
  4. 将这些字体转换为网络所需的格式
  5. 需要特殊的 HTML 和 CSS 来构建一个显示图标字体字形的系统
  6. 需要优化以提高效率
  7. 前端开发人员需要实际执行

此过程可能在任何一个步骤中失败。由于它涉及不同的人员:设计师和开发人员,因此这种情况尤其可能发生。这些人之间可能存在差距。

第一个 Fontello 版本旨在弥合这一差距,使每个人都更容易使用。它包含了一些现成的图标字体。您仍然可以在 GitHub 档案库 中找到第一个版本。

为什么要使用图标字体?

为了确保我们都在同一页面上,我将总结使用网络字体显示图标的优缺点。

优点

  • 字体是矢量的,因此在高分辨率屏幕上不会出现像素化或模糊,如果图形是光栅的并且需要放大,则会出现这种情况。
  • 浏览器支持与您所需的一样好
  • 一旦系统到位,使用它们就会非常方便。
    • 可以说比雪碧图更容易。
    • 它们可以用 CSS 控制,例如大小、颜色、阴影等。

缺点

  • 图标将是单色的。虽然有一些花哨的(hacky)多色技术,但现代趋势和 HIG(人机界面指南)建议使用单色。

如果您需要更多关于图标字体及其使用方法的信息,以下是一些推荐的链接

后续步骤

在我们的第一个版本发布后,Fontello(当时称为“Fontomas”)获得了非常好的评价。在项目实用性的验证下,我们重新燃起了使其变得更好的热情。我还决定将 Fontello 用作测试我想使用的全新技术的沙盒,例如 WebSockets、新库等等。

大约在同一时间,出现了新的专业(和开源)图标字体:EntypoFontAwesome。我们立即将它们包含在 Fontello 中。

字体格式问题

为了获得最佳的跨浏览器支持,网络需要四种字体格式:woffttfsvgeot。但是,如果您尝试查找字体生成库,您将不会找到太多帮助。尤其是对于ttf

据我所知,每个人都使用服务器端上的 FontForge 完成此过程。eotwoff 格式只是ttf的容器。有一些开源转换项目,例如 ttf 到 eot 的一个项目,以及 http://code.google.com/p/ttf2eot/ 和 ttf 到 woff。这些都可用,我们也在使用它们。

提示

提示是一项技术,用于使小尺寸的字母更易读。由于主题相当复杂,建议您查看 ttfautohint 实用程序网站上的精彩介绍

Fontello 可以使用 ttfautohint 添加提示。在过去,ttfautohint 仅适用于文本字体,因为它使用字母 O 来剪辑基本字体指标。但我赞助了图标字体的支持,因此现在它也可以提示这些字体。

提示对图标字体有好处吗?老实说,这取决于……建议您尝试您的项目并比较结果。您的字体是否可以在没有提示的情况下保持清晰?可以,如果它是像素完美的:仅以一种大小显示,专门为此大小绘制。例如,Entypo 字体在 20px 时清晰,FontAwesome 在 14px 时清晰。要查看这一点,请访问 Fontello 网站并拖动大小滑块,查看图标的外观如何变化。

界面细节

我决定花一些时间改进 Fontello 的界面。

当您找到喜欢的图标时,查看该图标与文本的组合方式非常方便。我们在 Fontello 的第二个选项卡中执行此操作,该选项卡也用作更改名称的位置

执行此操作的唯一正确方法是通过 @font-face 直接显示图标。任何其他技术(如 raphael 或)cuffon 都永远无法完全匹配字体指标。所以存在一个严重的问题

  • 我们必须将我们的图标集合存储在网络字体中。
  • 我们无法对自定义图标执行此操作。为服务器端上的每个自定义图标重建字体既复杂又昂贵。

由于主要目标是改进界面并使其正确,我决定暂时放弃导入功能并专注于界面可用性。老实说:只有极少数人真正需要自定义图标。也许这对“哇哦”因素不利,但 Fontello 不是一个商业项目,因此它可以忽略一些商业规则。

另一个可用性示例是 Fontello 的网站设计。基本上:没有设计:)。只是普通的 Twitter Bootstrap。为什么?因为 Fontello 只是一个开发工具。这样的工具不应美观,而应方便。Fontello 允许您

  • 搜索图标
  • 快速预览结果
  • 更改特定项目的类名

所有这些功能都可用且可访问。

开发者 API

程序员对 Fontello 有一些特定的请求和想法

  • 他们将项目的代码保存在版本控制仓库中。他们也希望将他们的 Web 字体存储在那里。
  • 他们不喜欢用鼠标拖动文件。
  • 他们希望有一种简单的方法来从仓库加载项目、更新项目并将结果移回仓库。

几个月前,我们完成了 API,使所有这些成为可能。

告别 FontForge

FontForge 作为编辑器很好,但对于自动字体处理来说并不方便。它有一些奇怪的错误,需要特定的解决方法。

最终我决定投入资源,使用Node.js从头开始编写字体转换器。那是一次最复杂的冒险。每个曾经处理过 ttf 二进制格式的人都可以告诉你,它是由外星人为掠食者设计的。无论如何,那个噩梦现在结束了,你可以享受最终的结果

此外,我们还创建了一个用于直接 SVG 路径转换(缩放、平移、绝对 <-> 相对坐标和尺寸优化)的不错的库。

当然,Fontello 不是一个完全独特的项目。组合/压缩字体的想法很简单。但据我所知,它是该领域唯一一个深入开发并以开源许可证共享所有成果的项目。

这里有一些其他地方没有记录的有趣的事实

  • 如果 ttf 字体在名称表中没有“postscript”字段,则它将无法在 Mac 的字体簿中导出。
  • eot 格式中,字体系列必须以全名开头,否则 IE 不会渲染它。

感谢开源开发,有人在我们的 GitHub 问题跟踪器中发布了此信息。

使用自定义图标

由于我们的字体转换器是用 Node.js 编写的,所以在浏览器中使代码工作并不是什么大问题。现在,Fontello 在客户端动态创建导入图像的 ttf 字体,并通过 data-URI 将其注入页面。

在预览中,您可以看到图标在生成的字体中的样子。理论上,我们应该使用 woff 格式。但是由于所有现代浏览器都支持 ttf,并且我们不太关心 IE6 的支持,因此我们使用 ttf 以节省一些时间,而不必先移植到 woff

如何请求新功能?

您可以在 GitHub 上请求任何您想要的功能。甚至疯狂的东西!只需问问自己两个问题:1)它对你真的有用吗?2)它对其他人有用吗?

举个例子。有时人们会问为什么 Fontello 不提供用户帐户来在我们服务器上存储项目。以下是我们的想法

  • 保留用户数据是一项重大责任。为了保持高服务质量,这需要投资,这意味着像经营企业一样运行 Fontello。由于 Fontello 定位为非商业项目,我们不想将其推向成为商业项目。
  • 用户不需要帐户,他们需要良好的导入和导出功能。这可以通过更好的方式实现
    • 每个生成的字体包都已具有配置文件,可以加载回 Fontello 以继续工作。只需将其(或整个存档)拖到 Fontello 网站上即可。或者使用上面描述的 API。简单!
    • 使用 GitHub 存储您的项目并控制更改。这更安全,可以保护您免受错误的影响。

每个新的功能请求都会根据增值来判断。帐户可能有利于开展业务,但它们并没有为 Fontello 用户带来明显的价值。这是一个神秘的想法,就像在注册表单上放置两次电子邮件/密码字段一样——每个人都这样做,但没有人能解释原因。

未来

您可以在此处查看完整的版本历史记录

下一步是改进搜索:允许用户更新搜索标签、显示相关图标等。一些信息可以从用户操作中提取,例如分析更改的类名。

此外,更好地连接设计师和程序员也很好。我觉得这个领域还没有得到充分的覆盖。制作完整的图标字体是一项非常大的工作。许多设计师只需要分享几个图标,但是……在哪里?允许每个人在 Fontello 上发布他们的图标将很有趣。这需要进行重大的界面重新设计。因此,如果您是界面专家并希望参与,请与我们联系!


1 我对大型现代论坛的构建愿景可以在此演示中看到。它是 HTML5、Ajax 驱动的,使用历史记录 API 和大量其他优秀的技术。