可变字体：它们是什么，以及如何使用它们

在本文中，我们将查看围绕变量字体的令人兴奋的新可能性 - 现在与Opentype可伸缩字体格式捆绑在一起 - 允许单个字体像多个字体一样行为。

钥匙要点

与Opentype可伸缩字体格式捆绑在一起的可变字体，允许单个字体像多个字体一样表现，并在字体本身中定义了变化，简化了字体结构并改善了性能。 可以使用字体 - 光学尺寸，字体风格，字体重量和字体 - 伸展来实现可变字体，以控制标准轴，或用于通过OPENTYPE或TRUETYPE低级控制的Font-variation-Settings CSS属性字体变体。

性能是可变字体的关键优势，其单个字体文件能够创建一系列权重，从而大大减少页面权重。 WOFF2文件格式可以进一步压缩这些字体，从而提供其他性能优势。
• 浏览器对可变字体的支持仍然有限，并且可能需要用于不支持可变字体的浏览器。这可能涉及提供不可变化的字体或使用操作系统字体后备。>
我们如何到达这里
创建HTML时，每个Web浏览器的设置仅控制字体和样式。在90年代中期，创建了基于屏幕媒体的第一个字体：佐治亚州和威尔达纳。这些以及系统字体（Arial，Times New Roman和Helvetica）是唯一可用于Web浏览器的字体（不是唯一的字体，而是我们在每个操作系统中都能找到的字体）。 随着Web浏览器的演变，Netscape Navigator上的标签之类的创新和第一个CSS规范允许Web页面控制显示的字体。但是，这些字体需要安装在用户的计算机上。
• >
>在1998年，CSS工作组提出了 @font-face规则的支持，以允许在网页上渲染任何字体。 IE4实施了该技术，但字体分布到每个用户的浏览器提出的许可和盗版问题。
• 2000年代初期，图像替换技术的兴起将HTML含量用样式的文本图像代替。每个文本都必须在Photoshop之类的程序中切成薄片。该技术具有允许设计人员使用可用的任何字体而无需处理字体许可的主要优点。
>

> 2008年， @font-face终于卷土重来了，当Apple Safari和Mozilla Firefox实施它时。这是出于为设计人员和开发人员提供自定义字体而不是无法访问的图像的简单方法的必要性。

>直到2012年CSS3字体模块到达字体，字体下载才变得可行。实施后，网页下载的字体只能在该页面上使用，而不会复制到操作系统。字体下载允许浏览器下载和使用远程字体，这意味着Web设计人员现在可以使用未安装在用户计算机上的字体。当Web设计人员找到他们希望使用的字体时，他们只需要在Web服务器上包含字体文件，并且在需要时会自动将其下载给用户。使用 @font-face规则引用了这些字体。
>要使用 @font-face规则，我们必须定义字体名称并指向字体文件：

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

字体文件可以是五种不同格式之一：TTF，WOFF，WOFF2，SVG或EOT。每个都有自己的优势和缺点。简而言之，EOT是由Microsoft创建的，仅受Internet Explorer的支持。 TTF是Microsoft和Apple创建的基本类型字体，它在任何地方都可以正常工作。 SVG基于图像替换技术，仅适用于网络。最后，Woff和Woff2也是专门为Web创建的，基本上是带有额外压缩的TTF文件。

>

>变量字体

Opentype（计算机可伸缩字体格式）的

>版本1.8于2016年发布。一项全新的技术：Opentype字体变体，也称为可变字体。

>该技术允许单个字体的行为像多种字体一样。它是通过定义字体内的变化来完成的。这些变化源于每个角色只有一个大纲的事实。构建此大纲的观点有关于如何表现的指示。没有必要定义多个字体权重，因为它们可以在非常狭窄和非常宽的定义之间插值。这也使得在介于两者之间的样式中也可以，例如，半折和粗体。这些变化可能沿字体的一个或多个轴作用。在下图上，我们在字母A上有一个大纲插值的示例。

为什么可变字体相关？> 可变字体可以为我们的字体结构和性能改进带来简单性。以我们的网站需要五种字体样式的情况为例。提供能够渲染这五种样式的单个变量字体要比加载五个不同的字体文件要小得多，更快。

>

使用变量字体

当前有两种不同的使用可变字体的方法。首先，我们将研究实施这些实施的现代方式。 CSS规范强烈使用字体 - 光学尺寸，字体风格，字体权重和字体 - 拉伸来控制任何标准轴。

>字体 - 光学尺寸
此属性允许开发人员控制浏览器是否呈现具有略有不同视觉表示的文本，以优化不同尺寸的观看。它可以不采用该值，因为当浏览器无法修改字形的形状或在可能的时候自动化时。在支持字体 - 光学尺寸的浏览器上，将值设置为自动的字体可以像下图中的字体一样变化：



>将值设置为none，字体不会有变化。>

>字体风格

>该属性指定字体是否应以正常，斜体或斜面的面部为单位。它可以采用正常，斜体或倾斜的值。

> font-weight

此属性指定字体的重量（或粗体）。要注意的一件事是，使用普通字体，可以定义命名实例。例如，BOLD与字体重量相同：700或超灯与字体重量相同：200。字体重量属性也可以是1到1000之间的任何数字，但是由于使用变量字体，因此极性，我们可以具有更细的粒度。例如，现在可以使用类似字体重量的值：200.01。

> font-tretch
此属性从字体中选择一个普通，凝结或展开的面部。就像字体重量属性一样，它可以是一个命名的实例，例如超固定或正常或百分比在0％至100％之间。此外，命名实例将映射为已知百分比。例如，传递的超敏将映射到62.5％。

>

在此示例中，我创建了一个非常简单的页面，并使用一个

标题和

段落。

请参阅codepen上的sitePoint（@sitepoint）的笔变量字体。

当前，我们未经风格的网页看起来像这样：

>
要使用变量字体，我们必须找到合适的文件。 V-Fonts项目提供了一个字体存储库，我们可以在其中搜索和实验所有类型的可变字体。我决定使用avenirnext字体，然后从其官方的github页面链接它。

> 然后，我们需要创建一个CSS文件来加载此新字体：>

参见codepen上的sitepoint（@sitepoint）的笔的变量字体。

由于浏览器支持问题，此示例仅在Safari和Chrome中应用字体变化。



>使用字体加载，我们现在可以使用字体权重属性来操纵我们可变字体的重量轴。

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

>请参阅codepen上的sitepoint（@sitepoint）的笔源变量字体。
>大多数时候我们还需要两个不同的字体文件：一个用于斜体，一个用于常规字体（罗马）。之所以发生这种情况，是因为这些字体的构造可能会完全不同。

>

使用字体变量 - 安排
使用变量字体的第二种方法是使用Font-variation-settings CSS属性。引入了此属性，以通过指定要变化的功能的四个字母轴名称及其变化值来提供对Opentype或TrueType字体变化的控制。目前，我们可以访问该字体的以下方面：
wght - 重量，它与字体权限CSS属性相同。该值可以是1到999的任何东西。
• >
wdth - 宽度，与Font-Strettret CSS属性相同。它可以使用关键字或百分比值。该轴通常由字体设计器定义以优雅地扩展或凝结。
• opsz - 光学尺寸，可以使用字体 - 光学尺寸属性打开和关闭。
斜体 - 斜体化，该斜体由字体式CSS属性控制为斜体时。
• >
> slnt - 倾斜，与字体式CSS属性相同，当它设置为倾斜时。它将默认为20度倾斜，但也可以接受-90DEG和90DEG之间的指定度。
• 根据规范，此属性是一个低级功能，旨在处理特殊情况，在该特殊情况下，没有其他方法可以启用或访问Opentype字体功能。因此，我们应该尝试使用 @font-face。
使用与上述相同的网页和字体，让我们尝试使用低级控制器在我们的字体上设置重量和宽度：
请参见codepen上的sitepoint（@sitepoint）的笔变量字体1。
声明等于以下CSS声明：>

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

性能

性能是可变字体的关键优势。 avenirnext_variable.ttf字体文件仅为89kb，但创建了一系列权重。可比较的标准字体可能具有较小的文件，但只能支持一种重量和样式。进一步的选项需要其他文件并相应地提高页面权重。
，但是我们可以走得更远。当我们谈论字体格式时，我们说WOFF2文件本质上是带有额外压缩的TTF文件。 WOFF2文件较小，因为它们使用自定义预处理和压缩算法来交付约30％的文件大小比其他格式的文件大小。

>

Google提供了一个命令行工具，该工具将压缩我们的文件将其转换为woff2格式。

在工具的官方GitHub页面上，我们可以找到有关它的所有信息。要在UNIX环境中安装它，我们可以使用以下命令：>

安装后，我们可以使用以下方式使用它来压缩我们的变量字体文件

<span><span>@font-face</span> {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>src: <span>url('AvenirNext_Variable.ttf')</span> format('truetype');
</span><span>}
</span>
<span>body {
</span>  <span>font-family: 'Avenir Next Variable', sans-serif;
</span><span>}
</span>

>我们最终得到了一个42KB文件，该文件将文件大小减半。要使用此文件，我们只需要修改来源文件及其格式即可容纳此新文件：>
>现在，我们有一个42KB文件，该文件可用于我们页面上的所有字体权重。 WOFF2格式的唯一缺点是Internet Explorer不支持它。

<span>h1 {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>font-weight: 430;
</span><span>}
</span>

>

>为不同的浏览器提供不同的文件

<span>p {
</span>  <span>font-variation-settings: 'wght' 630, 'wdth' 88;
</span><span>}
</span>

>一些现代浏览器已经支持变量字体（Firefox开发人员版本具有一定程度的支持，Chrome 62，Chrome Android，Safari IOS和Safari），但可能有些情况下，我们发现了一个。 > 为了解决这个问题，我们需要为这些浏览器提供不可变化，或者使用操作系统字体后备。> 支持变量字体的浏览器将下载标记为格式（'Woff2-variations'）的文件，而不会下载单式字体标记为格式（'ttf'）的浏览器。这是可能的，因为我们可以在每个规则中重复引用变量。如果第一个失败，则将加载第二个。就像以下内容一样：

下一个示例使用我们正在使用的文件格式的不同文件格式，但使用相同的原理：

请参阅Codepen上的SitePoint（@sitepoint）的Pen多个字体。

如果我们在支持变量字体的浏览器上检查结果，例如Chrome，我们可以看到以下内容：>

在不支持可变字体（例如Firefox）的浏览器上，将加载第二个字体，结果看起来像这样：

<span>p {
</span>  <span>font-weight: 630;
</span>  <span>font-stretch: 88;
</span><span>}
</span>

>

但是，如果我们仍然必须为不支持变量的浏览器提供不可变化的字体，那么我们是否会失去使用可变字体获得的所有性能？如果浏览器只能加载标准字体，我们将失去可变字体的性能和渲染优势。在这种情况下，最好是退回到可比的操作系统字体，而不是用许多固定字体代替。

结论
>尽管已经使用了几年，但可变字体仍处于起步阶段。浏览器支持很少，几乎没有字体可供选择。但是，潜力是巨大的，可变字体将在简化开发的同时允许更好的性能。例如，SitePoint自己的头版目前加载了八个字体文件，总计为273kb。可变字体可以降低此依赖性并进一步减少页面重量。

>

经常询问有关可变字体的问题（常见问题解答）
使用可变字体的优点是什么？首先，它们提供了与单个字体文件的广泛变化，这些文件可以显着降低文件大小并提高网站的加载速度。这对于可能有限的数据计划的移动用户特别有益。其次，可变字体允许更具创造力和响应式设计。设计人员可以调整字体的重量，宽度，倾斜和其他属性，以创建独特而动态的视觉体验。最后，可变字体可以通过允许对字体渲染的精细调整来提高文本的可读性，尤其是在小屏幕或低分辨率设备上。 >在CSS中实现可变字体涉及几个步骤。首先，您需要使用 @font-face规则导入变量字体文件。然后，您可以使用“字体变化 - 插条”属性来调整字体的变化。例如，'字体变化 - 插图：“ wght” 700;'将字体的重量设置为700。请记住，特定的变化标签（例如“ wght”重量）可能会根据字体而有所不同。

>到目前为止，所有浏览器都支持所有浏览器？但是，这些浏览器的较旧版本和一些不太常见的浏览器可能不支持它们。检查可变字体的特定浏览器支持并为无支撑的浏览器提供后备字体总是一个好主意。

我可以使用Google字体使用可变字体？ 。当您在Google字体上选择字体时，您可以选择“变量”选项以下载变量字体版本。然后，您可以在CSS中使用“字体变量 - 分配”属性来调整字体的变化。

>哪些流行变量字体？

>有许多流行的变量字体可用，包括Roboto，Source SANS，Amstelvar和Decovar。这些字体提供了广泛的变化，适合各种设计样式。您可以在v-fonts.com或Google字体等网站上找到更多可变字体。

如何创建自己的变量字体？

>

创建自己的变量字体需要字体设计和知识特定软件，例如Fontlab VI或字形。这些程序允许您设计字体的不同变化，并将它们导出为单个变量字体文件。但是，字体设计是一个复杂的过程，需要大量的练习和技能。

>可变字体的局限性是什么？

，而可变字体具有许多优势，它们也有一些限制。并非所有字体都以可变格式可用，而并非所有浏览器都支持它们。此外，调整字体的变化可能很复杂，需要对CSS和字体设计有很好的了解。最后，虽然可变字体可以减小文件大小，但如果使用了许多变化，它们也可以增加文件大小。

>

>可变字体如何改善Web性能？
可变字体可以通过降低来显着提高Web性能。需要加载的字体文件数量。网站可以加载单个变量字体文件并根据需要调整变化，而不是为不同的字体权重和样式加载多个文件。这可以降低文件大小并提高网站的加载速度。
可以动画变量字体吗？
是的，可以使用CSS动画或过渡来对可变字体进行动画。通过对“字体变量 - 插条”属性进行动画动画，您可以创建动态文本效果，以随着时间的推移而改变字体的重量，宽度，倾斜或其他属性。是可变字体。 ？虽然很难预测Web版式的未来，但可变字体当然具有发挥重要作用的潜力。它们的灵活性，效率和创造力使它们成为网页设计师的强大工具。但是，它们的采用将取决于浏览器支持，可变字体的可用性以及设计师的需求和技能。

以上是可变字体：它们是什么，以及如何使用它们的详细内容。更多信息请关注PHP中文网其他相关文章！