太原网站建设：如何在Web上使用可变字体

可变字体是由参与类型设计的四大科技公司 - 苹果，谷歌，微软和Adobe的共同努力而开发的。顾名思义，可变字体允许设计人员从同一个字体文件中导出无限数量的字体变体。通过这种方式，可以将字体调整为不同的设备，视口，方向和其他设计约束。太原网站建设

为什么使用可变字体？

可变字体显着减少了当前字体格式的限制。今天的网络字体不够灵活，不能很好地扩展; 它们只为我们提供了一些固定的样式，其名称如“Light”，“Bold”或“Extra Bold”。甚至有一些字体只有一个重量或倾斜的变体。但是，对于可变字体，我们可以获得无限的重量，倾斜度，x高度，平板，圆角和其他印刷属性的灵活性。

更好的是，可变字体可以提高性能。我们知道的Web字体需要将每种字体变体存储在单独的文件中。例如，这就是Roboto web字体的文件夹的外观：

可变字体使用单个字体文件，浏览器只需加载一次。加载后，它可以只从一个二进制文件中提供所有变体。 

所以，这是一个简短的比较：

• Roboto：12个字体文件，12个变种。

• 可变字体：一个字体文件，无限变体。

正如您已经可以想象的那样，我们的印刷选项随着可变字体的增长而难以置信 

OpenType字体格式

那么变量字体使用什么文件格式？根据官方文件：

“OpenType字体可能具有扩展名.OTF或.TTF，具体取决于字体中的轮廓类型以及创建者在没有本机OpenType支持的系统上的兼容性要求。”

为了完全准确，在OpenType字体文件规范的1.8版本中引入了可变字体。OpenType是TrueType字体格式的扩展，因此可变字体可用作文件.otf或.ttf文件。

设计轴

新的OpenType字体文件规范附带了一项名为OpenType Font Variations的新技术，它允许我们根据Adobe Typekit Blog在多个设计轴上插入字体 - 高达64,000 。

OpenType 1.8规范定义了五个注册的轴标记：

1. 重量 <wght>

2. 宽度 <wdth>

3. 光学尺寸 <opsz>

4. 倾斜 <slnt>

5. 斜体 <ital>

此外，类型设计者还可以在字体文件的“名称”表中定义自定义轴以及它们自己的四字符标记。

下面，您可以看到设计轴如何工作的一个很好的例证（来自John Hudson在Medium.com上的文章，由Typekit称为可变字体的非官方公告）。它演示了一个带有重量，宽度和光学尺寸轴的三轴可变字体：

中间的红色字形表示存储在字体中的轮廓线集，绿色字形表示三个轴的极值，橙色字形表示角点位置。 

如果我们使用这个三轴可变字体，整个立方体代表我们可以访问的设计空间。它只是一个立方体，因为字体有三个尺寸（重量，宽度，光学尺寸）。轴越少，我们将向下移向矩形（2轴）或线（1轴），并且轴越多，我们将向上移动到多维超空间。 

当然，真实的3轴可变字体不一定是立方体，但更可能是矩形立方体，因为在大多数情况下不同的轴不具有相同的长度。 

命名实例

可变字体仍允许类型设计者在无限数量的选项中定义命名实例特定的字体变体。例如，Adobe的Variable Font Prototype包含两个轴（重量和对比度）和八个命名实例（Extra Light，Light，Regular，Semibold，Bold，Black，Black Medium Contrast，Black High Contrast）。

如果我们想要将变量字体与Adobe Illustrator等设计程序一起使用，则命名实例更为重要。在Web上，我们可以使用CSS轻松生成任何实例（命名或未命名）（例如，在Adobe Variable Font中，Extra Light命名实例获取权重和对比度轴的最小值）。 

将可变字体添加到网页

我们可以使用 CSS文件顶部的@ font-face规则向网站添加可变字体。

例如，我们可以使用以下CSS规则添加Avenir Next变量字体：

您可以在Axis Praxis网站上找到更多可变字体（它还有一个可变字体的游乐场），在不同类型设计公司的GitHub页面上（例如MonoType，Type Network），Typekit也开始发布可变字体版本他们最受欢迎的Adobe Originals系列。

注意：并非您在Web上找到的每种OpenType字体都是可变字体（它们仅在1.8版本中引入）。

使用CSS设置字体变体

要定义字体变体，我们可以使用CSS字体模块级别4font-variation-settings引入的CSS属性。这是一个低级属性，允许我们通过为每个轴指定值来控制可变字体。

例1：Avenir接下来

所述艾文莉接着可变字体包含两个设计轴：重量和宽度均为注册轴。Avenir Next还有八个命名实例（常规，中等，粗体，重型，冷凝，中等冷凝，粗体冷凝，重质冷凝）。

完整的CSS（属于随机未命名的字体变体）如下所示：

我们可以使用最小值和最大值之间的轴的任何值（甚至浮点数）。在Avenir Next的情况下，我们可以使用[400,900]的重量范围和宽度轴的[75,100]范围。

哪里可以找到范围？字体文件包含保存必要数据的字体变体（fvar）表。但是，要访问该信息，我们需要使用FontView等工具查看字体文件的内容。有时字体的文档包含范围，但不幸的是，情况并非总是如此。好消息是Axis Praxis网站包含其所有可变字体的最小值 - 最大值。

例2：Decovar

Decovar是目前存在的最通用的可变字体之一。您可以在GitHub上的Axis Praxis上找到它，它还在TypeNetwork的网站上有一个演示页面。Decovar包含一个注册的（权重）和十四个自定义轴，并且还有十七个命名实例。

从Decovar的GitHub文档中，我们可以使用这个15轴可变字体实现一些变体：

我们需要使用的CSS类似于前面的示例。在这里，我们必须定义所有十五个轴（内联，剪切，圆形板，条纹，蜗杆端子，内联骨架，开放式直列终端，内联终端，蜗杆，重量，喇叭形，圆形，蜗杆骨架，平板，分叉）。

注意：我们必须为font-variation-settings属性中的所有轴指定一个值- 即使是我们不想使用的那些轴。 

在Decovar的情况下，我们可以使用0我们不感兴趣的轴的值; 这些将使用默认值呈现。但情况并非总是如此，因为它取决于字体用于不同轴的范围。Decovar很简单，因为它对所有轴使用0-1000范围，0是所有轴的默认值。

您可以font-variation-settings使用Axis Praxis生成类似的声明  ，您不必自己计算值。上面的CSS生成以下字体变体：

高级CSS属性

该font-variation-settings属性属于低级属性，根据W3C建议  ，只有在没有其他方法时才应使用该属性  。这到底是什么意思？

根据CSS 4规范，我们将来能够控制具有更高级别CSS属性的注册轴，即：

1. font-weight（将控制wght轴）

2. font-stretch（将控制wdth轴）
   

3. font-style（将控制slnt和ital轴）
   

4. font-optical-sizing（将控制opsz轴）
   

自CSS2以来存在前三个属性，但CSS4规范扩展了它们的用法。我们将能够使用它们不仅与预定义的关键字（例如，  normal或bold为font-weight）或圆形数字（例如400，600，800等），也与预定义的规模所有数字（例如，  font-weight将介于1和1000之间font-stretch会范围在50％到200％之间）。

不过，这些功能仍处于试验阶段。所以现在，合理的是继续使用  font-variation-settings，因为目前这是访问可变字体轴的最稳定属性。

支持

由于可变字体仍然很新，浏览器支持还不是很完美。最新版本的Chrome和Safari已经支持它们，但Edge和Firefox仍然落后（但Firefox Nightly和Firefox Developer Edition已经提供了可变字体）。自2017年10月发布以来，Photoshop和Illustrator也支持可变字体。

太原网站建设