variable fonts - 更小更靈活的字型

HTML · 發表 2018-12-02 12:25:37

摘要： variable fonts（下文中vf為縮寫）是數字時代製作的字型技術，用更小的檔案大小在web上提供更豐富的排版，但是一項新的技術往往伴隨著新的挑戰和複雜未知的情況。不過，我們要擁抱技術，那麼怎麼才能使用它呢？讓我們從以下幾個問題去學習一下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字型來獲得更小檔案體積的收益。舉個例子： ofollow,noindex">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和谷歌會在推動這項技術中一定會佔主要部分，因為他們同樣需要減少字型檔案大小，雖然不知道這件事什麼時候會發生。但是一定會很快。我對檔案大小沒有太大的興趣，我更多的興趣實在使用更少的樣色主題和更多的字型去設定網站的風格，像這個網站。