variable fonts - 更小更靈活的字體

原文連接

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？

1. 找到可用的vf字體
   這個技術仍是很是積極地，因此，若是你想使用它，你首先要找到相關資源。這有一個資源能夠供你使用，在這個網站裏你能嘗試不少vf字體，不少都是在github開源，而且能夠直接下載的。這也有一些很不錯的資源

2. 整合到你的網站中的樣式表內
   2018上半年，超過通常的瀏覽器已經支持的很好了。

   經過@font-face引入到頁面內：
   css @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;
   }

   效果看起來像這樣：

3. 兼容不支持vf字體的瀏覽器

   若是你如今就想使用vf字體的話，在不支持的版本上，網站風格會和你想象中的徹底不同，因此咱們須要一個回退方案，這個利用的css的特性查詢功能：
   css @supports (font-variation-settings: normar){ /* set some property */ }
   點擊查看@supports的各瀏覽器兼容，我的認爲兼容仍是能夠的。
   而後，像下面這樣設置vf，就能夠適配大部分瀏覽器了：
   ```css
   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和谷歌會在推進這項技術中必定會佔主要部分，由於他們一樣須要減小字體文件大小，雖然不知道這件事何時會發生。可是必定會很快。
我對文件大小沒有太大的興趣，我更多的興趣實在使用更少的樣色主題和更多的字體去設置網站的風格，像這個網站。

參考連接

• 更好地方案去使用vf字體
• vf字體詳細說明
• 可變字體
• 字體歷史