如何在iPhone、iPad使用文鼎字型運用於工作或娛樂
如果有將iPhone或iPad系統更新至16.2以上版本的使用者,會發現多了一個名為「無邊記」的APP。這是APPLE所推出跨 iOS、iPadOS 和 macOS的軟體,協助使用者在個人記事或是團隊合作而設計的白板功能,讓使用者能更方便與他人共用、編輯畫布內容。除了自由畫圖筆記外,關於文字的部分,使用者透過點擊App畫面底部「新增文字」的方式,畫面出現的文字方塊可自由縮放文字的大小,也能更改文字的顏色/字型/尺寸。
我們今天要介紹的是如何透過Fonts Fun-字字不倦、iFontCloud文鼎雲字庫這兩個App,讓使用者可以在「無邊記」上使用到文鼎字型。
Fonts Fun-字字不倦
1.在 App Store上搜尋並下載「Fonts Fun」
2.開啟Fonts Fun App後,您可在Fonts Fun App中預覽文鼎字體,裡面精選了 3個不同特色的方案,您可以依照您的喜好、個人應用需求,訂閱字體包安裝使用。另外也提供了一個免費字體方案包,當中包含了繁\簡體9套字型。
3.以免費字體包為例,在App下方「Aa字體」的頁面中,使用者可以看到9款免費字型,我們以文鼎花草體為例,滑動右方開關,呈現綠色狀態即表示字型已被啟用,且掛載到系統上,可以進行使用。如果想要進一步確認,可以在iOS系統的『設定』>『一般』>『字體』中看到已安裝的字體名稱。
4.接下來就可以在Fonts Fun App或無邊際上使用到已經啟用的字型。
iFontCloud 文鼎雲字庫 (iFontCloud for iOS, iPadOS)
1.App Store上搜尋並下載「iFontCloud 文鼎雲字庫」
2.開啟iFontCloud 文鼎雲字庫 App後,您可在App中預覽文鼎字體,以及同步使用到於iFontCloud租賃服務所訂購的字型產品。使用者可以透過位於App的左上方的「篩選」功能挑選合適的字型產品。
3.以文鼎DC云康行楷為例,滑動右方開關,呈現綠色狀態即表示字型已被啟用,且掛載到系統上,可以進行使用。如果想要進一步確認,可以在iOS系統的『設定』>『一般』>『字體』中看到已安裝的字體名稱。
透過上方簡單的介紹,讓使用者可以理解如何在iPhone、iPad上使用文鼎字型並運用於工作或娛樂上。除了「無邊際」以外,現在從Apple Store下載的App,只要開發者有使用Apple新的Font API進行開發,就可以透過Fonts Fun或iFontCloud for iOS使用到文鼎字型。
如何將可變式字體使用於網頁上
時間在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
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 |
如需更詳細內容,可參考標準版授權書、進階版授權書範本