OpenType字體規範的演進：Variable fonts可變字型
一、什麼是Variable Fonts 可變字型
可變字型對應的則是標準(靜態)字型，而可變字型(Variable fonts)是OpenType字體規範的演進，它允許將同一字體的多個變型體統合進單獨字體文件中，無需將字體分割成不同的字體文件、給予不同寬度、粗細度等。現在只需透過CSS及@font-face的引用，就可以把單一文字中的各種字體做變化。(圖一)
(圖一)
二、單一檔案、彈性、人性化
可變式字型在數位媒體上應用時展現了輕盈、彈性及人性化的特點，大幅度的解決了過去以多個字體檔案形式所衍生的容量問題及頁面載入所耗費的延滯時間。此外可變式字型還擁有在數位時代難能可見的傳統工藝再現—視覺字號(Optical size)這一功能，讓字體在除了功能面的展現外，也提供使用者更加舒適的視覺體驗。
三、可變式字型的未來與可能性？
可變式字型可說是帶來許多的優點除了提供設計相關人員在創意自由度上的更多可能性外，對於品牌而言同時也代表能夠給用戶更加一致性的風格以及更靈活的使用體驗。在未來的發展與應用，除了技術上的優勢，或許未來字體還能根據閱讀者的年齡自動調整成適合的大小，又或依據觀看螢幕的距離而轉變成特定的效果也不無可能。(圖二)
(圖二：字型隨視窗縮放而變化粗細)
四、Variable Fonts 的特徵
1.檔名爲 -VF.woff2
2.格式（CSS format）： (a)woff2-variations (b)woff-variations (c)truetype-variations
3.可經由 CSS property: font-variation-settings 改變 variation axis
4. 5種預先註冊的 axes： (a)字重：wght (weight) (b)字寬：wdth (width) (c)義大利體：ital (italic) (d)傾斜：slnt (slant) (e)視覺尺寸：opsz (optical size)
5.自訂的 axes：任何 4 個字母的 tag（隨設計師設計）
五、現行標準字型Static Fonts缺點
相對於 Variable Fonts，我們可以將現行字型檔稱作Static Fonts：
一個網頁若要像紙本排版一樣，滿足比較複雜的文字樣式，可能會需要有 regular、italic、以及多個字重（weight）甚至字寬（width）的要求。在 Static Fonts 的限制下，不可避免的會需要載入多個字型檔（多個 fonts）。在瀏覽器中載入多個字型檔增加額外的網路加載的問題。
六、Variable Fonts 的使用方式
使用既有語法@font-face在CSS中，為了確保與較舊的字型相容的，可利用@support來判斷瀏覽器使否支援。特別要注意CSS的權重，font-variation-settings 權重較大，盡量不要混用，如果有混用時要小心。
CSS樣式文字使用如下：
// Set up Roboto for old browsers, only regular + bold
@font-face {
font-family: Roboto;
src: url('Roboto-Regular.woff2');
font-weight: normal;
}
@font-face {
font-family: Roboto;
src: url('Roboto-Bold.woff2');
font-weight: bold;
}
// 語法格式 font-variation-settings: [axis] [value];
.text {
font-variation-settings: 'wght' 500; // 這行權重大於 font-weight，所以結果會等於 font-weight: 500
font-weight: 375;
}
七、瀏覽器支援度
除了 IE 以外，主流瀏覽器都已經支援 Variable Fonts囉，現在就可以開始用起來！
【參考來源】
