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

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

文鼎DC陳森田MORITA

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

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

 

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

應用設計

Products and Applications

文鼎DC香蕉人體

來自宇宙的香蕉人學寫字,慢慢地寫、緩緩地進步,他的字,有點呆、有點萌。這是文鼎字型與插畫家_香蕉人(林柏辰)合作開發的手寫字,所有字體的內容都是香蕉人手寫繪製,再由文鼎字型作數位化,產品同時涵蓋繁體中文、簡體中文。

 

手寫字體具有溫暖的感受,在數位化的過程中,我們思考傳統上數位字型的規格以及用戶的體驗,最終,將香蕉人體漢字定距字與調和字整合在一個字型檔案裡,使用者透過字型選單選擇適合情境的字型做應用。

 

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

應用設計

Products and Applications

大師手寫、設計師創作的心動字體

看起來整齊、造型元素一致的美術字體,排版使用一段時間後,會不會覺得少了一分「人」的溫度呢?云康行楷、黃陽尖魏、清圓體、香蕉人體、陳森田MORITA、蔡燊軒行書體,有沒有驚訝到這些字體的名稱都是以人為名啊?

 

現行透過造字工具,以筆畫組字方式構成的字型產品,開發上,大多以嚴僅的製程在進行筆畫設計、造型元素、字間結構的統整,整合出具有個別特色的印刷、螢幕顯示字體。若我們往前探究,字體造型的根源會許會追溯到真人手寫的這條軌跡。文鼎公司自2015年開始,陸續與書法家、設計師、插畫家合作,引進具有特色的字體造型進行真跡數位字體的開發,每件產品皆以精品字的標準做產品化,在字體應用效果上,也開創手寫數位字體的先河,透過個別字元寬度最佳化的機制,將筆尖書寫的溫度展示在數位媒介中;目前為止,繁體中文、簡體中文合計共有26個字體產品,11位創作者的合作。

 

以下我們透過幾張圖例來讓大家認識文鼎DC (Designer Collection)系列,精品真跡、設計字型:

  1. 文鼎DC云康行楷,支援語言:繁體中文、簡體中文
  2. 文鼎DC黃陽尖魏,支援語言:繁體中文、簡體中文
  3. 文鼎DC黃陽男神體,支援語言:簡體中文
  4. 文鼎DC云康鋼筆行楷,支援語言:繁體中文、簡體中文
  5. 文鼎DC光璐硬筆楷書,支援語言:簡體中文
  6. 文鼎DC清圓體,支援語言:繁體中文、簡體中文
  7. 文鼎DC蔡燊軒行書體,支援語言:繁體中文、簡體中文
  8. 文鼎DC香蕉人體文鼎DC陳森田MORITA,支援語言:繁體中文、簡體中文

透過上方簡單排版的圖例,應該可以感受到每款字體有著自我獨特的個性,呈現出多種氛圍,如果厭倦的使用筆畫組字的字型,不妨試試文鼎DC系列字體產品: 文鼎DC繁中DC風格包文鼎簡中DC風格包
產品快速連結如下:

 

            

 

如果正在閱讀文章的您也想擁有一款具有個人風格的字體,歡迎您將一起加入心動字體的陣容,將您具有特色的書寫風格做投稿,詳細投稿辦法,煩請點選下方連結:字體合作辦法下載

或文鼎官網「字創」字體專區