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

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字型租賃授權介紹

在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租賃字型授權範圍

 

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

Products and Applications

文鼎字型關於字距的產品規格與應用

若是文鼎字型的鐵粉,有沒有發現近幾年文鼎的字型產品,在安裝後於軟體使用時,在字型選單列裡會出現另一組字體名稱幾乎一樣的字體,仔細一看,差別在於另一組字體名稱中多了「P」、「F」的代號。

 

幾年前,文鼎公司在與外部設計師交流的過程裡,不止一次聽過這樣的聲音,大致是這樣:在文章排版遇到中文全形符號的時後,常常需要花許多時間來調整個別符號的字間距,以免過大的白空間影響著版面閱讀的舒適度。

 

另一方面,真跡手寫數位字體的特色,除了字體造型外,每個字元的寬度、大小也不盡相同,我們將這樣的手感溫度帶入數位字體,讓每個字元在透過軟體排版後,仍然散發著人真人手寫的感受;然而,同時間字體也需要考量不同載體、軟體的相容度,這些都是在字體設計過程中字元規格的設計,連動到字體使用端文字間距調整的情境。

 

近幾年文鼎字型產品,如在印刷排版常會使用到的明、宋、仿宋、楷、黑、圓這幾類的字型產品,而且應用上,會在內文情境出現的字重規格,這些因素下,字型產品就會以TTC(TrueType Collections)的字體格是製作,裡面包含標準規格的漢字、符號以及有對常用39個中文全角符號進行調和(Proporitional)設計

的字型,這些有調整常用39個中文全角符號的字型,在字型選單列表裡,名稱中就會多了「P」這個代號,以下以文鼎書苑宋體為例。

 

而真跡數位化活潑風格的產品的情境剛好相反,通則上,以還原設計師寫字稿時字元的寬度為預設值,此時字元在排版上會呈現文字寬度擬真、有書寫韻律感的視覺效果;在兼容不同軟體對讀取字體的考量下,另外將真跡數位字型漢字的字寬,刻意的做等距的規格,在字型選單列表裡,名稱中就會多了「F」這個代號,以下以文鼎DC陳森田MORITA為例。

 

 

這些字型產品如果在Adobe軟體裡使用,要特別注意字元面版中「設定兩個字元之間的特殊字距」這個設定,若選到視覺,則文字會依Adobe的機制,根據字元的形狀自動調整選取字元間的間距。

Products and Applications

如何呈現國字〇

在使用輸入法輸出中文字時,你的零是以怎樣的面貌呈現呢?是寫成國字「零」,還是「〇」、「O」、「○」、「0」或是寫「0」?在windows作業系統的環境裡,「零」、「O」或「0」使用任何輸入法都可以打出來,但是「〇」用一般系統內建的輸入法像是注音、新注音、倉頡是找不到的,如果您有額外安裝的輸入法,如自然輸入法,鍵入零這個字,則可以透過選單找到「〇」。

上面舉例的這些字元造型都長的很相近,每一個字元在Unicode字碼的定義裡都有一組數字來代表自己,這組數字一般通稱為字碼,這幾個字碼及其代表的意思分別如下:

零:U+96F6,中文漢字零。

0:U+FF10,全形數字零。

○:U+25CB,空心圓圈,幾何圖形。

〇:U+3007,國字零,中日韓符號和標點。

0:U+0030,數字零,屬於基本拉丁字母。

O:U+004F,拉丁大寫字母O,屬於基本拉丁字母。

 

這些造型相似的字元在使用上會有怎樣的差異,下圖我們以微軟正黑以及文鼎UD晶熙黑體做舉例,在使用國字顯示西元年時,我們可以看到使用 U+3007「〇」字元有最佳的排版效果,除了U+3007這個字元本身就是為了與國字一起使用外,以晶熙黑體為例,還會因應字體造型、字重做最佳化的設計。

字碼對於大部份人來說很陌生,而且並不是每個軟體都支援字碼輸入,在word使用微軟注音輸入法時,透過輸入鍵盤上左上位置的「`」這個符號,就可以輸入字碼,輸入「~」會產生一個黃色的小視窗,此時輸入「U3007」按空格就可產出「〇」,要特別注意的是數字不能用鍵盤右方的小鍵盤輸入,一定要用英文上方的數字輸入才行。

如果在繪圖軟體,如Adobe illustrator裡,我們可以透過「字符」工具面版來找到「U+3007,〇」這個字元,或者是用前面word輸入的教學方式,在word中將「〇」呼叫出來,再複製到Adobe illustrator中做使用。

 

分享一個可以快速打出「〇」的方法,讓你不用再花時間找方法要怎麼打出這個字。

1. 開啟瀏覽器到google翻譯的頁面:https://translate.google.com/?hl=zh-TW

2. 選擇中文,會看到右下角顯示「注」,點選下拉選單,選擇「簡體中文(中國)-手寫」

3. 選好後就會出現手寫的輸入框,直接用滑鼠在上面寫「〇」

4. 寫好後就會顯示和「〇」相似的字,選擇紅框即會產出「〇」 

這個方法是不是很簡單,快來試試看吧!