自2016 年Adobe、Apple、Google、Microsoft 聯合發布OpenType 1.8 規範以來，可變字體一直是字體設計方面的熱門話題。期間很多經典字體也相繼推出了新的可變字體版本，比如思源黑體的Variable OTF/TFF、Helvetica 的Helvetica Now Variable，Figma 也在今年增加了可變字體功能，而可變字體在網頁設計、動態海報、創意視頻等方面的運用也越來越多，這些都顯示出可變字體的發展潛力。
圖片來源：
可變字體是能包含整個字體系列的單一字體文件。我們都知道標準的字體文件一般包含Thin、Light、Regular、SemiBold、Bold、Heavy6 個字重，每個字重以單獨的字體文件形式存在，如果存在Italic、Condensed、Extended 等變體，那相關的字體文件能多達二三十個。
而可變字體則能在一個字體文件中實現字體粗細、寬窄、高低、傾斜等多種樣式的自由調整，且每個維度調整的步數最高有數百個，綜合下來一個字體文件支持的字體樣式高達百萬，遠超靜態字體的樣式數量。
可變字體之所能有如此驚人的樣式數量，主要依靠對字體單個或者多個「軸」的設置。軸涉及重量、寬度、高度、傾斜、斜體和光學尺寸等多個方面，Figma 上有專門對可變字體「軸」概念進行講解的網頁，感興趣的小伙伴可以進行深入了解。
「動態字體概念」
相對靜態字體，動態字體的優勢包括：
1. 更小的文件體積
以經典西文黑體字體Roboto 為例，一套標準的字體包包含12 個字體文件，每個文件大小都在170KB 左右，而其可變字體Roboto Flex 則只有1 個字體文件，大小108KB，但是可支持的字體樣式遠超靜態字體的12 個。對網頁設計來說，更少的字體文件數量和更小的文件體積能為網站帶來更少的HTTP 請求次數和更快的加載速度，給用戶帶來更流暢的使用體驗。
更自由的設計空間
可變字體允許設計人員通過滑塊對字體樣式進行自由更改，這樣一方面能讓設計人員可以隨時快速對字體樣式進行調節，無需等待字體文件重新加載；另一方面超豐富的字體樣式讓設計師可以按照自己的想法對版式進行更精準細緻的設計，保留更多選擇和創意空間。
更好的響應式網頁適配性
可變字體可以更好地適配響應式網頁設計，字體形態能夠隨著設備顯示比例的不同進行相應的改變，使頁面在不同的設備、對比度和觀看環境等條件下都能呈現最佳的視覺效果，為用戶提供更加舒適的使用體驗。
TYPO 實驗室使用了可變字體作為其2018 年會議視覺標識的一部分。
下面為大家推薦幾個超好用可變字體網站，在上面你可以全面了解現在比較熱門的可變字體、調節參數以預覽不同的可變字體樣式、下載相關資源、獲取字體CSS 代碼，或上傳自己電腦上的可變字體預覽其效果。
1. v-fonts
網站鏈接：
v-fonts 是一個簡便好用的可變字體公用資源搜尋網站，它包含目前大部分公開可用的可變字體，並提供字體基本信息、製作者、版權信息和下載渠道，用來找免費可商用的可變字體非常方便。
v-fonts 提供可變字體所有可用軸的設置界面，調整滑塊就能實時預覽字體的樣式，還可以按字體特徵標籤、設計師和字體出版商等方式來快速篩選自己想要的可變字體。
2. Axis-Praxis
網站鏈接：
Axis-Praxis 是一個按時間順序收集可變字體資源的網站，網站歷史可以追溯到1991 年，因此收集了很多珍貴的歷史資料。在Axis-Praxis 上我們可以在一個完整的版式內預覽可變字體的不同樣式，支持修改文字對齊方式和顏色，也支持上傳本地可變字體文件進行預覽。
點擊在字體一欄右側的圓形i 字黑標，可以查看字體的詳細信息，包括字體信息信息、版權、可用軸、命名範例等。
3. wakamaifondue
網站鏈接：
wakamaifondue 是由個人設計的可變字體預覽工具網站。我們可以上傳自己電腦上的字體，網站會自動識別然後顯示出該可變字體的詳細信息、佈局特徵和所有字符集等信息，並提供字體的CSS 樣式表格下載。
3. Font Playground
網站鏈接：
Font Playground 是一個專門用來預覽優質可變字體的網站，網站提供可自由編輯字體的白板，在上面你可以同時預覽多個字體的樣式效果，非常適合用來觀察字體細節並比較不同字體的差別。
網站左下角提供可變字體的版權信息和資源渠道，右側是調節面板，如果點擊白板上方的「code」右側面板就會切換為CSS 代碼。
4. Google font 的可變字體
鏈接：
Google font 有一個專門的可變字體版塊，上面收集了Google font 上所有的可變字體，點擊對應的字體名稱就可以轉到詳情頁進行下載，字體都是免費可商用的。網站上還有對各種軸定義的解釋，非常全面，對可變字體的各種軸縮寫詞還不明白的小伙伴一定記得看看。
5. variablefonts
網站鏈接：
variablefonts 是一個非常全面的可變字體入門科普網站，在其中可以了解到可變字體如何運作，如何讓UI 設計更加輕鬆和美觀，並提供相關可用資源。
