js字体溢出字体变小_如何在网络上使用可变字体

最新推荐文章于 2021-11-15 09:00:52 发布

daique1908

最新推荐文章于 2021-11-15 09:00:52 发布

阅读量365

点赞数

文章标签： java python 大数据编程语言 css

js字体溢出字体变小

可变字体是由从事字体设计的四家最大的技术公司——Apple，Google，Microsoft和Adobe共同开发的。顾名思义，可变字体允许设计人员从同一个字体文件中获取无限数量的字体变体。这样，可以将字体调整为不同的设备，视口，方向和其他设计约束。

您可以下载的示例

每月只需$ 16.50即可订阅Envato Elements，您将可以使用这些可变字体以及数千种其他图形和网络资产！

注意：除最后一个示例外，这些字体均以建议的.woff2格式提供（请继续阅读以了解有关格式的更多信息）。要自己转换为.woff2，可以使用convertio.co或Google的woff2之类的工具。

尼克纳克

个性十足的字体怎么样？在v-fonts.com上观看演示，并通过您的Elements订阅来获取它。

制造厂

勤劳，坚韧，强大。制造商为自己站起来。

Figuera可变字体

Figuera是一种详细的装饰字体，您可以根据自己的喜好控制多种变体。

为什么要使用可变字体？

可变字体大大减少了当前字体格式的限制。当今的网络字体不灵活，缩放比例也不是很好。他们只为我们提供了一些固定样式，例如“ Light”，“ Bold”或“ Extra Bold”。甚至有些字体只有一种重量或倾斜度。但是，通过可变方法，我们可以获得重量，倾斜度，x高度，平板，舍入和其他印刷属性的无限灵活性。

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

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

因此，这是一个简短的比较：

Roboto：十二个字体文件，十二个变体。
可变字体：一个字体文件，无限变体。

正如您已经可以想象到的那样，采用这种新方法，我们的印刷选项有了令人难以置信的增长。从实用的选择，到微妙的方式，再到更多..实验！

我希望你不介意我tootin'我自己的号角，但也有一个可变颜色的字体的辉煌创举叫做...蒲慕明先生： https://t.co/aE2qWE69Cm pic.twitter.com/X3ylXzqtnT
-Roel Nieskens（@PixelAmbacht） 2018年5月8日

从OTF和TTF到WOFF字体格式

那么可变字体使用什么文件格式？最早的时候，它们是作为OpenType字体格式的一部分创建的：

“ OpenType字体的扩展名可以是.OTF或.TTF，这取决于字体的轮廓类型以及创建者对不支持本机OpenType的系统的兼容性的期望。” – Microsoft文档

为了完全准确，OpenType字体文件规范的版本1.8中引入了包含变体的功能。 OpenType是TrueType字体格式的扩展，因此可变字体以.otf或.ttf文件形式提供。

但是，如今大多数可变字体都打包为WOFF2字体（推荐从WOFF2升级为WOFF2 ）。这些仍然是OTF或TTF字体，但是使用特定的Web安全压缩技术。 WOFF是Mozilla基金会，Microsoft和Opera Software共同合作的结果。

“ WOFF文件是OpenType或TrueType字体，应用了格式特定的压缩并添加了其他XML元数据。” – 维基百科

正如我们在上面的可下载示例中提到的，并非所有字体包都包含.woff或.woff2格式。

“您可以下载TTF格式的可变字体，而不是将其作为预压缩文件。您肯定要将其转换为.woff2。 Google提供了一个命令行工具woff2来简化它。” – 奥利·威廉姆斯

设计轴

有了这些新规范，字体变体使我们能够沿众多设计轴对字体进行插值- 根据Adobe Typekit Blog的数据，最多可以达到64,000。

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

体重<wght>
宽度<wdth>
光学尺寸<opsz>
倾斜<slnt>
斜体<ital>

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

在下面，您可以很好地说明设计轴的工作方式（摘自John Hudson在Medium.com上的文章，Typekit将其称为可变字体的非官方公告）。它演示了具有重量，宽度和光学尺寸轴的三轴可变字体：

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

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

当然，现实生活中的3轴可变字体不一定是立方体，而是矩形长方体，因为在大多数情况下，不同的轴长度并不相同。

命名实例

可变字体仍然允许类型设计者定义命名实例，即无限数量的选项中的特定字体变体。例如，Adobe的可变字体原型包含两个轴（粗细和对比度）和八个命名实例（超轻，轻，常规，半粗体，粗体，黑色，黑色中等对比度，黑色高对比度）。

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

将可变字体添加到网页

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

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

@font-face {
  font-family: 'FF Meta VF';
  src: url('MetaVariableDemo-Set.woff2') format('woff2');
}

您可以在Axis Praxis网站v-fonts.com上，不同类型设计公司（例如Type Network ）的GitHub页面上找到更多示例，并且Typekit还开始发布其最受欢迎的Adobe Originals的可变字体版本。家庭。

上面的FF Meta示例由Codepen上的Jason Pamental进一步开发。

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

使用CSS设置字体变化

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

示例：Decovar

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

根据Decovar的GitHub文档，以下是我们可以使用15轴可变字体实现的一些变体：

在CSS中，我们必须定义所有十五个轴（内嵌，剪切，圆形平板，条纹，蜗杆末端，内嵌骨骼，开放式内嵌末端，内嵌末端，蜗杆，重量，扩口，扩口，倒圆，蜗杆骨骼，平板，分叉）。

div {
    font-family: Decovar;
    color: white;
    background-color: rgb(0, 162, 215);
    font-size: 157.12px;
    text-align: left;
    padding-top: 20px;
    font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594, 
        'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268, 
        'TOIL' 0, 'TINL' 91.983, 'WORM' 0, 'wght' 400, 'TFLR' 0, 
        'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
}

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

最小值和最大值之间的轴可以使用任何值（甚至是浮点数）。

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

上面CSS生成以下字体变体：

寻找可用范围

哪里可以找到范围？字体文件包含保存所需数据的字体变化（fvar）表。但是，要访问该信息，我们需要使用诸如FontView之类的工具查看字体文件的内容。有时，字体文档中包含范围，但不幸的是，并非总是如此。

高级CSS属性

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

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

font-weight （将控制wght轴）
font-stretch （将控制wdth轴）
font-style （将控制slnt和ital轴）
font-optical-sizing （将控制opsz轴）

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

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