天逛codepen的时候发现了一个不错的文字动画效果，如此丝滑飘逸的效果必须得研究研究，可以看到字体粗细切换过渡效果很均匀，不像我们平常使用字体时设置 font-weight 的效果，日常设置字重的时候并不是每个值都会生效，只会有几个区间的值是可用的，以下代码给6个p标签设置font-weight 从 100 到 600：

@for $i from 1 through 6 {
  p:nth-child(#{$i}) {
    font-weight: 100 + 100 * ($i - 1);
  }
}

可以看到并不是每个阶段字重都有变化的，当然这和不同的字体和是否中英文有一定的关系，但是设置字重的效果都是不够理想的状态。

这里就要引出今天文章所讲的可变字体了，基于可变字体（font-variation）将不再有这种困扰，当然也会有一定的弊端。

什么是可变字体

可变字体（Variable Fonts），也称为多轴字体、自由度字体或超级字体，是一种新兴的字体技术，它是一种可以在多个自由度上进行动态调整的字体格式。与传统字体不同的是，「可变字体能够在单个字体文件中包含多种字重、宽度、倾斜和其他轴的变体，而不需要使用多个不同的字体文件」。

简单理解可变字体就是通过使用可变字体，所有字重、字宽、斜体等情况的组合都可以被装在一个文件中。相应的弊端就是这个文件可能比常规的单个字体文件更大了。

可变字体支持使用font-variation-settings属性来控制字体的各种轴，通过调整这些轴的值，可以实现自定义字体样式的效果。

以下设置一个可变字体的粗细从 100 到 600，

font-variation-settings: "wght" 100, "ital" 0;

可以看到这次的字体是均匀的变化粗细，就如同设置 font-weight: 100到 font-weight: 600 的逐渐变化。

可变字体浏览器兼容情况，可以看到基本的浏览器都已经支持。

如何使用

这个是根据字体的设计者来决定，字体的设计提供了各种各种可以被修改的轴，比如粗细，长短以及任何合理范畴之内的。下面提供几个常用的保留轴:

• wdth: 用于修改字的宽窄
• wght: 用于修改字的粗细
• ital: 是否倾斜，0为非倾斜，1为斜体
• slnt: 用于修改字的倾斜程度
• opsz: 对于字形的修改

找到可用的可变字体

如果你想要使用它，你首先要找到相关字体资源。在这个网站 v-fonts.com 你能找到很多可变字体，很多都是在github开源，并且可以直接下载的。

在CSS中使用

通过@font-face引入到页面内：

@font-face {
    font-family: 'VennVF';
    src: url('VennVF_W.woff2') format('woff2-variations'),
        url('VennVF_W.woff2') format('woff2');
}

每个可变字体都有不同的轴和不同的范围，如果你不知道可变字体能做什么改变，你可以使用这个（wakamaifondue.com）在线工具，可以帮你生成现成的css使用。

目前可以通过font-variation-settings属性，我们可以方便地控制自定义字体的不同轴，比如设置如下代码：

p {
 font-family: "VennVF";
 font-variation-settings: "wght" 550, "wdth" 125;
}

这段代码改变字体粗细为550，还有宽窄为125。在未来可能可以使用以下属性来得到同样的效果：

p {
 font-family: "VennVF";
 font-weight: 550;
 font-stretch: 125%;
}

如下所示是一个例子：

h1 {
  font-family: 'Inter Variable', sans-serif;
  font-variation-settings: 
    "wght" 700, 
    "ital" 1, 
    "opsz" 48;
}

在这个例子中，我们将可变字体‘Inter’设置为700字重、1倾斜度和48像素字号的标题字体。可以看到，通过font-variation-settings属性，我们可以方便地控制自定义字体的不同轴，实现更加细腻、灵活的排版效果。

首图实现代码

首图的字体有如同呼吸，飘逸的感觉，核心是基于可变字体改变字体的粗细，并给不同的字符增加不同的延迟动画效果即可达到最终的效果。

• 改变字体粗细animation动画

@keyframes change {
  0% {
    font-variation-settings: "wght" 900, "ital" 1;
  }

  50% {
    font-variation-settings: "wght" 100, "ital" 0;
  }

  100% {
    font-variation-settings: "wght" 900, "ital" 1;
  }
}

• animation动画执行相关参数

  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: change;
  transition-timing-function: ease-in-out;

• 这里实现的每一个文字都是一个标签，所以给每一个文字都增加了不同的延迟执行动画时间

  @for $line from 1 through 4 {
    @for $letter from 1 through 10 {
      &:nth-child(#{$line}) span:nth-child(#{$letter}) {
        animation-delay: #{$letter * 0.1s + $line * 0.2s};
      }
    }
  }

代码并不多，但实现的效果很不错，基于可变字体设计，我们可以实现更加智能、美观、易读的排版效果，让文字内容更加生动、丰富。

在线效果预览：https://code.juejin.cn/pen/7234826432050888765

使用案例

以下是一些看到的案例效果，供大家参考。

国内常用的中文字体思源黑体也支持可变字体。

这个Google动画和本文头图的效果类似，给不同的字符加了不同的延迟加粗字体动画。

这个效果通过改变不同单词的可变字体的字重和宽窄呈现出一种不一样的效果。

以下的几个效果图都来源于v-fonts.com，诸如此类的效果还有很多，总共可变字体有三百多个，大家有兴趣的可以去找找看。

通过改变animation值可以让小图标动起来，是不是打开了很多新的思路。

这个字体比较有特色，大写字母是在上方有一根长长的线，小写字母是在下方有一根线，通过调整tracking轴的数值可以改变横线的长度。

这个字体就是一条波浪线，通过调整Width轴可以改变波浪的大小和幅度，都可以基于这个可变字体做水波纹效果了。

最后

关于可变字体的详细介绍使用大家可以看这篇文章 「variable fonts - 更小更灵活的字体」。可变字体的设计让文字内容更加生动、丰富，有兴趣的朋友可以试试看～

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

「专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）」

参考

variable fonts - 更小更灵活的字体：github.com/FoxDaxian/memory/issues/4

Variable Font Animation： codepen.io/typeforward/pen/abRpoxV

TMl 的标签可以分为单个标签和成对标签。

单个标签：html4 规定单个标签要有一个 / 表示结尾， html5 则不用

<!--单个标签-->
<meta>
<!--成对标签 -->
<div></div>

以下是HTMl中常用的一些标签

div 标签

div 标签 主要用来将相关的内容组合到一块，就像菜市场把各个蔬菜分成不同种类区分摆放是一个道理。

div 是最常见也是比较重要的标签，网页布局中经常使用的一类标签。通常布局被称为 DIV + CSS 布局

<div>
  div 就是一个分类的存储箱子
</div>

p标签

p标签表示段落， 在网页文字中应用的比较多

<!--段落和段落间会换行-->
<p>第一段</p>
<p>第二段</p>

H-标题标签

h标签分为六个

引用标题标签后，字体会加粗、字号一会变大

ul 无序标签

无序标签是没有显示顺序的列表，无序列表前面通常会有一个“小点”， 这个小点可以用type属性控制。其中有三个展示方式（不过这种方式比较固定，不够灵活和美观， 已经被CSS的效果代替），如下：

举例:

<!--ul标签内部只能放置li标签-->
<!--li标签内部可以放其他的标签-->
<ul type=">
    <li>无序列表元素1</li> <!--列表项-->
    <li>无序列表元素2</li>
</ul>




实心圆
<ul type="disc">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>
空心圆
<ul type="circle">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>
实心方框
<ul type="square">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>

ol 有序标签

• ol 前面的标签是有序的，可以是数字、字母、罗马数字等。同样控制这些样式使用的是type属性。

• 设置start属性，表示从哪个编号开始
• 加 reversed 表示倒叙排列

有序列表, 从2开始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小写字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒叙
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定义列表

dl标签表示自定义列表

dt表示数据项，dd表示数据定义， dd是dt标签的解释

<dl>
    <dt>西红柿</dt>
    <dd>红、酸</dd>
    <dt>黄瓜</dt>
    <dd>绿、涩</dd>
  </dl>

img标签

img 用来插入图片，包括但不限于以下图片格式

<!-- src(source)属性， 图片地址，可以为相对路径，也可以为绝对路径-->
<!-- alt 如果遇到图片无法加载的情况，网页上会展示 alt的 值 -->
<!-- width 和 height 表示 宽和高， 如果只设置一个， 那么另外一个就会跟着成比例缩放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 标签

用a标签来制作超级链接

<!-- href 属性 表示 其他页面的链接，支持相对路径和绝对路径，还可以链接到其它网站 -->
<!--target 属性表示 打开其他链接的方式-->
<!-- title 属性表示 链接的标题， 当鼠标移动到链接上，会展示出来-->
<a href="http://www.baidu.com" target="blank" title="文字标题">百度</a>






<!--也可以用a标签作为锚点 锚点可以是本页面的锚点，也可以是其他页面的锚点-->
<h1 id="title">头部标题</h1>
... 此处省略一些代码
<a href="#title">返回标题</a>




<!--下载链接，指向 doc， zip， zip等文件格式时，a标签将成为自动下载链接-->
<a href="./download/halou.zip">发邮件</a>
<!-- mailto:前缀的链接是邮件链接，系统将自动打开email相关软件-->
<a href="mailto:halouworld@126.com">发邮件</a>
<!-- tel: 前缀链接是电话链接，系统将自动打开拨号键-->
<a href="tel:11111111111">打开拨号键盘</a>

audio标签

audio标签用来插入音频标签

<!--添加 controls 后才会显示 播放控件-->
<!--常用音频格式 mp3 和 ogg格式-->
<!--autoplay 自动播放属性-->
<!--loop 属性表示循环播放-->
<audio controls src="./video/demo.mp3">
       您的浏览器不支持 audio标签，请升级
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的浏览器不支持 audio标签，请升级
</audio>

video标签

video 标签用于插入一段视频

<!--有的视频不能播放 ，详见 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 显示视频播放控件  -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->
<!-- 常见的 视频格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的浏览器不支持 video标签，请升级
</video>

其它区块标签

以前的区块标签只有div，现在为了更好的方便搜索引擎抓取网站，因此有了以下语义更加明确的区块标签

其他的语义标签

• span 标记文本标记区域，没有特殊效果，结合CSS使用

• b 标签 加粗文章（可以使用CSS实现同样效果）

• u 加下换线文字

• br 换行

• i 倾斜文字（可以使用CSS实现同样效果）

• strong 代表特别重要的文字

• em 需要强调的文字，有一定的倾斜，也可以用其配置CSS做表情文字

• mark 高亮文字

• figure 和 figcaption 。figure - 一段独立的内容 figcaption- figure 内部元素的说明性内容

表单

表单用来收集信息并且可以完成和后端的数据传输

表单中大致可以分为三种标签

• form标签，标识表单区域， 内部的元素都可能被表单提取信息
• input 标签， 标识输入、点击等需要和用户交互的场景
• datalist 下拉框，支持搜索，通常和input一块使用

一些表单的示例

<!--action 表示要提交到后端的网址-->
<!--method 表示表单提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 标签中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在没任何输入值的情况下，作为提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---单选按钮，name相等，表示选择了一个，另一个就不能选择了-->
<!--checked 表示默认被选中-->
<!-- value 属性表示要提交到后端服务器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的标签 通过for 属性 和 其他标签的id属性进行绑定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--复选框 type="checkbox" 同一组的的复选框，name值应该相同 ，复选框也有value值， 用于向服务器提交数据-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 篮球


<!--密码框-->
<input type="password" placeholder="请输入密码">


<!-- 下拉菜单 -->
<select>
  <option value="alipay">支付宝</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分别用于设置 行数 和 列数-->
<textarea rows="3" cols="5"></textarea>


<!--三种按钮 submit 提交按钮  button 普通按钮 可以简写为  <button></button> reset 按钮 重置按钮-->
<input type="button" value="普通按钮">
    <input type="reset" value="重置按钮"> 
    <input type="submit" value="提交表单">




<!--像 email 和 url 等格式，如果点击提交按钮，不符合格式，会有提示-->
<form>
    日期空间: <input type="date">  <br/>
    时间空间: <input type="time">  <br/>
    日期时间空间 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    数字控件: <input type="number"> <br/>
    拖拽条: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    网址控件: <input type="url"> <br/>
    邮箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 备选项示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陕西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山东"></option>
</datalist>

表格

可以用html渲染表格

• table 标签表示表格

• tr 表示行
• td 表示单元格
• caption 表格的标题，通常放在表格的第一行
• th 表示列标题

<!--表格示例-->
<table border="1">
  <caption>我是标题</caption>
  <tr>
      <th>第一列标题</th>
      <th>第二列标题</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

• 单元格的合并, clospan 用来设置td 或者th的列跨度 ， rowspan属性用来设置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是标题</caption>
    <tr>
        <th>第一列标题</th>
        <th>第二列标题</th>
    </tr>
    <tr>
        <td colspan="2">跨两行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是标题</caption>
        <tr>
            <th>第一列标题</th>
            <th>第二列标题</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

• 表格的其他标签 ， thead 定义表头， tbody 定义表格的主题内容， tfoot 标签定义表格底部，通常用来汇总等