跳到主要内容

开始使用CSS中的可变字体

网络上的排版允许图形设计者用他们客户的消息表达。网络已经走了很长的路要走,从仅允许安装在用户计算机上的字体到现在拥有一大堆奇怪的字体和有趣的字体可从在线内容传送网络获得。

如果您曾经使用过Google字体,那么您可能会注意到,当您为同一字体添加多个权重时,因为您希望以粗体等方式使用它,那么Google通常会警告您添加这些权重会使页面变慢加载。这个问题是因为无论您是否使用所有字符,都必须为每个权重下载每个字符的整个字体。

相比之下,CSS变量字体使用CSS中的变量来操纵网络字体属性。这意味着一个变量字体将具有所有权重,因此作为设计者,您可以在设计中使用排版的方式变得更具表现力。

它不必在那里结束,因为一些字体允许设计者改变不仅仅是字体的重量,因此可以发生很大的灵活性。我们使用的是开源的Amstelvar字体,它有不少于17个与之关联的变量,因此您可以从一种字体中获得一些非常有趣的选项。

在此下载本教程的文件。

01.打开项目

在代码IDE中打开“start”文件夹并打开“index”。 html'用于编辑。在页面的正文部分,添加下面的代码,为我们提供一些使用CSS变量字体的结构和内容。您可以根据自己的需要更改文本。

02.完成内容

现在添加下面显示的其余代码。在我们的示例中,我们有一个比此处所示更大的段落,以便您在示例中描述CSS变量字体。您可以从完成的文件夹中复制该文本,也可以根据需要添加自己的文本。

在此处添加段落描述。

所有的CSS都将放在'CSS'文件夹中的单独文件中。因此,链接到此页面的代码的“head”部分中的任何位置。现在保存'index.html'页面就像你完成了这个,所有进一步的代码将在CSS中。

04.加载字体

从'CSS'文件夹中,打开'design.css',它将为空。添加CSS顶部的代码如此处所示。正如您所看到的,这与使用当前CSS加载任何本地存储的字体的方式相同。

@ font-face {font-family:Amstelvar; src:url(../ fonts / AmstelvarAlpha-VF.ttf); }

05.设置页面样式

Screen displaying variable fonts

请记住选择突出的文本

现在页面的HTML和正文被设置为去除边距和填充。现在,上一步中加载的字体将作为默认字体应用于页面上的所有文本。添加背景图像以覆盖背景,文本设置为白色,带有轻微阴影以帮助其突出显示。

html,body {width:100%;保证金:0;填充:0; font-family:Amstelvar; background:url(../ img / bg.jpg)无重复中心固定;背景尺寸:封面;颜色:#fff; text-shadow:0px 3px 5px rgba(0,0,0,0.4); }

06.文本中心

水平和垂直居中文本的最简单方法是使用较新的CSS网格作为显示对象。这个包装所有其他标签的包装器设置为采用'vh'属性的垂直高度的100%。

.featured {width:100%;身高:100vh;显示:网格; }

07.汽车中心

Screen displaying variable fonts

变量字体作为普通字体应用

现在里面的内容可以使用自动对于顶部和底部以及左右边距。这意味着我们得到的文本框占据了屏幕的60%并居中。文本也是中心,这将有所帮助。正如您在浏览器中看到的那样,变量字体将应用为任何普通字体。

.featuredInner {margin:auto auto; text-align:center;宽度:60%; }

08.改变字体

现在标题1的字体将被赋予一些不同的属性。 W3C希望我们使用字体重量,拉伸和光学尺寸,但对于这种字体,光学尺寸不起作用。我们将在下一步中解决这个问题,但只需在浏览器中检查您的进度即可。

h1 {font-size:10vw;线高:0.1; font-weight:550; font-stretch:100; font-optical-sizing:24; }

09.自定义字体

Screen displaying variable fonts

Amstelvar有很多控制选项

Amstelvar字体有很多不受W3C命令控制的变量,但有一种方法可以访问它们。添加这行代码,同时将y-ascender的高度添加到700和y-upper case的高度。在这两种情况下,它们都会减少,使得类型的总高度降低。

font-variation-settings:“wght”550,“wdth”100,“opsz”24,“YTAS”700,“YTUC”720;

10.做出微妙的改变

Screen displaying variable fonts

现在,该字体几乎无法识别

现在将添加子标题的样式。当你看到这个时,你会发现重量已经减少,光学尺寸也减小了。当你在浏览器中看到它时,它几乎看起来像一个完全不同的字体,因为特征已经发生了很大变化。

.subhead {font-size:7vw;字母间距:0.03em;线高:0.2; font-variation-settings:“wght”100,“wdth”100,“opsz”20,“YTUC”700; }

11.创建分隔符

现在将在文本之间添加双行分隔符。这只有40%宽,所以略低于文字。这背后也有一点点阴影。这只是为了在美学上增加前两行和后两行之间的中断。

.kicker :: before {content:“”;显示:块;保证金:-4%自动0%;宽度:40%; border-bottom:8px double #fff; box-shadow:0px 3px 5px rgba(0,0,0,0.4); }

12.下一行

添加下一个样式以帮助改变文本。现在它看起来与上一步中完成的任何事情看起来都不太相似,但在接下来的几个步骤中,将添加更多变量以通过一些微妙的变化来增强它的外观。

.kicker {font-size:3.3vw;线高:1.5; font-variation-settings:“wght”156,“wdth”100,“opsz”32,“YTUC”795; }

13.更多变数

新变量在下面以粗体标记。 XOPQ是字母的x宽度,XTRA是曲线的宽度。 YOPQ是字母的y高度,YTLC是小写字母的y高度。 YTSE是衬线高度,GRAD是字母的等级。 YTAS和YTDE都是ascender和descender y height。

.kicker {font-size:3.3vw;线高:1.5; font-variation-settings:“wght”156,“wdth”100,“opsz”32,“XOPQ”117,“XTRA”402,“YOPQ”45,“YTLC”600,“YTSE”9.5,“GRAD”90 ,“YTAS”750,“YTDE”250,“YTUC”795; }

14.更多变数

Screen displaying variable fonts

请务必在刷新前保存

此处以粗体显示的最后几个变量是具有YTRA属性的字母的整体y高度,然后是段落权重和段落宽度。保存并刷新浏览器以查看更改。这些变化很微妙,但足以让它看起来像一个不同的字体。

.kicker {font-size:3.3vw;线高:1.5; font-variation-settings:“wght”156,“wdth”100,“opsz”32,“XOPQ”117,“XTRA”402,“YOPQ”45,“YTLC”600,“YTSE”9.5,“GRAD”90 ,“YTAS”750,“YTDE”250,“YTUC”795,“YTRA”900,“PWGT”92,“PWDT”402; }

15.所有变化

Screen displaying variable fonts

使用单个HTTP请求可以生成许多不同的样式

现在使用此CSS设置下一行文本。再次调整设置以提供不同字体的外观。保存它并查看在浏览器中生成的效果。这里的回报是您只为字体发出了一个HTTP请求,但生成了不同的样式。

.base {margin-top:-2.5%; font-size:4vw;线高:0.1; font-variation-settings:“wght”156,“wdth”100,“opsz”32,“XOPQ”247,“XTRA”402,“YOPQ”45,“YTLC”600,“YTSE”9.5,“GRAD”90 ,“YTAS”750,“YTDE”250,“YTUC”795,“YTRA”900,“PWGT”92,“PWDT”402; }

16.最后文字

文本的最后一部分保留在Amstelvar字体的默认设置中。这里将要发生的一切是调整行高以使其在屏幕上更具可读性。这样就完成了所有文本的样式。接下来将展示如何为某些属性设置动画。

.desc {line-height:1.8; }

17.使它具有生命力

让我们重新审视初始标题标记并为其添加一些动画。为此,请添加以粗体显示的代码。动画名称是指将在下一步中定义的关键帧。它将花费四秒钟并保持最后一个关键帧。

h1 {font-size:10vw;线高:0.1;动画名称:动画;动画持续时间:4s;动画填充模式:前锋; font-variation-settings:“wght”550,“wdth”100,“opsz”24,“YTAS”700,“YTUC”720; }

18.定义开始

创建了'anim'的关键帧。这里添加了起始关键帧。字体的重量更改为其最低值100,并且段落权重更改为0,以便在四秒的持续时间内动画变得更大胆。

@keyframes anim {from {font-variation-settings:“wght”100,“PWGT”0; }

19.结束点

在此示例中,关键帧从一个点动画到另一个点。定义了这些关键帧的最终结束点,如您所见,将其恢复为默认的段落权重,并将字体的权重设置为最初在教程中定义的方式。在浏览器中测试。

至{font-variation-settings:“wght”550,“PWGT”100; }}

20.优化动画

当你测试动画时,你会发现它有点紧张,因为段落宽度发生了极大的变化。这里将其更改为50,并将不透明度更改为0,以使其淡入并使转换更平滑。

@keyframes anim {from {font-variation-settings:“wght”100,“PWGT”50;不透明度:0; }

21.结束

Screen displaying variable fonts

玩字体可以获得不同的效果!

最后的修正是添加1的不透明度,使其淡入。刷新浏览器,这样可以更顺畅。通过随着时间的推移动画任何属性进行实验,您将获得一些类型的有趣结果。这一切都来自一个字体!

至{font-variation-settings:“wght”550,“PWGT”100;不透明度:1; }}

本文最初发表于创意网页设计杂志Web Designer的第279期。 在这里购买问题279 要么 在这里订阅Web Designer

相关文章:

查看更多Web设计功能

话题

网页设计
CSS
字体
Magcontent
网页设计者
网页设计

相关文章



翻译字数超限