css中改变字体,font改变字体大小

　　今天在CodePen上看到一个很有意思的效果——GSAP 3 ETC可变字体Wave，是JS动画库GSAP实现的。让我们来看看：

　　我就想能不能用CSS复制一个版本，绕了一段时间，用纯CSS成功实现了原著的效果。

　　以上效果的核心是人物的动画，不断由细变紧，再由粗变远。有人会觉得这是transform: scale()，其实不是。

　　缩放是等比例放大缩小一个物体，但是仔细观察上面的效果，很明显字体的粗细和宽度都有变化。这里其实用到了CSS一个比较新的特性——可变字体，也就是font-variation。

　　本文将借助这种效果介绍什么是CSS字体变化。

什么是 CSS font-variation，可变字体？

　　根据MDN - Variable fonts的说法，Variable fonts是OpenType字体规范的演进，允许同一字体的多个变体统一到单独的字体文件中。因此，不需要将不同字宽、字重或不同样式的字体分成不同的字体文件。我们只需通过CSS引用line @font-face就可以获得这个文件中包含的所有字体变体。

　　Emm，概念有点难懂。简单解释一下。

　　对应可变字体，是标准(静态)字体。

　　标准(静态)字体是一种字体文件，仅代表字体的宽度/粗细/样式的特定组合。通常我们在页面上介绍的字体文件都是这种类型，只代表这种字体的宽度/粗细/样式的一种特定组合。

　　而如果我们要引入一个字体族(如Roboto字体族)，它可能包含“Roboto Regular”(常规粗细)、“Roboto Bold”(粗体)或“Roboto Bold Italic”(粗斜体)等一系列字体文件。这意味着我们可能需要20或30个不同的字体文件来拥有一个完整的字体家族(对于不同宽度的大字体，这个数字将会增加数倍)。

　　可变font - font-variation可以理解为all in one。通过使用可变字体，字重、字宽、斜体等的所有排列和组合。可以加载到文件中。当然，这个文件可能比传统的单一字体文件大。

静态字体的局限性

　　比如在Google Font中，我随机选择一个标准的静态字体来实现一个字体粗细变化动画：

　　pCSS font-variation/ppCSS font-variation/ppCSS font-variation/ppCSS font-variation/ppCSS font-variation/ppCSS font-variation/p @ import URL( https://fonts . Google APIs . com/css2？family=Lato:wght @ 300 display=swap )；p { font-family: Lato ，无衬线字体；字体大小：48px} p:n-child(1){ font-weight:100；} p:n-child(2){ font-weight:200；} p:n-child(3){ font-weight:300；} p:n-child(4){ font-weight:400；} p:n-child(5){ font-weight:500；} p:n-child(6){ font-weight:600；}看看结果：

　　不是我们想象的那样，因为字体粗细从100到600，所以字体依次变粗。单词权重总共只有两种：

　　当font-weight:为100-500时，实际上是font-weight:normal；当font-weight: 600时，它实际上命中font-weight: bold。这是传统静态字体的局限性。事实上，在单个字体文件中，不会有所有类型的字体粗细和宽度。

可变字体的多样性

　　接下来，我们放上可变字体。

　　加载可变字体的语法与其他web字体非常相似，但有一些显著的差异，这些差异是通过升级现代浏览器中可用的传统@font-face语法提供的。基本语法相同，只是字体技术不同，可变字体可以提供font-weight、font-stretch等描述符的允许范围，而不是根据加载的字体文件来命名。接下来，我们将加载任何人可变字体，该字体支持从100到900的字体粗细和从10%到400%的字体缩放。

　　@font-face {font-family:任何人；src:URL( https://S3-us-west-2 . amazonaws . com/s . cdpn . io/61488/etcanybodyb . woff 2 )格式( woff 2-variations )；字体-显示：块；字体样式：正常斜体；font-weight:100 900；字体拉伸：10% 400%；}p { font-family:任何人，无衬线；字体大小：48px} p:n-child(1){ font-weight:100；}//.p:n-child(6){ font-weight:600；}同样设置字体粗细，从100-600。效果如下：

　　这次可以看到字体有明显的均匀变化，支持从font-weight: 100到font-weight: 600的渐变。这就是可变字体的魅力。

理解 font-variation-settings

　　 CSS除了通过font-weight直接控制可变字体的粗细，还提供了一个新的属性font-variation-settings来同时控制可变字体的多个属性。

　　新的可变字体格式的核心是可变轴的概念，它描述了字体设计中某一特性允许的变化范围。

　　所有可变字体至少有五个属性轴，可以通过字体变化设置来控制。它们属于注册的轴，可以映射现有的CSS属性或值。

　　它们是：

　　重量轴 wght :对应字体重量，控制字体的宽度和厚度 wdth :对应字体拉伸，控制字体的伸缩角度 slnt (倾斜):对应字体样式：斜角，Ital :字体样式：斜体对应字体，光学尺寸轴 opsz :对应字体的字体光学尺寸。好吧，可能有点傻，没关系。通过一个例子就能立刻理解。

　　或者使用上面提到的可变字体，我们使用字体变化设置来实现字体粗细变化的动画：

　　pany body/p @ font-face { font-family:任何人；src:URL( https://S3-us-west-2 . amazonaws . com/s . cdpn . io/61488/etcanybodyb . woff 2 )格式( woff 2-variations )；字体-显示：块；字体样式：正常斜体；font-weight:100 900；字体拉伸：10% 400%；}p { font-family:任何人；字体大小：48px动画：fontWeightChange 2s无限交替线性；} @ key frames font weight change { 0% { font-variation-settings: wght 100；} 100% { font-variation-settings: wght 600；}}效果如下：

　　实际上，可以理解为使用字体变化设置的变化的动画：“wght”相当于字体粗细变化动画：

利用 font-variation-settings 进行字体的多个特征同时变化

　　好吧，那么如果是一样的效果，为什么还要费心去弄一个字体-变体-设置呢？

　　那是因为font-variation-settings不仅支持字体粗细的变化，还支持上面提到的注册轴设置的几个样式属性和自定义轴的一些字体样式属性的变化。

　　这次除了字体粗细，我们还加上了‘wdth’的变化，也就是字体的伸缩。

　　pany body/p @ font-face { font-family:任何人；src:URL( https://S3-us-west-2 . amazonaws . com/s . cdpn . io/61488/etcanybodyb . woff 2 )格式( woff 2-variations )；字体-显示：块；字体样式：正常斜体；font-weight:100 900；字体拉伸：10% 400%；}p { font-family:任何人；字体大小：48px动画：fontWeightChange 2s无限交替线性；} @ key frames font weight change { 0% { font-variation-settings: wght 100， wdth 60} 100% { font-variation-settings: wght 600， wdth 400}}这次表演的是字体粗细100到600，字体扩展60%到400%的动画效果。效果如下：

　　也就是说，字体-变化-设置可以支持多种字体样式同时一起变化，这一点非常重要。

　　这里其实已经可以用这个来达到题图所示的效果了。我们可以简单地修改它，添加多行，然后为每行设置一个负的动画延迟：

　　div class= g-container ul liany body/Li liany body/Li liany body/Li liany body/Li liany body/Li/ul/div借助半导体色敏传感器简化下代码，下述代码核心就是给每个李，添加一个相同的动画字体-变体-设置动画，并且依次设置了等差的动画延迟：

　　李{动画：变化0.8s无限线性交替；}@for $i从一到9 { Li:n-child(# { $ I }){ animation-delay:# {($ I-1)*-0.125 } s；} } @关键帧更改{ 0% { font-variation-settings: wdth 60， wght 100不透明度：5;} 100% { font-variation-settings: wdth 400， wght 900不透明度：1;}}效果如下：

　　好，接下来，利用CSS 3D简单构造一下三维(三维的缩写)场景即可，完整的半铸钢钢性铸铁(铸造半钢)代码如下：

　　@font-face {font-family:任何人；src:URL( https://S3-美国-西部-2。亚马逊鹦鹉。com/s . cdpn。io/61488/etcanybodyb。woff 2’)格式(‘woff 2-变奏曲’)；字体-显示：块；字体样式：正常斜体；font-weight:100 900；字体拉伸：10% 400%;}.g-容器{位置：相对；边距：自动；显示器：flex字体大小：48pxfont-family:任何人；颜色：# fff变换样式：保留-3d；视角：200像素}ul {背景：径向渐变(110像素0px处的最远端，rgba(255，255，255，0.2) 0%，# 171717 100%)；填充：5px变换样式：保留-3d；transform:平移z(-60px)rotateX(30度)平移y(-30px)；动画：移动3s无限交替；在{内容： 之前；位置：绝对；左：0;底部：0;右：0;高度：45像素背景：# 141313;变换：rotateX(-230度)；变换-原点：50% 100%;} }李{宽度：410 px动画：变化0.8s无限线性交替；}@for $i从一到9 { Li:n-child(# { $ I }){ animation-delay:# {($ I-1)*-0.125 } s；} } @关键帧更改{ 0% { font-variation-settings: wdth 60， wght 100不透明度：5;} 100% { font-variation-settings: wdth 400， wght 900不透明度：1;} } @关键帧移动{ 100% { transform:translate z(-60px)rotateX(30 deg)translate y(0px)；}}效果如下，我们就基本还原了题图的效果：

　　完整的代码及演示效果你可以戳这里：CodePen演示-纯半铸钢钢性铸铁(Cast Semi-Steel)可变字体波浪

font-variation 的可变轴 -- 注册轴与自定义轴

　　 回归到可变字体本身。上面提到了可变轴这个概念，它们分为注册轴与自定义轴，英文是：

　　注册轴-注册轴自定义轴-定制轴可变字体新格式的核心是可变轴的概念，其描述了字体设计中某一特性的允许变化范围。

　　例如字重轴描述了字体的粗细；"宽度轴"描述了字体的宽窄；"斜体轴"描述是否使用斜体字形并且可相应地开关；等。请注意，轴既可以是范围选择又可以是开关选择。字重可能在1-999之间，而斜体可能只是简单的0或1(关闭或打开)。

　　如规范中所定义，存在两种变形轴，注册轴和自定义轴：

　　注册轴最为常见，常见到制定规范的作者认为有必要进行标准化。目前注册的五个轴是字重，宽度，倾斜度，斜体和光学尺寸。上文其实已经罗列了5个注册轴，并且简单介绍了它们的使用。再罗列一次：

　　重量轴 wght :对应字体重量，控制字体的宽度和厚度 wdth :对应字体拉伸，控制字体的伸缩角度 slnt (倾斜):对应字体样式：斜角，Ital :字体样式：斜体对应字体，光学尺寸轴 opsz :对应字体的字体光学尺寸。自定义轴实际上是无限的：字体设计者可以定义任何他们喜欢的轴，并且只需要让我们看一个自定义轴的例子：

　　p grade/PP { font-family: amstel var VF ，serif。字体大小：64px字体-变化-设置： GRAD 88}上面的font-family: Amstelvar VF 是可变字体，而 GRAD 属于用户自定义轴之一，意思是层次轴。

　　等级 Grad :等级这个词指的是字体设计的相对粗细或密度，但它与传统的“粗细”不同，文字所占据的物理空间不会改变，所以改变文字的等级不会改变文字的整体布局或其周围的元素。这使得级别成为一个有用的变化轴，因为它可以被改变或激活，而不会导致文本本身回流。

　　MDN上有一个关于改变‘GRAD’值的演示，对应的是字体的改变。效果如下：

　　值得注意的是，自定义轴可以是字体设计者想象的任何设计变更轴。其中一些可能会逐渐变得相当普遍，甚至随着规范的发展演变成注册轴。

去哪找可变字体？

　　好的，如果我现在想在业务中使用可变字体来实现一个效果或者动画，请问在哪里可以找到可变字体的资源？

　　这里有一个非常好的网站——可变字体。

　　上面收集了很多可变字体，列出了它们在配准轴上支持的字体属性范围。比如支持的词重从100到700，我们可以自由调试和预览。

Can i Use（2022-02-20）

　　现在可以开始使用可变字体了吗？

　　我今天可以使用的屏幕截图：

　　兼容性已经很好了，不用考虑IE系列就可以去实际生产环境了。

最后

　　本文到此结束。希望对你有帮助。

　　更多精彩的CSS技术文章总结在我的Github - iCSS里，不断更新。欢迎订购明星订阅合集。

　　关于CSS字体魅力的这篇文章就到这里了——variation可变字体(实例详解)。更多相关CSS font-variation可变字体内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。