js字体溢出字体变⼩_如何在⽹络上使⽤可变字体
js字体溢出字体变⼩
可变字体是由从事字体设计的四家最⼤的技术公司——Apple，Google，Microsoft和Adobe共同开发的。 顾名思义，可变字体允许设计⼈员从同⼀个字体⽂件中获取⽆限数量的字体变体。 这样，可以将字体调整为不同的设备，视⼝，⽅向和其他设计约束。
fontweight属性bold您可以下载的⽰例
每⽉只需$ 16.50即可订阅Envato Elements，您将可以使⽤这些可变字体以及数千种其他图形和⽹络资产！
注意 ：除最后⼀个⽰例外，这些字体均以建议的.woff2格式提供（请继续阅读以了解有关格式的更多信息）。 要⾃⼰转换为.woff2，可以使⽤或Google的之类的 。
个性⼗⾜的字体怎么样？ 并通过您的Elements订阅来获取它。
勤劳，坚韧，强⼤。 制造商为⾃⼰站起来。
Figuera是⼀种详细的装饰字体，您可以根据⾃⼰的喜好控制多种变体。
为什么要使⽤可变字体？
可变字体⼤⼤减少了当前字体格式的限制。 当今的⽹络字体不灵活，缩放⽐例也不是很好。 他们只为我们提供了⼀些固定样式，例如“Light”，“ Bold”或“ Extra Bold”。 甚⾄有些字体只有⼀种重量或倾斜度。 但是，通过可变⽅法，我们可以获得重量，倾斜度，x⾼度，平板，舍⼊和其他印刷属性的⽆限灵活性。
更妙的是，它们提⾼了性能。 我们知道的Web字体需要将每种字体变体存储在单独的⽂件中。 例如，这是 Web字体的⽂件夹的外观：
可变字体使⽤单个字体⽂件，浏览器只需加载⼀次。 加载后，它可以从⼀个⼆进制⽂件提供所有变体。
因此，这是⼀个简短的⽐较：
Roboto：⼗⼆个字体⽂件，⼗⼆个变体。
可变字体：⼀个字体⽂件，⽆限变体。
正如您已经可以想象到的那样，采⽤这种新⽅法，我们的印刷选项有了令⼈难以置信的增长。 从实⽤的选择，到微妙的⽅式，再到更多..实验！
-Roel Nieskens（@PixelAmbacht）
从OTF和TTF到WOFF字体格式
那么可变字体使⽤什么⽂件格式？ 最早的时候，它们是作为OpenType字体格式的⼀部分创建的：
“ OpenType字体的扩展名可以是.OTF或.TTF，这取决于字体的轮廓类型以及创建者对不⽀持本机OpenType的系统的兼容性的期望。” –
为了完全准确，OpenType字体⽂件规范的中引⼊了包含变体的功能。 OpenType是TrueType字体格式的扩展，因此可变字体以.otf或.ttf⽂件形式提供。
但是，如今⼤多数可变字体都打包为字体（推荐从WOFF2升级为 ）。 这些仍然是OTF或TTF字体，但是使⽤特定的Web安全压缩技术。WOFF是Mozilla基⾦会，Microsoft和Opera Software共同合作的结果。
“ WOFF⽂件是OpenType或TrueType字体，应⽤了格式特定的压缩并添加了其他XML元数据。” –
正如我们在上⾯的可下载⽰例中提到的，并⾮所有字体包都包含.woff或.woff2格式。
“您可以下载TTF格式的可变字体，⽽不是将其作为预压缩⽂件。 您肯定要将其转换为.woff2。 Google提供了⼀个命令⾏⼯具来它。” –
设计轴
有了这些新规范，字体变体使我们能够沿众多设计轴对字体进⾏插值- 最多可以达到64,000。
OpenType 1.8规范定义了五个已注册的轴标记：
1. 体重<wght>
2. 宽度<wdth>
3. 光学尺⼨<opsz>
4. 倾斜<slnt>
5. 斜体<ital>
此外，字体设计者还可以在字体⽂件的“名称”表中定义⾃定义轴以及它们⾃⼰的四个字符标签。
在下⾯，您可以很好地说明设计轴的⼯作⽅式（摘⾃称为可变字体的⾮官⽅公告）。 它演⽰了具有重量，宽度和光学尺⼨轴的三轴可变字体：
中间的红⾊字形代表存储在字体中的轮廓集，绿⾊字形代表三个轴的端点，橙⾊字形代表⾓位置。
如果使⽤此三轴可变字体，则整个⽴⽅体代表我们可以访问的设计空间。 仅因为字体具有三个尺⼨（重量，宽度，光学尺⼨），所以它是⼀个⽴⽅体。 轴越少，我们将朝矩形（2轴）或直线（1轴）向下移动，⽽轴越多，我们将向上移动⾄多维超空间。
当然，现实⽣活中的3轴可变字体不⼀定是⽴⽅体，⽽是矩形长⽅体，因为在⼤多数情况下，不同的轴长度并不相同。
命名实例
可变字体仍然允许类型设计者定义命名实例，即⽆限数量的选项中的特定字体变体。 例如，Adobe的包含两个轴（粗细和对⽐度）和⼋个命名实例（超轻，轻，常规，半粗体，粗体，⿊⾊，⿊⾊中等对⽐度，⿊⾊⾼对⽐度）。
如果我们想在设计程序（如Adobe Illustrator）中使⽤可变字体，则命名实例更为重要。 在⽹络上，我们可以轻松地使⽤CSS⽣成任何实例（命名或未命名）（例如，在Adobe Variable Font中，Extra Ligh
t命名实例采⽤权重轴和对⽐度轴的最⼩值）。
将可变字体添加到⽹页
我们可以使⽤CSS⽂件顶部的将这些字体添加到⽹站。
例如，我们可以使⽤以下CSS规则添加FF Meta变量字体：
@font-face {
font-family: 'FF Meta VF';
src: url('MetaVariableDemo-Set.woff2') format('woff2');
}
您可以在⽹站上，不同类型设计公司（例如 ）的GitHub页⾯上到更多⽰例，并且Typekit还开始发布其最受欢迎的Adobe Originals的。家庭。
上⾯的FF Meta⽰例进⼀步开发。
注意：并不是您在⽹络上到的每种OpenType字体都是可变字体（它们仅在版本1.8中引⼊）。
使⽤CSS设置字体变化
要定义字体变体，我们可以使⽤引⼊的 CSS属性。 这是⼀个低级属性，允许我们通过为每个轴指定⼀个值来控制输出。
⽰例：Decovar
Decovar是当前存在的最通⽤的⽰例之⼀。 您可以在 上到它，并且在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⽣成以下字体变体：
寻可⽤范围
哪⾥可以到范围？ 字体⽂件包含保存所需数据的 。 但是，要访问该信息，我们需要使⽤诸如的⼯具查看字体⽂件的内容。 有时，字体⽂档中包含范围，但不幸的是，并⾮总是如此。
⾼级CSS属性
font-variation-settings属性是⼀个低级属性， ，只有在没有其他⽅法可⽤时才应使⽤它。 这到底是什么意思？
根据 ，将来我们将能够控制具有更⾼CSS属性的注册轴，即：
1. （将控制wght轴）
2. （将控制wdth轴）
3. （将控制slnt和ital轴）
4. （将控制opsz轴）
⾃CSS2开始存在前三个属性，但是CSS4规范扩展了它们的⽤法。 我们将不仅能够与预先定义的关键字使⽤它们（如normal或bold的font-weight ）或圆形数字（例如400 ， 600 ， 800等），也与预定义的规模所有数字（例如， 将在1到1000之间， 将在50％到200％之间。
不过，这些功能仍处于实验阶段。 因此，⽬前，合理的做法是继续使⽤font-variation-settings ，因为当前这是访问可变字体轴的最稳定的属性。
⽀持
可变字体仍然相对较新，但已经实现。 ⾃2017年10⽉版以来， 和也⽀持它们。
了解有关可变字体的更多信息
2016年在华沙举⾏的ATypI会议上的宣讲 ，有五位著名演讲者。
由Adobe印刷负责⼈Tim Brown ，详细介绍了他们可以解决的问题和未来的计划。
Lea Verou在Codepen上有⼀个 ； 它使⽤Amstelvar可变字体。
尼克·谢尔曼（Nick Sherman）在Twitter 上策划的新闻。
js字体溢出字体变⼩

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。