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

2021-08-24 10:29:22.0

分類: Products and Applications

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

 

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

 


Products and Applications

更換電腦,iFontCloud文鼎雲字庫軟體無法使用,該怎麼辦?

使用iFontCloud文鼎雲字庫軟體一段時間後,如果也想要在另外一台電腦上使用字體,在新電腦下載安裝iFontCloud文鼎雲字庫完成後,你可能會遇到啟用訂單時出現告知「無法啟用訂單」或是「授權已滿」的訊息,這時候該怎麼做呢?

 

由於iFontCloud文鼎雲字庫軟體的授權認定是以認定電腦設備為單位,當更換電腦或是重灌電腦(會視為新的電腦)必須將原本的電腦授權移除才能在新的電腦使用,此時需要到iFontCloud網站的租賃管理頁面移除舊電腦的授權,才能在新電腦的iFontCloud文鼎雲字庫軟體訂單頁面啟用訂單。

 

iFontCloud字型服務授權移轉操作步驟說明如下:

1. 請至iFontCloud進行會員登入

 

2. 登入完成後,點選圖示,於下拉選單點選「租賃管理」

 

移除授權前

 

 

移除授權後

Products and Applications

文鼎DC云康行楷

由施隆民教授書寫的文鼎DC云康行楷,字型書寫旨在掌握書法的美感,筆法上以流暢、生動為原則;結構上為了排版印刷的美觀,盡量保持「端莊」的體態。云康行楷在設計時,加入中文排版裡「疊字」效果的巧思,施隆民教授在書寫時,特意創作「相同字的不同寫法」,以展現書法中「不雷同」「不重複」的美感,讓云康行楷更能呈現書法藝術的精神。此外,云康行楷提供了兩種不同書法風格作選擇,其中云康行楷碑帖版,藉由部首共用、改變寫法、增減筆畫等多方式,保留傳統書法運筆藝術之美。

 

本影片透過Adobe Illustrator來呈現云康行楷TrueType(TTF)與OpenType(OTF)兩個字型格式的使用方式,分別示範疊字的選用,以及中文常用全型符號調和設計(Proportional)。

應用設計

Products and Applications

如何在iPhone、iPad使用文鼎字型運用於工作或娛樂

如果有將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使用到文鼎字型。