如果有人了解我,通常是两件事之一:我有两只极其毛茸茸的狗,或者我喜欢字体和排版。就像,真的真的很喜欢它们。所以,虽然我对Tristan 在水疗方面做得如何 非常兴奋——我们现在步行距离比几个月前增加了 50%,而且不用中途休息——我更激动的是可变字体。

我知道,你们可能都非常震惊。
自从三年前它们被引入以来,我一直对它们非常专注,我认为它们将成为一件大事。但它还没有达到那个临界点——至少还没有。但有一些事情正在融合在一起,让我觉得今年可能就是突破年。让我退一步解释一下。
查看 Pen
可变字体,带轮廓 by Jason Pamental (@jpamental)
on CodePen.
未来是可变的
可变字体是 OpenType 字体规范的演变,它允许单个文件包含字体设计者想要公开的宽度、粗细、倾斜、斜体以及几乎任何其他字体变体的所有变体——所有这些都在单个文件中。该文件非常高效,因此它比所有单独的文件都要小得多。对于网络来说,这意味着在许多情况下,我们可以节省相当多的数据下载量,减少 HTTP 请求的数量,并且总体上大大提高我们可用的设计灵活性。与我们过去 10 年一直在使用的那些普通的静态网络字体相比,这是一个相当大的变化。关于它们有很多好东西(我已经写了一些这里、这里、这里 以及这里),但你也可以浏览标签就在 CSS Tricks 上。
此浏览器支持数据来自Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及其更高版本上支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
66 | 62 | 否 | 17 | 11 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 11.0-11.2 |
现在浏览器支持已经非常完善(大部分情况下除了 IE11 和一些 Android 浏览器,比如百度和 UC),可变字体的可用性正在提高(查看v-fonts.com),并且 Google 正在通过他们的新 API 推出对它们的 支持——感觉这可能最终成为它们的突破之年。
最让我兴奋的是我们将会看到人们创造的东西。我确信起初它会是大量的“剥离和替换”,类似于我们在 Nielson/Norman 集团网站上看到的那样,他们在去年将 Source Sans Variable 添加到他们的网站上,或者Google 在过去几个月里每天在网站上测试了 1.48 亿次 Oswald Variable。基本上只是使用它来代替几个静态实例,以获得更快页面加载和更少代码的好处。
这很棒,但这仅仅是一个开始。
我期待看到的是人们拥抱这些字体可以实现的所有功能。从超轻到超重,从超紧凑到特宽。任何字体支持的内容都可以在那里供我们探索。我希望看到设计师深入研究并探索优秀排版的强大功能。能够更多地发言,并以不同的音量来帮助我们在网站和应用程序中进行引导的字体。能够引导我们从这里到那里的运动中的字体。
查看 Pen
布局变化,第二部分 by Jason Pamental (@jpamental)
on CodePen.
它会很糟糕吗?
可能吧。但是早期的响应式网站也是如此。以及许多刚推出时使用静态网络字体的网站。或者基于 Flash 的网站。所有这些都是我们在网络上可以设计和制作的内容的演变。我们有责任做得更好而不是更糟。我很高兴能一起学习。
毕竟,如果字体是我们话语的声音——使用可变字体——这个声音已经变成了合唱团。