动态字体简介

本文内容主要来自How to start with variable fonts on the web

可变字体是什么?

可变字体就是将原来多个单独的字体文件用一个字体文描述出来,并且达到相对较小的文件大小。

可变字体能做什么?

一图顶万言

字体也可以动画了 Demo

它是怎么做到的?

可变字体用大纲(outline)描述一个字符,一个大纲可用多个点组成,然后可以定义多种样式在浏览器里动态的渲染或是篡改(interpolation)。 渲染可通过多种不同的轴(axes)来进行。 例如字粗(weight)轴 可以多个轴同时改变,例如weight和width轴

比较常见的轴包括
wdth for width – 字宽
wght for weight – 字粗
ital for italic – 意大利体 (这个轴很少见)
slnt for slant – 倾斜
opsz for optical size – 光学大小

光学大小的例子

在浏览器上使用

浏览器支持

拿到了一个字体怎么知道它有哪些轴?

可以使用这个工具

引用字体

@font-face {
  font-family: 'Venn';
  src: url('Venn.woff2') format('woff2-variations'),
       /* will be the standard and works in Safari now */
       url('Venn.woff2') format('woff2');
       /* for the other supporting browsers */
}

设置字体

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

效果

需要指出的问题

  • 如果你只需要一种字体,那就没必要用可变字体。
  • 针对罗马字或斜体字,你很可能仍然需要单独的字体文件。因为罗马字太特殊了。 上图可见a,g这两个字母无法用一个大纲描绘。

Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1