variable fonts - 更小更灵活的字体

原文连接

variable fonts（下文中vf为缩写）是数字时代制做的字体技术，用更小的文件大小在web上提供更丰富的排版，可是一项新的技术每每伴随着新的挑战和复杂未知的状况。不过，咱们要拥抱技术，那么怎么才能使用它呢？

让咱们从如下几个问题去学习一下variable fonts。

• 什么是variable fonts?
• variable fonts能作什么
• 拉伸或者扭曲字体会不会有很差的效果和影响？
• variable fonts有哪些优势？
• 怎么在web上使用variable fonts？
• 有哪些潜在的缺陷须要注意？
• variable fonts什么时候才会相对成熟？

什么是variable fonts?

有人解释它为一个存在多种字体格式单字体文件。通常来讲，字体的不一样格式，好比斜体、粗细、拉伸存储在分开的单个文件内，而如今，你能够存储多种字体格式在一个openType可变字体文件内，正由于如此，这个vf文件相对来讲体积会更小。

多个静态字体文件能够被存储到一个vf文件

由于只有一种排版的轮廓点，因此文件体积很小。这些点决定了文字的直接表现。修改轮廓点的位置意味着可以动态的在浏览器里改变文字的样子。这使得在半粗体和粗体之间的转换成为可能。向下面这样：

修改vf字体的例子，这些轮廓点的数量没有变化，仅仅是位置发生了改变

在各类轴(将一个可修改范围抽象化为一条(x)轴，或者说横坐标)上能够以很是小的数值进行改变，好比粗细轴，一点点的修改就会发生很大的风格变化，像regular和font-weight: 700之间有其余的值能够进行指定。

一个vf字体能够有不少相似的轴，好比增长一个身高轴，就能延伸出更多风格的字体。也能够想一想成为一个有x和y的坐标轴，当x轴的可修改范围为50，y轴的可修改范围为500的时候，你就会获得25000种不一样风格的字体，而且文件大小也很可观。

各类各样的字体

variable fonts能作什么？

这个得根据字体的设计来决定，字体的设计提供了各类各类能够被修改的轴，好比粗细，长短以及任何合理范畴以内的。下面提供五个经常使用的保留轴:

• wdth: 用于修改字的宽窄
• wght: 用于修改字的粗细
• ital: 是否倾斜，0为非倾斜，1为斜体
• slnt: 用于修改字的倾斜程度
• opsz: 对于字形的修改(待确认)

尽管宽窄、粗细是更为常见的供修改轴，可是也有一些自定义轴，好比衬线(衬线是字的笔画开始和结束部分的额外装饰)轴等。

经过改变轴生成的动画，有没有很酷炫？

拉伸或者扭曲字体会不会有很差的效果和影响？

当vf字体改变宽窄、粗细或者其余维度的时候，不会形成很差的影响。可是若是换作transform: scaleX(0.5)，就会发生很差的影响，由于它直接修改了字体的设计，设计师看了会打人。

为何拉伸或者扭曲字体是一个很严重的问题？由于字体设计师在每一个字符的协调上下了不少心血，因此这样的字体符合正常的审美。而草率的拉伸或者扭曲字体会致使设计师的心血功亏一篑。即便修改以后的不一样是很微小的，可是也会影响字体总体的外观和感受。

仔细看上面这张图中的字母O，下面的O已经超出蓝色范围，而上面的依旧保持的很好。吐槽，本人没以为有啥美感的丢失

variable fonts有哪些优势？

最明显的优势，或许你已经想到了，就是提供丰富的自定义web字体

网站开发者能够利用不一样风格的字体去突出某些部分的趣味性和重要性，网站能够以编辑设计的方式处理更多的排版，提供更丰富的视觉展现和个性化方案。我建立了一个测试网站，在这个网站上，我限制颜色风格，换句话说，我仅仅用了4种左右的颜色来表现网站的层次感，而后用了多达18种的字体去丰富网站。在我看来，这样比减小样式风格更加简介和独特。你能够点击右下角按钮来切换不一样的字体主题，得到不一样的体验。

一个使用字体变换改变网站风格的测试网站

更小的文件体积

vf字体用更小的文件带来更多的可选风格。好比你想使用三四种不一样粗细的字体，你能够用vf字体来得到更小文件体积的收益。举个例子：Süddeutsche Zeitung Magazin
该网站的字体加起来一共有236kb大小，其中四种不一样粗细的字体加起来共166kb，若是换用vf字体，能够较少到80kb，足足减小了50%！

若是使用vf字体，至少能够节约一半的带宽

细颗粒度的控制

vf字体在如何渲染字体上提供细颗粒度的控制，你能够设置font-weight:430来提供更好地效果。由于这是一个可选的，因此像font-weight:bold这样的方式，仍然是奏效的

更好地文字适配

若是vf字体提供宽窄轴操做能力，你可让文字在移动设备上有更好的可读性。在宽一点的屏幕上，也能更好地利用空间。这个例子能够很清晰的展现这种效果: browser example

与动画结合

全部轴均可以经过css来产生一个过渡的动画效果。这能让你的网站带来很酷和充满活力的效果。在微软示例页面中，你能够经过滚动来查看使人印象深入的动画效果。

一种更重视视觉美的文字

这个概念来自印刷技术，一般指在小字号的时候更加可读，大字号的时候更加富有个性。在金属活字时期(使用金属做为载体的活字印刷术)，只能经过修改的文字尺寸来进行优化。后来，经过数字化技术，你能够设计一个适配全部尺寸的字体。如今相同的状况随着vf字体的出现得以解决。例如，小字号的时候笔画能够更粗一点，这意味着更低的对比度使可读性更高。另外一方面，当大字号的状况下，空间更多，因此有更多的操纵性，和对比度。相似的变化在vf字体中能够在单一文件内逐渐产生。

怎么在web上使用variable fonts？

1. 找到可用的vf字体
   这个技术仍是很是积极地，因此，若是你想使用它，你首先要找到相关资源。这有一个资源能够供你使用，在这个网站里你能尝试不少vf字体，不少都是在github开源，而且能够直接下载的。这也有一些很不错的资源

2. 整合到你的网站中的样式表内
   2018上半年，超过通常的浏览器已经支持的很好了。

   经过@font-face引入到页面内：
   css @font-face { font-family: 'VennVF'; src: url('VennVF_W.woff2') format('woff2-variations'), url('VennVF_W.woff2') format('woff2'); }
   找到字体可变轴和可变范围，根据设计的不一样的vf都有不一样的轴和不一样的范围，若是你不知道vf字体能作什么改变，你可使用在线工具，他也能够帮你生成现成的css。
   而后咱们进行css的开发，不过在这以前，先说一下即将在css4字体模块中增长的能够设置vf字体的高级属性：
   • font-weight：能够设置1-999的任意数值
   • font-stretch：是一个百分比的值，100%是正常的，50%是紧缩的，200%是拉伸的，其对应的关键字应该可使用，这对印刷来讲是可怕的，由于它不能拉伸字体，拉伸字体会致使很差的结果，可是vf的改变是在涉及范围内的拉伸，是能够接受的。
   • font-style：一个倾斜的属性，从-90deg到90deg，固然关键字也是可使用。90deg看起来是奇怪的，8deg是大部分字体中采用的最大值。
   • font-optical-sizing：这是一个新的属性，有两个可选属性auto和none。通常来讲，浏览器会设置为auto，但你也能够设置为none

   不是全部vf字体都能控制上面的属性，这得根据字体的设计和可用范围来决定。我作了一些测试，safari支持font-weight和font-stretch，而且，若是optical可用，它会自动打开optical sizing。可是使用font-style: italic的结果是，没有更新vf字体的italic轴范围。

   只有在sarari上，这些高级属性兼容的还能够。因此，若是想保证稳定性，你须要使用一个低级的属性：font-variation-settings，你能够设置四部分，其实和上面的差很少。

   p {
       font-family: "VennVF";
       font-variation-settings: "wght" 550, "wdth" 125;
   }

   这段代码改变字体粗细为550，还有宽窄为125。在不远的未来，你或许可使用高级属性来获得一样的效果：

   p {
       font-family: "VennVF";
       font-weight: 550;
       font-stretch: 125%;
   }

   固然，vf字体其实还有更多的自定义轴可使用，均可以使用font-variation-setting属性来设置：

   h1 {
       font-family: 'VennVF', sans-serif;
       font-variation-settings: "TRMC" 0, "SKLA" 0, "SKLB" 0, "TRME" 0;
   }

   效果看起来像这样：

3. 兼容不支持vf字体的浏览器

   若是你如今就想使用vf字体的话，在不支持的版本上，网站风格会和你想象中的彻底不同，因此咱们须要一个回退方案，这个利用的css的特性查询功能：
   css @supports (font-variation-settings: normar){ /* set some property */ }
   点击查看@supports的各浏览器兼容，我的认为兼容仍是能够的。
   而后，像下面这样设置vf，就能够适配大部分浏览器了：
   ```css
   body {
   font-family: 'Venn', sans-serif;
   }

   @supports (font-variation-settings: normal) {
   body {
   font-family: 'VennVF', sans-serif;
   }
   }
   ``解释一下：首先上面的body为正常的字体，下面为积极地作法，若是支持font-variation-settings`，那么就采起vf字体，而后能够设置一些具体的字体细节。不然会静默失败。
   可能有人会用:not来配合@supports，有时候匹配成功不是由于not，而是由于@supports不支持，因此尽可能避免。

有哪些潜在的缺陷须要注意？

vf字体为web字体带来了新的活力和发灰控件，可是，一项新的技术每每会伴随着不少咱们须要注意的问题。

• 太多的选项
• 更多的与web无关的字体只是须要学习
• vf字体不必定总会对性能有所提升
• 你也许仍然须要多个字体文件以适配某些字体，好比罗马字体和斜体
• 可能会由于著做权、许可证而形成其余问题

variable fonts什么时候才会相对成熟？

2018年大部分浏览器都已经支持了，很快移动设备也会支持，由于vf会节约很大的带宽。我期待2019年vf字体可以替换静态字体被用在各个web站点中。adobe和谷歌会在推进这项技术中必定会占主要部分，由于他们一样须要减小字体文件大小，虽然不知道这件事何时会发生。可是必定会很快。
我对文件大小没有太大的兴趣，我更多的兴趣实在使用更少的样色主题和更多的字体去设置网站的风格，像这个网站。

参考连接

• 更好地方案去使用vf字体
• vf字体详细说明
• 可变字体
• 字体历史