CSS小技巧使用 font-variation 讓文字起飛詳情 - 前端,css3,字體,動畫,設計南城FE 動態日志

今天逛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