如何快速在軟體中找尋文鼎字型?

2021-08-17 09:05:48.0

分類: Products and Applications

電腦安裝太多字型,每次都要花很多時間從頭開始,卻還是找不到要使用的字型,令人覺得頭痛,再加上不同軟體讀取字型名稱的方式不同,有時候明明安裝中文字型,但是字型清單顯示的卻是英文字型名稱。

 

以下我們以在台灣使用繁體中文介面的Windows作業系統說明如何在軟體中找到文鼎字型。

文鼎字型的中文名稱大多以「文鼎」這兩個字開頭做顯示,英文則是「AR」,在iFontCloud文鼎雲字庫網頁或iFontCloud字庫管理工具中有提供字型的中文和英文名稱,讓您清楚知道字型的名稱,搜尋字型更容易。

常用的Office 軟體,如:Windows 2013 word、Excel和PowerPoint,在顯示字型的下拉選單中,輸入字型名稱的第一個字「文」或「AR」即可快速到達相同名稱字型的位置,此時點開下拉選單就能更換為其他字型。這裡有一個字型語言及作業系統語言的變數要注意一下,一般來說,繁體中文字型名稱大多為中文顯示,而簡體中文的字型名稱則為英文;如果作業系統是是Windows簡體中文版,則規則相反,繁體中文的字型名稱以英文顯示,簡體中文字型名稱則是中文。

而設計師常用的Adobe系列軟體,在Photoshop、Illustrator中,繁體或簡體字型的字型名稱都是用中文顯示。在字元視窗中,輸入任一字型的名稱關鍵字後,Adobe的字型運算機制即會將該關鍵字相關的字型列出,這樣就加快了使用者找字的效率。倒是要特別題一下,在InDesign裡,若在繁體中文的作業環境,簡體中文字型是以英文的字體名稱做顯示。

從上方簡要的說明,我們可以這樣說,在字型公司的字型工程做業端要兼顧到字型使用的各個環節,確保在任何環境上字型產品都能被正確的顯示與使用到,這確實是一件專業的工作,也是整體造字工藝中重要的一環。


Products and Applications

文鼎UD晶熙黑體的拉丁造型搭配

中文字體與日文字體同樣都有漢字、拉丁與假名,如果有留意日文字型產品,會發現日文字型同樣的一個字體家族,但有著不同假名、拉丁的造型設計做搭配。

文鼎UD晶熙黑體開發之初也規劃有這樣的設計,亦即晶熙黑體在拉丁的造型上,共有三種造型可供設計師選用,以繁體中文為例,字體名稱分別是:

1. 文鼎UD晶熙黑體HK

2. 文鼎UD晶熙黑體E1HK

3. 文鼎UD晶熙黑體AktivBHK

這三款字型的拉丁造型可以追溯回到原始的拉丁字,分別是AR Dori Sans、AR NewHebe Sans、Aktiv Grotesk;AR Dori Sans、AR NewHebe Sans是文鼎字型近年來在拉丁字設計的代表作之一,除了文鼎內部的字體設計師參與設計開發外,也力邀位於美國波士頓Font Bureau字體公司的總監David Berlow協助設計指導、監修;兩款原生拉丁字皆有自 Light-Ultrablack 9個字重,在與晶熙黑體漢字12個字重搭配時,設計師重新給予字重的設定,細修曲線、調整架構再加入必要的視覺修正,字重擴充至極細的Hair到極粗的Ultrablack(E1版),再依據視覺灰度給予最佳的寬度比例,讓中文漢字、拉丁字搭配出最佳的整體視覺效果。

 

拉丁符號的設計通常會有因應造型、字重而做視覺校正的處理,目的是為了排版上的美觀、舒適性而做。以AR Dori Sans /文鼎UD晶熙黑體HK的符號為例,在數字1和4就有在不同的字重上做視覺校正,經過視覺校正的字型有字高(Font Height)的不同,但隨著字重(Weight)加粗,數字1、4、6將差距會縮小。

文鼎UD晶熙黑體,拉丁以AR Dori Sans做搭配,整體呈現出幾何、工程、現代的氛圍,具有Medium-Heavy共五個最常使用的字重,適合在數位顯示環境下使用,在中文顯示各分句之間停頓的逗號(U+FF0C),設計師簡化漢字逗號的造型,在這裡嘗試著做大膽的簡化設計,閱讀時營造出簡潔時尚的視覺感受。

    文鼎UD晶熙黑體HK排版展示

 

                                                                                       嘉義美術館以文鼎UD晶熙黑體HK做為指示標識用字/角白設計

 

文鼎UD晶熙黑體E1HK,拉丁以AR New Hebe Sans做搭配,整體呈現出經典、傳統、雋永的氛圍,適合使用在書籍排印完整產品共有12個字重可供選用。

                                                                                                                                      文鼎UD晶熙黑體E1HK排版展示

 

文鼎UD晶熙黑體AktivBHK,是晶熙黑體的漢字與英國合作夥伴Dalton Maag 公司的Aktiv Grotesk 進行搭配後的字型產品,共有繁體中文+香港字符集、簡體中文、日文三個語言,每個語言各四有個字重,旨在將晶熙黑體的簡潔與AktivGrotesk乾淨利落加以整合,感受上均勻平穩,視覺連貫而有當代感。文鼎UD晶熙黑體AktivBHK獲得國泰航空選用做企業字型。

                                                                                  TPOGRAPHY 字誌 選用文鼎UD晶熙黑體AktivBHK做為內文用字

 

搭配著不同拉丁造型的晶熙黑體產品,這樣的整合設計罕見於中文字體上,讓設計師們在字體使用時,多了不同設計情境字體選用上的彈性。

Products and Applications

哪些系統、瀏覽器和軟體支援可變式字型(Variable Fonts)?

可變式字型(Variable Fonts)是OpenType字體格式的一種,從2016年發佈至今,與以往的字型檔案的使用經驗不同,只需安裝一個可變式字型(Variable Fonts)檔案,即可使用該字型定義的可變屬性,如字重(weight)、寬度(width)、傾斜(slant, italic)、光學尺寸視覺調整(Optical size)等,變化出一套完整系列字體,不再需要安裝10幾個字型檔案,大幅減少安裝字型套數且有效降低字型檔案大小。

 

可變式字型(Variable Fonts)讓設計師的設計帶來更多的變化,透過彈性的微調字型細部參數,打造出專屬的字型樣式,讓作品更具有視覺吸引力。

 

可變式字型(Variable Fonts)使用需要在支援可變式字型(Variable Fonts)的作業系統與軟體中使用。以下列出各作業系統、瀏覽器和軟體最低支援版本。

 

作業系統

作業系統顯示可變式字型(Variable Fonts)是用字重加樣式方式呈現

作業版本 最低支援版本
Windows 10 1709
macOS 10.13

 

瀏覽器

瀏覽器支援顯示可變式字型(Variable Fonts)的變軸設定(Weight、Width、Italic、Slant、Optical Size),如何將可變式字體使用於網頁上可參考下方應用新知連結中的文章https://ifontcloud.com/index/newknowledge_detail.jsp?id=89

瀏覽器 最低支援版本
Chrome 66
FireFox 62
Safari 11
Edge 17
Opera 53
IE 不支援

 

手機瀏覽器 最低支援版本
iOS Safari 11(需使用iOS11)
Android Chrome 93(需使用Android OreoAPI version 26)
Android Firefox 92(需使用Android OreoAPI version 26)

 

 

軟體

可以利用可變式字型檔案量小,但透過變數軸的調整,為您的作品提供更多的字體面貌。

軟體 最低支援版本
Adobe Illustrator CC 2018 (201710)
Adobe Photoshop CC 2018 (201710)
Adobe InDesign CC 2020(201911)
Sketch
59
Microsoft Word
Office 365
Apple Pages
11.1
Apple Keynote
11.1
Apple Numbers 11.1

 

部分軟體如MS Office 365 Word、Apple Keynote,未完全支援可變式字型的使用,但是使用者仍可使用到可變式字型預設的字型實例,如下圖

 

Windows Office 365 Word

 

Mac Office 365 Word

 

Apple Keynote

 

 

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