网络上一种新的响应式字体格式

Nick Sherman在本月初的 Ampersand 大会上发表了一场精彩的演讲，演讲内容基于他撰写的一篇文章，名为 用于响应式设计的可变字体。在演讲和文章中，他都提出我们需要一种新的字体格式来解决复杂的响应式设计问题。

…现代字体中的字形形状被限制为单个静态配置。任何字体粗细、宽度、笔画对比度等的变体——无论多么细微——都需要单独的字体文件。在印刷设计领域，布局也是静态的，因此这个概念可能看起来并不那么糟糕。然而，在网络上，这种限制就是我所说的响应式排版的“玻璃地板”：虽然边距、行间距和字体大小等更高级别的排版变量可以根据每个阅读者的查看环境动态调整，但这种灵活性对于在字体中定义的更低级变量消失了。每个字形都像一块漂浮在一片其他方面流动设计的冰块。

在排版设计界，以这种方式操作字符通常被称为插值：设计师选择多个极点，例如粗体或细体、紧缩或扩展字符，并让一个巧妙的算法在两者之间创建值。下面的示例来自 Andrew Johnson 的 SVG 插值实验，很好地解释了这个过程。

正如 Nick 提到的，使用我们目前用于网络的字体格式，从细体到粗体或从窄体到宽体字形的插值是不可能的。然而，他并不是唯一一位呼吁改进此处的设计师，正如 Andrew Johnson 也提出了类似的请求，希望有一种响应式字体格式。

…如今的网页字体将我们的响应式网站和应用程序绑定到无法缩放的僵硬字体上。结果，我们的用户获得了糟糕的阅读体验，并且由于额外的字体粗细而导致加载时间更长。

但是，为什么我们会在字体格式中需要这样的响应式功能呢？这将如何帮助我们解决设计问题？

可变字体格式的优势

这种新的格式将为设计师提供精细的排版控制，尤其是在常规粗细看起来太细而粗体看起来太粗的时候。相反，我们可以选择细体和粗体之间的值，字体将在两者之间进行插值——换句话说，设计师将能够大幅提高可读性。

此外，我们终于可以制作出单词或句子占据其父容器整个空间的布局，就像名为 Font to Width 的演示中一样。

这种技术听起来可能类似于 FitText 或 使用视口单位设置响应式文本，但排版设计师 Erik van Blokland 概述了一个明显的区别。

宽度变化将立即应用于将排版拟合到目标矩形。单词需要能够响应页面几何形状。

因此，为了最好地响应“页面几何形状”，我们需要对应用于设计的字体有更多控制权，每个字形的宽度与能够为font-size设置响应式值一样重要。

实施新的可变字体格式的另一个原因可能是性能，因为我们只需要请求下载一个文件，而不是今天在使用需要包含超细体、细体、常规、中等、半粗体、粗体和黑色变体的大家族字体系统的时所需的多个字体。

响应式字体格式的想法并不新鲜，过去曾 多次尝试 创建非常类似的东西。Fontlab 产品总监 Adam Twardoch 在2013年呼吁复兴这些想法

在网络环境中，我认为至少其中一个可变字体模型值得复兴——因为它提供了巨大的压缩潜力，非常适合“响应式网络”范式，为网络上的文本布局提供了新的可能性，最重要的是，它在网络上的实现比在桌面平台上更容易。

Nick 继续总结了这些好处，如下所示

可变字体意味着更少的带宽、更少的服务器往返次数、更快的加载时间以及更强大的排版灵活性。这是一个全面的胜利。（这里仍然未经测试的变量是额外计算处理可能需要多长时间。）

但是，在向网络引入新的字体格式时，需要考虑很多技术因素，那么我们如何在设计中实现这些功能呢？

这种新格式如何在 CSS 中工作

在他的演讲中，Nick 建议了一个 CSS 中的实用示例，我在这里使用一个名为font-width的虚拟属性对其进行了扩展，该属性允许我们设置字符的宽度，就像我们今天可以设置元素的font-weight一样。

@font-face {  
  font-family: WebFont;
  src: url('webfont.new') format('new format');
}

body {
  font-family: WebFont;
  font-weight: 450;
  font-width: 200;
}

h1 {  
  font-weight: 600;
  font-width: 999;
}

然后，我们可以将另一个元素的font-weight设置为601或411或设计所需的任何值，文本将相应地做出响应。

现在，上面的示例肯定存在缺陷，但我认为它抓住了问题的核心，即我们的网站能够比目前更精细和细致。并且我可以想到很多示例，在这些示例中，这种新格式将创建更醒目和更漂亮的布局，更不用说它在 可缩放用户界面 中可能有多么有用。

WOFF 怎么样？

还有另一种字体格式 目前正在流行，称为 WOFF 2.0。它旨在大大改进其前身的压缩算法，并且对于需要由大量字形组成的字体的亚洲文字和其他语言来说将非常有用。但是，WOFF 2.0 仍然无法提供我们从可变字体格式中获得的设计变体，因为我们仍然需要多个字体来表示不同的宽度和粗细。

因此，我认为 WOFF 在短期内很棒，但它并没有真正帮助我们实现将这些字体格式真正变得响应式的长期目标。

潜在问题

尽管我从设计和开发方面讨论了这种新格式的优势，但它也存在问题。以下是我迄今为止发现的一些最紧迫的问题。

• 如果这种插值算法在客户端运行，那么可以说它可能会影响性能。
• 由于客户现在只需要一个字体文件，而不是今天需要的多个粗细和宽度，因此需要重新考虑网页字体的许可。
• 在这里充当一下反方：字体在用户设备上真的需要动态变化吗？
• 我与几位设计师谈过这个问题，他们提到，浏览器中半成品的提案比什么都没有更糟糕。
• 字体设计师需要弄清楚如何教育设计师，为什么这种新系统可能对他们的工作有所帮助，以及它对网络的整体益处是什么。我最近与一位字体设计师交谈，他提到他如何避免在字体中添加 OpenType 功能，例如小型大写字母和连字，因为许多平面设计师根本不知道或不在乎它们。
• 同样，字体设计师无法轻松地重新设计现有的字体以使用这些新的变量，因为他们必须从项目的开始就从头设计，才能使用这项技术。

总结

我认为，一种新的可变字体格式具有巨大的潜力，可以成为设计师工具箱中的关键部分。它也将大大改善网络普通用户的阅读体验。但这并不意味着我们可以忽视达成草案规范所必须克服的许多问题和障碍。

您怎么看？您会张开双臂欢迎可变字体文件吗？或者整个想法只是一个理想化的白日梦？我们很乐意在下面的评论中听到您的想法。

相关

• Thomas Phinney 关于多重主控的历史以及它们为何失败的演讲
• Erik van Blokland 的响应式矢量示例
• Apple 已放弃的格式 TrueType GX