variablefonts（下文中vf为缩写）是数字时代制作的字体技术，用更小的文件大小在web上提供更丰富的排版，但是一项新的技术往往伴随着新的挑战和复杂未知的情况。不过，我们要拥抱技术，那么怎么才能使用它呢？
让我们从以下几个问题去学习一下variablefonts。
有人解释它为一个存在多种字体格式单字体文件。一般来说，字体的不同格式，比如斜体、粗细、拉伸存储在分开的单个文件内，而现在，你可以存储多种字体格式在一个openType可变字体文件内，正因为如此，这个vf文件相对来说体积会更小。
多个静态字体文件可以被存储到一个vf文件
因为只有一种排版的轮廓点，所以文件体积很小。这些点决定了文字的直接表现。修改轮廓点的位置意味着能够动态的在浏览器里改变文字的样子。这使得在半粗体和粗体之间的转换成为可能。向下面这样：
修改vf字体的例子，这些轮廓点的数量没有变化，仅仅是位置发生了改变
在各种轴(将一个可修改范围抽象化为一条(x)轴，或者说横坐标)上可以以非常小的数值进行改变，比如粗细轴，一点点的修改就会发生很大的风格变化，像regular和font-weight:700之间有其他的值可以进行指定。
一个vf字体可以有很多类似的轴，比如增加一个身高轴，就能延伸出更多风格的字体。也可以想想成为一个有x和y的坐标轴，当x轴的可修改范围为50，y轴的可修改范围为500的时候，你就会得到25000中不同风格的字体，并且文件大小也很可观。
各种各样的字体
这个得根据字体的设计来决定，字体的设计提供了各种各种可以被修改的轴，比如粗细，长短以及任何合理范畴之内的。下面提供五个常用的保留轴:
尽管宽窄、粗细是更为常见的供修改轴，但是也有一些自定义轴，比如衬线(衬线是字的笔画开始和结束部分的额外装饰)轴等。
通过改变轴生成的动画，有没有很酷炫？
当vf字体改变宽窄、粗细或者其他维度的时候，不会造成不好的影响。但是如果换做transform:scaleX(0.5)，就会发生不好的影响，因为它直接修改了字体的设计，设计师看了会打人。
为什么拉伸或者扭曲字体是一个很严重的问题？因为字体设计师在每个字符的协调上下了很多心血，所以这样的字体符合正常的审美。而草率的拉伸或者扭曲字体会导致设计师的心血功亏一篑。即使修改之后的不同是很微小的，但是也会影响字体整体的外观和感觉。
仔细看上面这张图中的字母O，下面的O已经超出蓝色范围，而上面的依旧保持的很好。吐槽，本人没觉得有啥美感的丢失
一个使用字体变换改变网站风格的测试网站
如果使用vf字体，至少可以节约一半的带宽
vf字体在如何渲染字体上提供细颗粒度的控制，你可以设置font-weight:430来提供更好地效果。因为这是一个可选的，所以像font-weight:bold这样的方式，仍然是奏效的
这个概念来自印刷技术，通常指在小字号的时候更加可读，大字号的时候更加富有个性。在金属活字时期(使用金属作为载体的活字印刷术)，只能通过修改的文字尺寸来进行优化。后来，通过数字化技术，你可以设计一个适配所有尺寸的字体。现在相同的情况随着vf字体的出现得以解决。例如，小字号的时候笔画可以更粗一点，这意味着更低的对比度使可读性更高。另一方面，当大字号的情况下，空间更多，所以有更多的操纵性，和对比度。类似的变化在vf字体中可以在单一文件内逐渐产生。怎么在web上使用variablefonts？有哪些潜在的缺陷需要注意？vf字体为web字体带来了新的活力和发灰控件，但是，一项新的技术往往会伴随着很多我们需要注意的问题。
警告:为了能够在您的操作系统上正确地使用可变字体，请确定您的操作系统已经升级到最新版本。例如各Linux发行版，应将Freetype升级到最新版本。10.13版本之前的macOS不支持可变字体。如果您的操作系统没有升级到最新版，您将无法在网页和FirefoxDeveloperTools中使用可变字体。
为了更好的理解可变字体有什么不同，我们有必要回顾一下什么是非可变字体，并对二者进行一番比较。
过去，一个字体家族往往由大量独立字体文件组成，每个字体文件都代表某一特定的宽度/字重/样式的组合。因此你会看到有单独的字体文件叫做“RobotoRegular”、“RobotoBold”，或是“RobotoBoldItalic”——这意味着你可能需要20或30个不同的字体文件才能算是有了一整个字体家族（对于有着不同宽度的大型字体来说，这个数量还要翻上几倍）。
在这样的情景下，为了在一个单纯显示进行正文展示的页面中使用一个字体，你至少需要四个字体文件：常规、斜体、加粗、斜体加粗。如果你想添加更多的字重，比如让题注更轻或让额外强调的地方更重，意味着你需要更多文件。这就导致了更多大量HTTP请求的产生，同时也需要下载更多的数据（通常每个文件至少有20k或更多）。
通过使用可变字体，所有这些情况的排列组合都可以被装进一个文件中。这个文件可能比常规的单个字体文件大一些，但通常情况下，都不会大于，并且常常是小于你因为要展示正文所需要下载的四个文件的尺寸总和。使用可变字体的优势是你可以直接使用所有可用的字重、宽度和样式的字体，而不必像过去一样仅仅受限于使用其中单独的某一种。
这允许使用常见的排版技术，例如在不同的字重中设置不同大小的标题，以便在每种大小下都具有更好的可读性，或者在数据密集展示时使用稍窄一点的字体宽度。相比之下，在杂志的印刷系统中，在整个出版物中使用10-15种或更多不同的字重和宽度组合是很典型的——这比目前在web上的典型样式提供了更广泛的样式范围(或者仅从性能方面考虑确实很实用)。
您可能注意到，我们一直在讨论为每种权重和样式(即粗体，斜体以及斜体加粗)创建特定的字体文件，而不是依赖于浏览器来合成它们。这样做的原因，是大多数字体对于粗体和斜体都有非常特殊的设计，它们通常包含完全不同的字符(例如，小写字母的“a”和“g”在斜体中常常是完全不同的)。在使用非可变字体时，为了最准确地反映字体设计，避免浏览器之间的差异以及它们如何合成或不合成不同的样式，在需要的地方加载特定的字体文件会更为准确。
您可能还会发现一些可变字体分为两个文件：一个用于正体及其所有变体，另一个包含斜体变体。有时这样做是为了在不需要或不使用斜体的情况下减小整体文件大小。在所有情况下，仍然可以通过通用的font-family名称链接它们，以便您可以使用相同的font-family和相应的font-style来调用它们。
可变字体新格式的核心是可变轴的概念，其描述了字体设计中某一特性的允许变化范围。例如‘字重轴’描述了字体的粗细；“宽度轴”描述了字体的宽窄；“斜体轴”描述是否使用斜体字形并且可相应地开关；等。请注意，轴既可以是范围选择又可以是开关选择。字重可能在1-999之间，而斜体可能只是简单的0或1（关闭或打开）。
如规范中所定义，存在两种变形轴，注册轴和自定义轴：
注册轴最为常见，常见到制定规范的作者认为有必要进行标准化。目前注册的五个轴是字重，宽度，倾斜度，斜体和光学尺寸。W3C已经将它们映射到现有的CSS属性，并在一个案例中引入了一个新的属性，您将在下面看到。
自定义轴实际上是无限的：字体设计师可以定义和界定他们喜欢的任何轴，并且只需要给它一个四个字母的标签以在字体文件格式本身中识别它。您可以在CSS中使用这些四个字母的标签来指定沿该变化轴的点，您也将在下面的代码示例中看到。
在本节中，我们将通过示例和相应的CSS来演示已定义的五个注册轴。在可能的情况下，包括标准语法和低级语法。较低级语法(font-variation-settings)是为了测试对可变字体支持的早期实现而实现的第一个机制，并且需要使用五个注册轴之外的新轴或自定义轴。但是，W3C的意图是在其他属性可用时不使用此语法。因此，应尽可能使用相应的属性，font-variation-settings的低级语法仅用于设置值不可用的值或轴。
当使用font-variation-settings时，请务必注意轴名称区分大小写。注册轴名称必须为小写，自定义轴必须为大写。例如：
font-variation-settings:'wght'375,'GRAD'88;wght(weight)是一个注册轴，GRAD(grade)是一个自定义轴。
字宽（由wdth标签表示）定义字形可以是多窄或多宽（印刷术语中称为压缩或扩展）的设计轴。这通常在CSS中通过使用font-stretch属性设置，该属性值表示为高于或低于“正常”的百分比（100％），任何大于0的数字在技术上都是有效的-尽管它的范围更有可能是接近100％的，例如75％-125％。如果提供的数字值超出了字体编码的范围，浏览器应该以允许的最接近值渲染字体。
注意:在使用font-variation-settings时不需要使用%。
font-stretch:115%;font-variation-settings:'wdth'115;斜体Italic（ital）轴的工作方式不同，因为它仅可以打开或关闭;而没有中间值。斜体设计通常包括与其正体截然不同的字形，因此在从正体到斜体的过渡中，通常会发生许多字形（或字符）替换。Italic和oblique通常可以互换使用，但事实上实际上是完全不同的。在这种情况下，Oblique定义为术语slant（参见下面的部分），并且字体通常具有一个或另一个斜体，但不是两者都有。
在CSS中，使用font-style属性对文本应用italic和oblique。
Slant（由slnt标签表示），或者它经常被称为“oblique”-与真正的斜体不同之处在于它改变了字体的角度但不执行任何类型的字符替换。它也是可变的，因为它表示为数值范围。这允许字体沿该轴的任何位置变化。允许的范围通常为0（直立）到20度—可以使用该范围内的任何数值，因此字体可以倾斜一点点。但是，-90-90度的任何值都是有效的。
这是数字字体和CSS的新功能，但其实对应于设计加工金属活字中的一项古老技艺。视觉尺寸是指基于物理尺寸改变字形的整体笔画厚度的做法。如果尺寸非常小（例如等于10或12px），则字符将具有整体较粗的笔画，可能还会进行其他小的修改，以确保以较小的物理尺寸复制和可读性。相反，当使用更大尺寸（如48或60px）时，笔画的粗细重量可能会有更大的变化，外观会更接近原始设计意图。
虽然这样做最初是为了在油墨和纸张印刷过程中提供补偿（小尺寸铅字上非常细的线会很难印上，导致字形外观残损），但现在它很好地转化为在数字显示中对屏幕质量和物理尺寸渲染的补偿。
光学尺寸值通常旨在根据font-size自动应用，但也可以使用较低级别的font-variation-settings语法进行操作。
创建了一个在CSS中中支持可变字体的新属性font-optical-sizing(en-US)。使用font-optical-sizing时，唯一允许的值是auto或none-因此该属性仅允许打开或关闭光学尺寸。但是，当使用font-variation-settings:‘opsz’时，您可以使用数值。在大多数情况下，您可能希望将font-size（正在渲染的类型的物理大小）与opsz值（使用auto时应用光学尺寸的方式）进行匹配。提供了特定值，以便在必要时（为了易认性，美观或其他原因）可以应用特定值来覆盖默认值。
font-optical-sizing:auto;font-variation-settings:'opsz'36;自定义轴自定义轴可以是字体设计师想象的任何设计变化轴。可能有一些会变得相当普遍，甚至演变成注册轴。
由于在字体设计方面有着众所周知的历史，等级可能会成为更常见的自定义轴之一。设计不同等级的字体通常是根据预期的用途和印刷技术来进行的。“等级”一词指的是字体设计的相对重量或密度，但与传统的“重量”不同之处在于文本占据的物理空间不会改变，因此改变文本等级并不会改变文本或其周围元素的整体布局。这使得等级成为有用的变化轴，因为它可以变化或动画而不会引起文本本身的回流。
基本语法是相同的，但是字体技术是不一样的，并且可变字体可以提供像对font-weight和font-stretch等描述符的允许范围，而不是根据加载的字体文件来命名。
@font-face{font-family:'MyVariableFontName';src:'path/to/font/file/myvariablefont.woff2'format('woff2-variations');font-weight:125950;font-stretch:75%125%;}注意:并非所有浏览器都实现了字体格式的完整语法，因此请仔细测试。如果您将字体格式设置为仅文件格式，而不是格式变体（即woff2而不是woff2-variations），那么支持可变字体的所有浏览器仍将渲染它们，但如果可能，最好使用正确的语法。
注意:如果使用适当的属性（即font-weight或font-stretch），提供font-weight，font-stretch和font-style的值范围将使浏览器不会尝试渲染超出该范围的轴，但不会阻止您通过font-variation-settings使用无效值，因此请小心使用。
h1{font-family:some-non-variable-font-family;}@supports(font-variation-settings:'wdth'115){h1{font-family:some-variable-font-family;}}