天逛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 標簽定義表格底部，通常用來匯總等