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

2021-08-24 10:29:22.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. 準備好小篇幅文章,設定於網頁內

例如文字為『文鼎晶熙黑』,將文字用<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

 


字體產品與應用

iFontCloud字型租賃授權介紹

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

 

字型使用行為,由一次性的消費習慣,轉換成以季或年為單位的租賃服務模式,在歐美、日本、韓國已經行之多年,在台灣,文鼎公司在2015年開始啟動iFontClout文鼎雲字庫,至今已經邁入第七個年頭,讓我們再一次的來認識一下iFontClout文鼎雲字庫的字型租賃服務: 

什麼是租賃字型–iFontCloud租賃字型提供了正版字型授權,可將字型透過雲端下載,到電腦上使用。而且,藉由雲端同步的機制,字型設計師新增與修改的字型也可以即時更新,讓使用者取得最新字型。 

可商業使用–為了保護智財權並兼顧會員使用便利性,可做為個人及商業用途。授權範圍請參照本服務之字型軟體使用授權書。  

雲端管理系統–依照需求的不同,選購符合的授權數量。一個帳號,在任何PC或Mac上皆可輕輕鬆鬆使用及管理。 

友善的管理介面–字型檔案存放雲端,輕鬆使用及管理字庫。透過工具列表,可快速輕鬆的完成安裝及移除。 

更新免煩惱–字型內容有修正或更新,用戶端即時更新。 

彈性租賃模式–針對特定字型需求,可至字型總覽頁面篩選。   


iFontCloud授權懶人包 

一個授權,一台電腦 

不論購買單套字或方案,購買數量1,指的是「一台電腦一個授權」,無法同時2台電腦使用,如需更換電腦,請登入iFontCloud至租賃管理頁面移轉。 

標準和進階版差異 

標準版:使用字型設計出來的產出物,以自用為目的,製作和使用都是同公司。作品所有權只可屬於授權方(製作者) 

適合對象:企業、自用 

進階版:使用字型設計出來的產出物,提供他人使用為目的,製作和使用是不同公司。作品所有權可屬於授權方(製作者)或客戶 

適合對象:設計公司 

不再租賃字型,作品可否繼續使用 

在購買一年內期間製作完成的作品,就算明年不再租賃方案,完成的作品仍然可以繼續使用,沒有時間限制。 

此外,字型檔案是放在雲端空間,當不再租賃方案,您的電腦沒有字型檔案,因此原始檔如果需要再編輯,會跳出找不到字型,需再次租賃才可編輯原始檔 

單套字的授權範圍 

單套字授權範圍同進階版。 

進階版:使用字型設計出來的產出物,提供他人使用為目的,製作和使用是不同公司。作品所有權可屬於授權方(製作者)或客戶 

同一套字型不同字重算幾套字? 

文鼎明體共有六種粗細(L, M, B, E, H, U),因此算六套字型 

已經購買租賃字型,如何開始使用字型? 

字型使用前需先下載「iFontCloud字庫管理工具」做為電腦與租賃服務的中繼,啟用訂單後,用戶依據使用需要,字型可選擇單套字下載或全部下載。 

請根據您的作業系統下載並安裝 https://ifontcloud.com/index/download_tool.jsp 

 

iFontCloud租賃字型授權範圍

 

如需更詳細內容,可參考標準版授權書、進階版授權書範本