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

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

認識文鼎字體的命名

文鼎公司成立滿三十年,回顧文鼎字型產品,主要投入在東亞的字型開發,包含繁體中文、簡體中文、日文這三個語言字型;另外,還有其他如泰文、阿拉伯文、印度文及歐文字型。在這些語文當中,又隨著各國資訊處理發展演變及國際標準化規範的潮流,衍生出不同技術規格的產品,如我們熟悉的繁體中文,在字集規格面,可分為Big5、Unicode 2.0、Unicode 3.0…等規格。因此,我們可以理出一個字體命名的大方向:先看語言、字集,再延伸其他字體屬性。

 

 

 

技術規格面主要包含字符集(也常稱為字集, Character set)、字型格式:

字符集以語言為基礎,在繁體中文、簡體中文、日文有以下常用的規格:

繁體中文:Big5、Unicode 2.0、Unicode 3.0

簡體中文:GB2312、GB18030

日文:JIS X 0208、JIS X 0213、A-J1-3

 

字型格式主要分為兩大類:TrueType、OpenType,其中,TrueType又包含了TrueType Collections(TTC),這是一種允許將多個字型合併為一個字型檔案的格式。TrueType格式的字型產品,在產品名稱後面大多加上B5、 HK、U30字符集的縮寫來傳達產品語言的支援情況,但在OpenType格式的字型產品,我們以字元數量的多寡為基礎,分為Std、Pro兩個系列,以繁體中文為例,標準的Big5字符集產品在OpenType格式的字體名稱後會加有Std標示,而Big5+HKSCS(香港增補字符集)則有Pro的標示,如:文鼎UD晶熙黑體 B5Pro。

 

接著,我們就可以來細看一些字體名稱上的代號概述:

表示語言/字符集

G30:簡體中文GB18030字符集,如:文鼎UD晶熙黑体XG30 (若簡體字集沒有標示G30則為GB2312字集)

U30:繁體中文Unicode 3.0字符集,如:(若繁體中文沒有標示U30則為Big5字集) ,如:文鼎UD晶熙黑體U30

HK:字集中含有香港字符集,如:文鼎UD晶熙黑體HK

JP:日文JIS X 0208字符集,如:AR UDJingXiHeiJP

KR:韓文 _KSX1001字符集(Hangul Only) ,如:AR UDJingXiHeiE1KR 

 

表示字型屬性

C:長體(Condensed)字體設計,EM 1000下的字體設計規格,提供C80、C90、C95等3種字寬變化,C80表示字面框的寬度為高度的80%,如文鼎方新書H7C80。

X:EM 1000下的字體設計規格,字體字面寬縮小成95%的版本,形成長型字的字體感受,如:文鼎UD晶熙黑体XG30

E:E (加一碼數字)產品中的英歐文符號為另一中種造型的設計,以文鼎UD晶熙黑體為例,標準產品搭配 AR Dori Sans造型的英歐文,而文鼎UD晶熙黑體E1搭配AR NewHebe Sans造型的英歐文。

 

P(適用於TTC格式):

繁體中文、簡體中文_字型中的常用全角符號為調和設計(Proportional),如:文鼎UD晶熙黑體PHK。若無標示P,則字型中的全角符號為定距設計(Fixed pitch),如文鼎UD晶熙黑體HK:

日文_除全角符號外,日文中的KANA符號也做調和設計(Proportional) ,如:ARマーカー体P。

 

F(適用於TTC格式):中文手寫字體漢字字寬維持定距全角的寬度設計,如:文鼎DC香蕉人體F。

 

Display:標題用字,字型設計特徵符合標題、大字的使用情境,如:文鼎書苑宋DisplayH16。

 

Text:內文用字,字型設計特徵符合內文、長文排版的使用情境,如:文鼎書苑宋TextH32。

 

H16、H32、H46、H62:絕對值,字型設計規格,描述在EM 1000的設計規格下,橫筆的粗度為上述數值單位的呈現,如:文鼎書苑宋TextH32。

H7:比例值,字型設計規格,表示字型設計上,橫向筆畫的粗度為直向筆畫粗度的70%,如文鼎方新書H7。

表示字重

HR: Hair 

TH: Thin

L / LT: Light 

M / MD: Medium 

D / DB: Demi Bold 

B / BD: Bold 

E/ EB: Extra Bold 

H / HV: Heavy 

EH: Extra Heavy 

DBL: Demi-Black 

BL: Black 

UBL: Ultra Black

 

表示產品設計分類

DC:Designer Collection,為文鼎與外部設計師、書法家、插畫家合作開發的字型產品,如:文鼎DC清圓體。

UD:UD Font (Universal Design Font)字型設計,就是延伸自Universal Design,設計精神包含:識別性、易讀性、設計簡潔,如:文鼎UD晶熙黑體。

 

表示可變式字型

Wl, Wr, Wu: 字重(weight)軸的極細段(light), 中間段(regular), 極粗段(ultra)

W: 字寬(width)軸

C: 對比(contrast)軸

G: 中宮(zhong gong)軸

H: 字高(height)軸

O: 光學尺寸視覺調整(optical size)軸(微字型, 標誌用字濃淡度調整)

S: 樣式(style)軸

 

多種字型名稱代號的定義,代表著產品設計因應著外部變化的腳步,讓字型產品輔助使用者,為設計帶來最佳的視覺效果。

 

Products and Applications

長體

長久以來,大多數中文漢字數位字體的設計規格都侷限在正方形的方框中,從而產品化出結構方正的字體,然而,當遇到字元寬度無法在有限的寬度空間中做文字排版時,即延伸出「長體」的字體產品,用以縮減排版時整體的字元寬度。早期長體的設計,相對於正方形標準產品的設計規格,保持相同的字體高度,但縮小左右的水平空間,所形成長型的字體即稱為長體,相對於未變形前水平、垂直100%的比例,縮小左右10%比例的字體,稱為長一,縮小左右20%比例的字體,稱為長二…。

為什麼要使用長體字?
長體數位中文字型的數量相對來的少,在早期,由於軟、硬體環境的不成熟,長體字被設計在正方形的方框中,縮小後的左右水平空間以留白的樣貌呈現,在水平橫向排排版應用時,會形成字元間距過大的情況。隨著外部軟硬體技術的提升,新技術、新應用情境的發生,字體設計的彈性更加的廣泛,讓字體設計師的創意可以盡情的發揮。

如前述,規格上,長體是縮小左右比例後的字型產品,在應用上存在經濟效益,此經濟效益說明的是節省版面的空間,具有較窄字寬的長體字,能夠將更多的字元呈現在一行、標題、段落、區塊文字甚至是頁面中,具有在有限的排版空間上呈現較多字元數的特性,反之,在同樣的版面空間上,可以有較多的字元數來呈現內容。 但是,長體字也不是沒有缺點,畢竟在漢字,尤其是筆畫數多的漢字,在縮小字寬後的辨視度、易讀性會比標準字寬的字體來的低。


中文長體字的使用在直排、字元數少的情境下效果最佳,以字元數少的情境,當字體家族具有標準與長體字的設計時,如標題、引言等都是長體適合發揮的舞台。使用同一種字體風格的長體字做排版,除了可以凸顯要點外,還可以維持整體風格的一致性;當長體字被獨立使用時,其長形字的特色容易被凸顯出來,用在獨立的標題更顯特色。



長體字型產品的開發,豐富且擴展了字體家族。
中文字型產品的字體家族(font family)大多以字重的粗細為基礎做字型產品的開發,相對於拉丁字的字體家族設計,除了字重以外,還有斜體(italic)、長體/窄體(condensed/ narrow)、寬體(extended)等設計,對應上就顯的單薄。在應用上,若設計案件選擇到具有condensed/ narrow設計的拉丁字,這時,往往找不到合適的中文字型產品做匹配。



自2017年開始,文鼎字型著手設計並發行具有規格化的長體字型產品,在字型設計時,即考量使用行為,為了讓設計師/使用者快速的從軟體的字型清單中找到長體字型,我們在字體名稱上做區隔,透過代碼即可辨視該字型是否為長體字。長體字型以代碼C做為表示,代碼後的數字表示在EM1000的規格下,字寬的比例,如「C80」表示為長體、字寬80%的字型。




目前,文鼎字型具有長體設計的字體家族有:文鼎UD晶熙黑體E1、文鼎方新書、文鼎書苑宋、文鼎白玉書體,詳細如下:(Variable Font:表示變數軸支援長體的變化)

長久以來,大多數中文漢字數位字體的設計規格都侷限在正方形的方框中,從而產品化出結構方正的字體,然而,當遇到字元寬度無法在有限的寬度空間中做文字排版時,即延伸出「長體」的字體產品,用以縮減排版時整體的字元寬度。早期長體的設計,相對於正方形標準產品的設計規格,保持相同的字體高度,但縮小左右的水平空間,所形成長型的字體即稱為長體,相對於未變形前水平、垂直100%的比例,縮小左右10%比例的字體,稱為長一,縮小左右20%比例的字體,稱為長二…。

為什麼要使用長體字?
長體數位中文字型的數量相對來的少,在早期,由於軟、硬體環境的不成熟,長體字被設計在正方形的方框中,縮小後的左右水平空間以留白的樣貌呈現,在水平橫向排排版應用時,會形成字元間距過大的情況。隨著外部軟硬體技術的提升,新技術、新應用情境的發生,字體設計的彈性更加的廣泛,讓字體設計師的創意可以盡情的發揮。

如前述,規格上,長體是縮小左右比例後的字型產品,在應用上存在經濟效益,此經濟效益說明的是節省版面的空間,具有較窄字寬的長體字,能夠將更多的字元呈現在一行、標題、段落、區塊文字甚至是頁面中,具有在有限的排版空間上呈現較多字元數的特性,反之,在同樣的版面空間上,可以有較多的字元數來呈現內容。 但是,長體字也不是沒有缺點,畢竟在漢字,尤其是筆畫數多的漢字,在縮小字寬後的辨視度、易讀性會比標準字寬的字體來的低。


中文長體字的使用在直排、字元數少的情境下效果最佳,以字元數少的情境,當字體家族具有標準與長體字的設計時,如標題、引言等都是長體適合發揮的舞台。使用同一種字體風格的長體字做排版,除了可以凸顯要點外,還可以維持整體風格的一致性;當長體字被獨立使用時,其長形字的特色容易被凸顯出來,用在獨立的標題更顯特色。



長體字型產品的開發,豐富且擴展了字體家族。
中文字型產品的字體家族(font family)大多以字重的粗細為基礎做字型產品的開發,相對於拉丁字的字體家族設計,除了字重以外,還有斜體(italic)、長體/窄體(condensed/ narrow)、寬體(extended)等設計,對應上就顯的單薄。在應用上,若設計案件選擇到具有condensed/ narrow設計的拉丁字,這時,往往找不到合適的中文字型產品做匹配。



自2017年開始,文鼎字型著手設計並發行具有規格化的長體字型產品,在字型設計時,即考量使用行為,為了讓設計師/使用者快速的從軟體的字型清單中找到長體字型,我們在字體名稱上做區隔,透過代碼即可辨視該字型是否為長體字。長體字型以代碼C做為表示,代碼後的數字表示在EM1000的規格下,字寬的比例,如「C80」表示為長體、字寬80%的字型。




目前,文鼎字型具有長體設計的字體家族有:文鼎UD晶熙黑體E1、文鼎方新書、文鼎書苑宋、文鼎白玉書體,詳細如下:(Variable Font:表示變數軸支援長體的變化)

字型名稱 字重 標準 C95 C90 C80 Variable Font
文鼎UD晶熙黑體 E1 MD
DB
BD
EB
HV
文鼎方新書 H7 MD
DB
BD
EB
HV
文鼎書苑宋 HKH32
文鼎書苑宋 HKH46
MD
DB
BD
EB
HV
文鼎白玉書體 H16 LT
MD
DB
BD
EB
HV
EH
DBL
BL
文鼎白玉書體 H32 MD
DB
BD

*○:可透過可變式字型(Variable Font)使用


長體字型產品圖例:






字重 標準 C95 C90 C80 Variable Font
文鼎UD晶熙黑體 E1 MD
DB
BD
EB
HV
文鼎方新書 H7 MD
DB
BD
EB
HV
文鼎書苑宋 HKH32
文鼎書苑宋 HKH46
MD
DB
BD
EB
HV
文鼎白玉書體 H16 LT
MD
DB
BD
EB
HV
EH
DBL
BL
文鼎白玉書體 H32 MD
DB
BD

 


長體字型產品圖例:






Products and Applications

在Word轉存pdf時,無法顯示粗體

使用Microsoft Word做文書編輯是日常中再正常不過的一件事,但是將文件編寫完成後,做樣式、段落的排版後,想要輸出PDF檔,卻遇到本來該加粗的文句卻無法顯示粗體的困擾嗎?

這樣的情況有幾個事件可以做探討:

  1. 使用Word提供的加粗功能是否合宜?
  2. 在Word編輯後,轉存PDF的方式?

下圖是Word工具列截圖的畫面,本文說明的重點在「B」這個圖示「將文字變成粗體」的功能。在Word中使用「B」圖示做文字加粗為Word軟體中提供的功能,但此加粗是透過程式計算的方式,將文字做粗體的顯示,嚴謹來說,相信字體設計師一定不喜歡這樣的加粗效果,但這樣的功能有其一定方便性與經濟性(不用特別再買一個粗體字來做粗體效果)



透過程式計算機制的字體加粗效果,其在字元架構的美觀性遠不如經過設計師微調筆畫空間後的成果,若在講究文字排版細節時,我們會建議選擇同字體家族較粗的字型來自為字體加粗效果的選項。以文鼎字型的字重單位為例,若是使用Medium字重做為內文排版,則加粗效果的字重建議為Bold,若是使用Demibold字重做為內文排版,則加粗效果的字重建議為Extrabold,也就是跳一個字重單位的方式來做使用。


回到本文的問題,若在Word文件編輯後,使用另存新檔,執行儲存PDF檔案的動作後,卻發現原本該有的文字加粗效果在PDF文件重無法呈現?這是哪裡出了問題呢?

這與Word軟體的以及字體產品工程的設定有關係,在字體產品工程的設定中,有一個「OS/2 table / WeightClass」的設定,當字體在這個欄位的設定值與Word不一致時,就會出現在轉存PDF無法顯示字體加粗的效果,此時,若有訂閱Adobe的使用者,使用「儲存為Adobe PDF」或「列印成PDF」一樣無法解決文字加粗效果無法呈現的問題。

這樣的情況,根本的問題解決方式為文章上方所建議,透過使用相同造型的字體家族,選用較粗的字重來排版,以徹底解決文字無法加粗的困擾,並達到加粗後的字體有最佳的顯示效果。



附註:
Microsoft 對於PDF加粗的回應:Bold font is not shown in pdf output from word
Adobe對於PDF加粗的回應:One of my fonts not in bold when making a PDF