原文鏈接
variable fonts（下文中vf為縮寫）是數字時代制作的字體技術，用更小的文件大小在web上提供更豐富的排版，但是一項新的技術往往伴隨着新的挑戰和復雜未知的情況。不過，我們要擁抱技術，那么怎么才能使用它呢？
讓我們從以下幾個問題去學習一下variable fonts。
- 什么是variable fonts?
- variable fonts能做什么
- 拉伸或者扭曲字體會不會有不好的效果和影響？
- variable fonts有哪些優點？
- 怎么在web上使用variable fonts？
- 有哪些潛在的缺陷需要注意？
- variable fonts何時才會相對成熟？
什么是variable fonts?
有人解釋它為一個存在多種字體格式單字體文件。一般來說，字體的不同格式，比如斜體、粗細、拉伸存儲在分開的單個文件內，而現在，你可以存儲多種字體格式在一個openType可變字體文件內，正因為如此，這個vf文件相對來說體積會更小。
多個靜態字體文件可以被存儲到一個vf文件
因為只有一種排版的輪廓點，所以文件體積很小。這些點決定了文字的直接表現。修改輪廓點的位置意味着能夠動態的在瀏覽器里改變文字的樣子。這使得在半粗體和粗體之間的轉換成為可能。向下面這樣：
修改vf字體的例子，這些`輪廓點`的數量沒有變化，僅僅是位置發生了改變
在各種軸(將一個可修改范圍抽象化為一條(x)軸，或者說橫坐標)上可以以非常小的數值進行改變，比如粗細軸，一點點的修改就會發生很大的風格變化，像regular和font-weight: 700之間有其他的值可以進行指定。
一個vf字體可以有很多類似的軸，比如增加一個身高軸，就能延伸出更多風格的字體。也可以想想成為一個有x和y的坐標軸，當x軸的可修改范圍為50，y軸的可修改范圍為500的時候，你就會得到25000種不同風格的字體，並且文件大小也很可觀。
各種各樣的字體
variable fonts能做什么？
這個得根據字體的設計來決定，字體的設計提供了各種各種可以被修改的軸，比如粗細，長短以及任何合理范疇之內的。下面提供五個常用的保留軸:
- wdth: 用於修改字的寬窄
- wght: 用於修改字的粗細
- ital: 是否傾斜，0為非傾斜，1為斜體
- slnt: 用於修改字的傾斜程度
- opsz: 對於字形的修改(待確認)
盡管寬窄、粗細是更為常見的供修改軸，但是也有一些自定義軸，比如襯線(襯線是字的筆畫開始和結束部分的額外裝飾)軸等。
通過改變`軸`生成的動畫，有沒有很酷炫？
拉伸或者扭曲字體會不會有不好的效果和影響？
當vf字體改變寬窄、粗細或者其他維度的時候，不會造成不好的影響。但是如果換做transform: scaleX(0.5)，就會發生不好的影響，因為它直接修改了字體的設計，設計師看了會打人。
為什么拉伸或者扭曲字體是一個很嚴重的問題？因為字體設計師在每個字符的協調上下了很多心血，所以這樣的字體符合正常的審美。而草率的拉伸或者扭曲字體會導致設計師的心血功虧一簣。即使修改之后的不同是很微小的，但是也會影響字體整體的外觀和感覺。
仔細看上面這張圖中的字母O，下面的O已經超出藍色范圍，而上面的依舊保持的很好。吐槽，本人沒覺得有啥美感的丟失
variable fonts有哪些優點？
最明顯的優點，或許你已經想到了，就是提供豐富的自定義web字體
網站開發者可以利用不同風格的字體去突出某些部分的趣味性和重要性，網站可以以編輯設計的方式處理更多的排版，提供更豐富的視覺展示和個性化方案。我創建了一個測試網站，在這個網站上，我限制顏色風格，換句話說，我僅僅用了4種左右的顏色來表現網站的層次感，然后用了多達18種的字體去豐富網站。在我看來，這樣比減少樣式風格更加簡介和獨特。你可以點擊右下角按鈕來切換不同的字體主題，獲得不同的體驗。
一個使用字體變換改變網站風格的測試網站
更小的文件體積
vf字體用更小的文件帶來更多的可選風格。比如你想使用三四種不同粗細的字體，你可以用vf字體來獲得更小文件體積的收益。舉個例子：Süddeutsche Zeitung Magazin
該網站的字體加起來一共有236kb大小，其中四種不同粗細的字體加起來共166kb，如果換用vf字體，可以較少到80kb，足足減少了50%！
如果使用vf字體，至少可以節約一半的帶寬
細顆粒度的控制
vf字體在如何渲染字體上提供細顆粒度的控制，你可以設置font-weight:430來提供更好地效果。因為這是一個可選的，所以像font-weight:bold這樣的方式，仍然是奏效的
更好地文字適配
如果vf字體提供寬窄軸操作能力，你可以讓文字在移動設備上有更好的可讀性。在寬一點的屏幕上，也能更好地利用空間。這個例子可以很清晰的展示這種效果: browser example
與動畫結合
所有軸都可以通過css來產生一個過渡的動畫效果。這能讓你的網站帶來很酷和充滿活力的效果。在微軟示例頁面中，你可以通過滾動來查看令人印象深刻的動畫效果。
一種更重視視覺美的文字
這個概念來自印刷技術，通常指在小字號的時候更加可讀，大字號的時候更加富有個性。在金屬活字時期(使用金屬作為載體的活字印刷術)，只能通過修改的文字尺寸來進行優化。后來，通過數字化技術，你可以設計一個適配所有尺寸的字體。現在相同的情況隨着vf字體的出現得以解決。例如，小字號的時候筆畫可以更粗一點，這意味着更低的對比度使可讀性更高。另一方面，當大字號的情況下，空間更多，所以有更多的操縱性，和對比度。類似的變化在vf字體中可以在單一文件內逐漸產生。
怎么在web上使用variable fonts？
-
找到可用的vf字體
這個技術還是非常積極地，所以，如果你想使用它，你首先要找到相關資源。這有一個資源可以供你使用，在這個網站里你能嘗試很多vf字體，很多都是在github開源，並且可以直接下載的。這也有一些很不錯的資源 -
整合到你的網站中的樣式表內
2018上半年，超過一般的瀏覽器已經支持的很好了。通過
@font-face引入到頁面內：@font-face { font-family: 'VennVF'; src: url('VennVF_W.woff2') format('woff2-variations'), url('VennVF_W.woff2') format('woff2'); }找到字體可變
軸和可變范圍，根據設計的不同的vf都有不同的軸和不同的范圍，如果你不知道vf字體能做什么改變，你可以使用在線工具，他也可以幫你生成現成的css。
然后我們進行css的開發，不過在這之前，先說一下即將在css4字體模塊中增加的可以設置vf字體的高級屬性：font-weight：可以設置1-999的任意數值font-stretch：是一個百分比的值，100%是正常的，50%是緊縮的，200%是拉伸的，其對應的關鍵字應該可以使用，這對印刷來說是可怕的，因為它不能拉伸字體，拉伸字體會導致不好的結果，但是vf的改變是在涉及范圍內的拉伸，是可以接受的。font-style：一個傾斜的屬性，從-90deg到90deg，當然關鍵字也是可以使用。90deg看起來是奇怪的，8deg是大部分字體中采用的最大值。font-optical-sizing：這是一個新的屬性，有兩個可選屬性auto和none。一般來說，瀏覽器會設置為auto，但你也可以設置為none
不是所有vf字體都能控制上面的屬性，這得根據字體的設計和可用范圍來決定。我做了一些測試，safari支持
font-weight和font-stretch，並且，如果optical可用，它會自動打開optical sizing。但是使用font-style: italic的結果是，沒有更新vf字體的italic軸范圍。只有在sarari上，這些高級屬性兼容的還可以。所以，如果想保證穩定性，你需要使用一個低級的屬性：
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%; }當然，vf字體其實還有更多的自定義
軸可以使用，都可以使用font-variation-setting屬性來設置：h1 { font-family: 'VennVF', sans-serif; font-variation-settings: "TRMC" 0, "SKLA" 0, "SKLB" 0, "TRME" 0; }效果看起來像這樣：
-
兼容不支持vf字體的瀏覽器
如果你現在就想使用vf字體的話，在不支持的版本上，網站風格會和你想象中的完全不一樣，所以我們需要一個回退方案，這個利用的css的特性查詢功能：
@supports (font-variation-settings: normar){ /* set some property */ }點擊查看@supports的各瀏覽器兼容，個人認為兼容還是可以的。
然后，像下面這樣設置vf，就可以適配大部分瀏覽器了：body { font-family: 'Venn', sans-serif; } @supports (font-variation-settings: normal) { body { font-family: 'VennVF', sans-serif; } }解釋一下：首先上面的body為正常的字體，下面為積極地做法，如果支持
font-variation-settings，那么就采取vf字體，然后可以設置一些具體的字體細節。否則會靜默失敗。
可能有人會用:not來配合@supports，有時候匹配成功不是因為not，而是因為@supports不支持，所以盡量避免。
有哪些潛在的缺陷需要注意？
vf字體為web字體帶來了新的活力和發灰控件，但是，一項新的技術往往會伴隨着很多我們需要注意的問題。
- 太多的選項
- 更多的與web無關的字體只是需要學習
- vf字體不一定總會對性能有所提高
- 你也許仍然需要多個字體文件以適配某些字體，比如羅馬字體和斜體
- 可能會因為著作權、許可證而造成其他問題
variable fonts何時才會相對成熟？
2018年大部分瀏覽器都已經支持了，很快移動設備也會支持，因為vf會節約很大的帶寬。我期待2019年vf字體能夠替換靜態字體被用在各個web站點中。adobe和谷歌會在推動這項技術中一定會占主要部分，因為他們同樣需要減少字體文件大小，雖然不知道這件事什么時候會發生。但是一定會很快。
我對文件大小沒有太大的興趣，我更多的興趣實在使用更少的樣色主題和更多的字體去設置網站的風格，像這個網站。