時間在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. 準備好小篇幅文章，設定於網頁內

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

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

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

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

文鼎網頁字型方案

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

文鼎公司成立滿三十年，回顧文鼎字型產品，主要投入在東亞的字型開發，包含繁體中文、簡體中文、日文這三個語言字型；另外，還有其他如泰文、阿拉伯文、印度文及歐文字型。在這些語文當中，又隨著各國資訊處理發展演變及國際標準化規範的潮流，衍生出不同技術規格的產品，如我們熟悉的繁體中文，在字集規格面，可分為Big5、Unicode 2.0、Unicode 3.0…等規格。因此，我們可以理出一個字體命名的大方向：先看語言、字集，再延伸其他字體屬性。

技術規格面主要包含字符集(也常稱為字集, Character set)、字型格式：

字符集以語言為基礎，在繁體中文、簡體中文、日文有以下常用的規格：

繁體中文：Big5、Unicode 2.0、Unicode 3.0

簡體中文：GB2312、GB18030

日文：JIS X 0208、JIS X 0213、A-J1-3

字型格式主要分為兩大類：TrueType、OpenType，其中，TrueType又包含了TrueType Collections(TTC)，這是一種允許將多個字型合併為一個字型檔案的格式。TrueType格式的字型產品，在產品名稱後面大多加上B5、 HK、U30字符集的縮寫來傳達產品語言的支援情況，但在OpenType格式的字型產品，我們以字元數量的多寡為基礎，分為Std、Pro兩個系列，以繁體中文為例，標準的Big5字符集產品在OpenType格式的字體名稱後會加有Std標示，而Big5+HKSCS(香港增補字符集)則有Pro的標示，如：文鼎UD晶熙黑體 B5Pro。

接著，我們就可以來細看一些字體名稱上的代號概述：

表示語言/字符集

G30：簡體中文GB18030字符集，如：文鼎UD晶熙黑体XG30 (若簡體字集沒有標示G30則為GB2312字集)

U30：繁體中文Unicode 3.0字符集，如：(若繁體中文沒有標示U30則為Big5字集) ，如：文鼎UD晶熙黑體U30

HK：字集中含有香港字符集，如：文鼎UD晶熙黑體HK

JP：日文JIS X 0208字符集，如：AR UDJingXiHeiJP

KR：韓文 _KSX1001字符集(Hangul Only) ，如：AR UDJingXiHeiE1KR 

表示字型屬性

C：長體(Condensed)字體設計，EM 1000下的字體設計規格，提供C80、C90、C95等3種字寬變化，C80表示字面框的寬度為高度的80%，如文鼎方新書H7C80。

X：EM 1000下的字體設計規格，字體字面寬縮小成95%的版本，形成長型字的字體感受，如：文鼎UD晶熙黑体XG30

E：E (加一碼數字)產品中的英歐文符號為另一中種造型的設計，以文鼎UD晶熙黑體為例，標準產品搭配 AR Dori Sans造型的英歐文，而文鼎UD晶熙黑體E1搭配AR NewHebe Sans造型的英歐文。

P(適用於TTC格式)：

繁體中文、簡體中文_字型中的常用全角符號為調和設計(Proportional)，如：文鼎UD晶熙黑體PHK。若無標示P，則字型中的全角符號為定距設計(Fixed pitch)，如文鼎UD晶熙黑體HK：

日文_除全角符號外，日文中的KANA符號也做調和設計(Proportional) ，如：ARマーカー体P。

F(適用於TTC格式)：中文手寫字體漢字字寬維持定距全角的寬度設計，如：文鼎DC香蕉人體F。

Display：標題用字，字型設計特徵符合標題、大字的使用情境，如：文鼎書苑宋DisplayH16。

Text：內文用字，字型設計特徵符合內文、長文排版的使用情境，如：文鼎書苑宋TextH32。

H16、H32、H46、H62：絕對值，字型設計規格，描述在EM 1000的設計規格下，橫筆的粗度為上述數值單位的呈現，如：文鼎書苑宋TextH32。

H7：比例值，字型設計規格，表示字型設計上，橫向筆畫的粗度為直向筆畫粗度的70%，如文鼎方新書H7。

表示字重

HR: Hair 

TH: Thin

L / LT: Light 

M / MD: Medium 

D / DB: Demi Bold 

B / BD: Bold 

E/ EB: Extra Bold 

H / HV: Heavy 

EH: Extra Heavy 

DBL: Demi-Black 

BL: Black 

UBL: Ultra Black

表示產品設計分類

DC：Designer Collection，為文鼎與外部設計師、書法家、插畫家合作開發的字型產品，如：文鼎DC清圓體。

UD：UD Font (Universal Design Font)字型設計，就是延伸自Universal Design，設計精神包含：識別性、易讀性、設計簡潔，如：文鼎UD晶熙黑體。

表示可變式字型

Wl, Wr, Wu: 字重(weight)軸的極細段(light), 中間段(regular), 極粗段(ultra)

W: 字寬(width)軸

C: 對比(contrast)軸

G: 中宮(zhong gong)軸

H: 字高(height)軸

O: 光學尺寸視覺調整(optical size)軸(微字型, 標誌用字濃淡度調整)

S: 樣式(style)軸

多種字型名稱代號的定義，代表著產品設計因應著外部變化的腳步，讓字型產品輔助使用者，為設計帶來最佳的視覺效果。

文鼎是一家字型廠商，近幾年也陸續承接了許多字型配對的案件，主要都由英歐文字的需求開始，做中文、日文、韓文的字體搭配。以我們所處的環境，每天眼睛看到的繁體中文，對我們來說是最熟悉不過的文字，但是，對於文字來說，透過筆畫造型、字體結構等變數因子的設計，會產生許多不同風格的字體產品出來，茫茫字海中有沒有什麼方式可以讓使用者快速的找到所需使用的字體呢？

喜歡喝咖啡或常逛咖啡館的同好如果有注意到的話，應該會知道「咖啡風味輪(Coffee Taster's Flavor Wheel)」，它時常以海報的形式掛在咖啡館中展示，如果沒有看過，有機會的話多走幾間咖啡館，留意一下牆面的海報，就會發現囉！我們參考咖啡風味輪的概念，將其延伸到字體來，以漢字為出發點，從以字型應用的角度，試圖將抽象的感受具體呈現出來，用圖像形式設計出一個具有感性、具有情感的字體分類系統，讓使用者需要以感受來選字時，可以透過字體風味輪找到對應的字體，減少找字體、選字體的時間。

感受這種東西是一種主觀性的認知，為了盡量找出符合大眾想法的感受，在繪製字體風味輪之前，研究團隊做了以下前期研究：

1. 研究咖啡風味輪期發展過程，是否有可借鏡之處？

2. 以人為單位，不同的個體對字體造型是否有共通感受？

3. 字體造型是否受到文化發展的影響

4. 越來越多的跨語系字型Matching，風味輪/個性輪的定義，是否對此有幫助？及智慧顯示的應用？

我們認為感受性的事物會因為人、事、時、地、物等因素而有不同，因此我們也藉由公開的投票系統，讓參與者參加字體風味輪分類的統計，讓字體風味輪不僅是一個圖像，而是能呼應外界的變化具有生命力的模型。

最後，整合我們所收集到的數據，將這些資料整合到字體的資料庫，讓每個字體都有自己的標籤分類形成字體風味輪。

文鼎字體風味輪檔案下載