如果有將iPhone或iPad系統更新至16.2以上版本的使用者，會發現多了一個名為「無邊記」的APP。這是APPLE所推出跨 iOS、iPadOS 和 macOS的軟體，協助使用者在個人記事或是團隊合作而設計的白板功能，讓使用者能更方便與他人共用、編輯畫布內容。除了自由畫圖筆記外，關於文字的部分，使用者透過點擊App畫面底部「新增文字」的方式，畫面出現的文字方塊可自由縮放文字的大小，也能更改文字的顏色／字型／尺寸。

我們今天要介紹的是如何透過Fonts Fun-字字不倦、iFontCloud文鼎雲字庫這兩個App，讓使用者可以在「無邊記」上使用到文鼎字型。

Fonts Fun-字字不倦

1.在 App Store上搜尋並下載「Fonts Fun」

2.開啟Fonts Fun App後，您可在Fonts Fun App中預覽文鼎字體，裡面精選了 3個不同特色的方案，您可以依照您的喜好、個人應用需求，訂閱字體包安裝使用。另外也提供了一個免費字體方案包，當中包含了繁\簡體9套字型。

3.以免費字體包為例，在App下方「Aa字體」的頁面中，使用者可以看到9款免費字型，我們以文鼎花草體為例，滑動右方開關，呈現綠色狀態即表示字型已被啟用，且掛載到系統上，可以進行使用。如果想要進一步確認，可以在iOS系統的『設定』>『一般』>『字體』中看到已安裝的字體名稱。

4.接下來就可以在Fonts Fun App或無邊際上使用到已經啟用的字型。

iFontCloud 文鼎雲字庫 (iFontCloud for iOS, iPadOS)
1.App Store上搜尋並下載「iFontCloud 文鼎雲字庫」

2.開啟iFontCloud 文鼎雲字庫 App後，您可在App中預覽文鼎字體，以及同步使用到於iFontCloud租賃服務所訂購的字型產品。使用者可以透過位於App的左上方的「篩選」功能挑選合適的字型產品。

3.以文鼎DC云康行楷為例，滑動右方開關，呈現綠色狀態即表示字型已被啟用，且掛載到系統上，可以進行使用。如果想要進一步確認，可以在iOS系統的『設定』>『一般』>『字體』中看到已安裝的字體名稱。

透過上方簡單的介紹，讓使用者可以理解如何在iPhone、iPad上使用文鼎字型並運用於工作或娛樂上。除了「無邊際」以外，現在從Apple Store下載的App，只要開發者有使用Apple新的Font API進行開發，就可以透過Fonts Fun或iFontCloud for iOS使用到文鼎字型。

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

在adobe推出Adobe Creative Cloud雲端服務後，設計界使用軟體的習慣因此有了重大的改變，對於軟體廠商而言，可稱做是整個使用生態的重構。字型對於設計師來說是一個重要的設計素材，而數位字體開發廠商本質上與Adobe一樣，都是軟體開發商，現今也都隨著趨勢轉型為以服務為導向的工作型態。