時間在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

文鼎DC陳森田MORITA是文鼎字型與插畫家_陳森田合作開發的手寫字型，所有字體的內容包含中文、英歐文、符號等，都是陳森田手寫繪製，再由文鼎字型作數位化產品設計，產品同時涵蓋繁體中文、簡體中文。

陳森田MORITA_B體將漢字定距字與調和字整合在一個字型檔案裡，讓，森田手寫字的手感、Q感及溫度可以呈現出來。使用者透過字型選單選擇適合情境的字型做應用。

本影片透過Adobe Illustrator來呈現文鼎DC陳森田體的使用方式，演示漢字定距與漢字調合設計排版上視覺的不同。

應用設計

使用Microsoft Word做文書編輯是日常中再正常不過的一件事，但是將文件編寫完成後，做樣式、段落的排版後，想要輸出PDF檔，卻遇到本來該加粗的文句卻無法顯示粗體的困擾嗎？

這樣的情況有幾個事件可以做探討：

1. 使用Word提供的加粗功能是否合宜？
2. 在Word編輯後，轉存PDF的方式？

下圖是Word工具列截圖的畫面，本文說明的重點在「B」這個圖示「將文字變成粗體」的功能。在Word中使用「B」圖示做文字加粗為Word軟體中提供的功能，但此加粗是透過程式計算的方式，將文字做粗體的顯示，嚴謹來說，相信字體設計師一定不喜歡這樣的加粗效果，但這樣的功能有其一定方便性與經濟性(不用特別再買一個粗體字來做粗體效果)



透過程式計算機制的字體加粗效果，其在字元架構的美觀性遠不如經過設計師微調筆畫空間後的成果，若在講究文字排版細節時，我們會建議選擇同字體家族較粗的字型來自為字體加粗效果的選項。以文鼎字型的字重單位為例，若是使用Medium字重做為內文排版，則加粗效果的字重建議為Bold，若是使用Demibold字重做為內文排版，則加粗效果的字重建議為Extrabold，也就是跳一個字重單位的方式來做使用。


回到本文的問題，若在Word文件編輯後，使用另存新檔，執行儲存PDF檔案的動作後，卻發現原本該有的文字加粗效果在PDF文件重無法呈現？這是哪裡出了問題呢？

這與Word軟體的以及字體產品工程的設定有關係，在字體產品工程的設定中，有一個「OS/2 table / WeightClass」的設定，當字體在這個欄位的設定值與Word不一致時，就會出現在轉存PDF無法顯示字體加粗的效果，此時，若有訂閱Adobe的使用者，使用「儲存為Adobe PDF」或「列印成PDF」一樣無法解決文字加粗效果無法呈現的問題。

這樣的情況，根本的問題解決方式為文章上方所建議，透過使用相同造型的字體家族，選用較粗的字重來排版，以徹底解決文字無法加粗的困擾，並達到加粗後的字體有最佳的顯示效果。



附註：
Microsoft 對於PDF加粗的回應：Bold font is not shown in pdf output from word
Adobe對於PDF加粗的回應：One of my fonts not in bold when making a PDF