「iFontCloud」APP操作解說

2021-01-11 15:22:14.0

分類: Products and Applications iPadOS iOS custom font

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

時間在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. 準備好小篇幅文章，設定於網頁內

例如文字為『文鼎晶熙黑』，將文字用分別組合起來並放入網頁內今 晚 我 想 來點

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

VF Variable font 可變式字型

Products and Applications

如何呈現國字〇

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

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

零：U+96F6，中文漢字零。

０：U+FF10，全形數字零。

○：U+25CB，空心圓圈，幾何圖形。

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

0：U+0030，數字零，屬於基本拉丁字母。

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

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

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