哪些系統、瀏覽器和軟體支援可變式字型(Variable Fonts)？

2021-10-05 09:58:07.0

如何將可變式字體使用於網頁上

時間在2016 年底，Microsoft、Apple、Adobe、Google聯合發佈了OpenType 1.8 可變式字體Variable Font。

一個可變式字體檔案可以包含傳統靜態字體家族中的每一個字體。如果使用者端在字體有使用到兩個字重以上的情境，基於可變式字體技術的特性，字體的檔案資料量是可變式字體的一個優勢，我們以文鼎UD晶熙黑體G30字體為例，如果設計案件需要使用5個字重、4個字寬這樣龐大的字體家族，那麼總共20個字體檔案約有160MB，但若採用可變式字體，則僅需20MB，足足減少了87.5%的檔案資料量。

更好的是，設計師和工程師還可以幾乎不受限制的使用可變式字體中的變化。例如字重與字寬的變化，使用者可以在Medium、Heavy或與長體Condensed間透過變數軸或參數的調整自由穿插的使用字體。隨著可變式字體的推出與應用軟體的支援，我們可以預測到可變式字體使用上的好處：為網頁/UI工程師在多字重字體資料量提供更好的壓縮，為設計師在作品上提供更細膩的呈現，以及為讀者提供更精緻的閱讀體驗。

可變式字體在2016/11月發佈後，最早支援可變式字體的主要設計軟體是 Adobe Photoshop、Illustrator 和 InDesign。如今，這些軟體內建了多款英文可變式字體，因此，現在數百萬使用 Creative Cloud 的設計師都可以體驗到可變式字體這種新的排版潛力。

使用情境如果移轉到Web呢？我們先來體驗一下吧！將滑鼠經過下方文字，看看會有怎樣的效果～

這個效果都是可變式字體透過CSS的設定所設計出來的互動呈現，我們分解成5個步驟：

1. 設定Web Font

於網頁內嵌入Web Font JS

2. 準備好小篇幅文章，設定於網頁內

例如文字為『文鼎晶熙黑』，將文字用分別組合起來並放入網頁內今 晚 我 想 來點

3. 設定字型名稱\

span {

font-family:'文鼎VF甜妞體_Wr';

}

4. 設定動畫呈現

預設文字字重為 300

span {

font-variation-settings: 'wght' 300;

}

當滑鼠移到文字上時，將字重設定為 600

span:hover {

font-variation-settings: 'wght' 600;

}

5. 加入一些進場、退場效果

設定3秒回到原始字重300

span {

font-variation-settings: 'wght' 300;

transition: 3s;

}

設定0.1秒字重設定到600

span:hover {

font-variation-settings: 'wght' 600;

transition: .1s;

}

透過以上五個步驟及CSS的設計，就可在網頁上以文字輕鬆、快速的呈現出動態效果來。在現在的桌機和移動設備上主要的瀏覽器大都已支援可變式字體的顯示，支援的瀏覽器版本整理如下表，因此，我們可以期待，透過更多可變式字體產品的推出，網頁的面貌將在互動設計師與網頁工程師攜手下，帶來許多的視覺觀感體驗。

Web browsers
Chrome	✅	62+
Safari	✅	11+ (requires macOS 10.13+)
iOS Safari	✅	11+
Firefox	✅	62+ (requires macOS 10.13+)
Edge	✅	17+
Opera	✅	49+
Samsung Internet	✅	8.2+

如果對於可變字體在網頁CSS動態效果的設定有興趣的話，下方網址有更多中文可變式字體套用Web CSS設定的使用範例。

https://ifontcloud.com/index/variablefont_demo.jsp

文鼎網頁字型方案

https://ifontcloud.com/index/plan.jsp

VF Variable font 可变式字型

Products and Applications

長久以來，大多數中文漢字數位字體的設計規格都侷限在正方形的方框中，從而產品化出結構方正的字體，然而，當遇到字元寬度無法在有限的寬度空間中做文字排版時，即延伸出「長體」的字體產品，用以縮減排版時整體的字元寬度。早期長體的設計，相對於正方形標準產品的設計規格，保持相同的字體高度，但縮小左右的水平空間，所形成長型的字體即稱為長體，相對於未變形前水平、垂直100%的比例，縮小左右10%比例的字體，稱為長一，縮小左右20%比例的字體，稱為長二…。

為什麼要使用長體字？
長體數位中文字型的數量相對來的少，在早期，由於軟、硬體環境的不成熟，長體字被設計在正方形的方框中，縮小後的左右水平空間以留白的樣貌呈現，在水平橫向排排版應用時，會形成字元間距過大的情況。隨著外部軟硬體技術的提升，新技術、新應用情境的發生，字體設計的彈性更加的廣泛，讓字體設計師的創意可以盡情的發揮。

如前述，規格上，長體是縮小左右比例後的字型產品，在應用上存在經濟效益，此經濟效益說明的是節省版面的空間，具有較窄字寬的長體字，能夠將更多的字元呈現在一行、標題、段落、區塊文字甚至是頁面中，具有在有限的排版空間上呈現較多字元數的特性，反之，在同樣的版面空間上，可以有較多的字元數來呈現內容。但是，長體字也不是沒有缺點，畢竟在漢字，尤其是筆畫數多的漢字，在縮小字寬後的辨視度、易讀性會比標準字寬的字體來的低。

中文長體字的使用在直排、字元數少的情境下效果最佳，以字元數少的情境，當字體家族具有標準與長體字的設計時，如標題、引言等都是長體適合發揮的舞台。使用同一種字體風格的長體字做排版，除了可以凸顯要點外，還可以維持整體風格的一致性；當長體字被獨立使用時，其長形字的特色容易被凸顯出來，用在獨立的標題更顯特色。

長體字型產品的開發，豐富且擴展了字體家族。
中文字型產品的字體家族(font family)大多以字重的粗細為基礎做字型產品的開發，相對於拉丁字的字體家族設計，除了字重以外，還有斜體(italic)、長體/窄體(condensed/ narrow)、寬體(extended)等設計，對應上就顯的單薄。在應用上，若設計案件選擇到具有condensed/ narrow設計的拉丁字，這時，往往找不到合適的中文字型產品做匹配。

自2017年開始，文鼎字型著手設計並發行具有規格化的長體字型產品，在字型設計時，即考量使用行為，為了讓設計師/使用者快速的從軟體的字型清單中找到長體字型，我們在字體名稱上做區隔，透過代碼即可辨視該字型是否為長體字。長體字型以代碼C做為表示，代碼後的數字表示在EM1000的規格下，字寬的比例，如「C80」表示為長體、字寬80%的字型。

目前，文鼎字型具有長體設計的字體家族有：文鼎UD晶熙黑體E1、文鼎方新書、文鼎書苑宋、文鼎白玉書體，詳細如下：（Variable Font：表示變數軸支援長體的變化）

字型名稱	字重	標準	C95	C90	C80	Variable Font
文鼎UD晶熙黑體 E1	MD	●	○	○	●	●
	DB	●	○	○	●
	BD	●	○	○	●
	EB	●	○	○	●
	HV	●	○	○	●
文鼎方新書 H7	MD	●	●	●	●	●
	DB	●	●	●	●
	BD	●	●	●	●
	EB	●	●	●	●
	HV	●	●	●	●
文鼎書苑宋 HKH32 文鼎書苑宋 HKH46	MD	●	○	○	●	●
	DB	●	○	○	●
	BD	●	○	○	●
	EB	●	○	○	●
	HV	●	○	○	●
文鼎白玉書體 H16	LT	✖	✖	●	✖	●
	MD			●
	DB			●
	BD			●
	EB			●
	HV			●
	EH			●
	DBL			●
	BL			●
文鼎白玉書體 H32	MD	✖	✖	●	✖	●
	DB			●
	BD			●

*○:可透過可變式字型(Variable Font)使用

長體字型產品圖例：

字重

標準

C95

C90

C80

Variable Font

文鼎UD晶熙黑體 E1

●

✖

●

文鼎方新書 H7

●

文鼎書苑宋 HKH32
文鼎書苑宋 HKH46

●

文鼎白玉書體 H16

✖

●

✖

●

DBL

●

文鼎白玉書體 H32

✖

●

✖

●

長體字型產品圖例：

condensed 长体

Products and Applications

如何合法取得文鼎字型

相信現在還是有很多人會在網路上搜尋免費字型下載使用，這些免費字型的提供者也許是抱著好東西要與好朋友分享的心態，把字型放在網站上供人下載。下載方式非常簡單，但是點擊下載的動作已經違法。

也許在許多人的認知上字型只是輔佐文件的素材，但是每套字都是字體設計師一筆一畫勾勒出來的心血結晶。以台灣所使用的繁體中文Big5字集為例，一套字的開發，若只投入一個人，可能耗費一年半的時間都沒有辦法完成。有人說一塊錢的製作成本遠遠超乎他的現價，這個理論套用在字型上似乎是相同的。近年來台灣的版權意識越來越高，尊重創作者的心血、使用者付費也是文鼎一直在宣導的。

該如何取得正版文鼎字型呢？。除中國地區外，皆可透過文鼎iFontCloud網站選購。在台灣，也可透過文鼎的代理商展碁及其經銷商購買。此外，我們在Momo, PChome, Yahoo, Friday以及博客來等電商平台也有銷售文鼎雲字庫的實體卡。而在中國則可透過邑石網選購，或直接聯絡文鼎上海分公司。除以上通路，文鼎並沒有在任何網站上提供免費字型下載，請務必小心！透過合法的管道取得字型資源，不但能給予字體設計師支持與鼓勵、轉化為繼續設計好字型的動力，字型公司也才能有資源提供更多字體。這樣的正向循環，需要您我共同努力。

买字字型下载