關於響應式網頁設計(RWD)

2019-04-18 17:12:48.21

分類: 字体产品与应用

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

文字排版在字體加粗的應用

在10年前,我們應該很難想到現在字體的使用,也會像聽音樂一樣,線上訂購、跨裝置、隨買隨用,目前,這樣的字體訂閱服務機制,可以讓使用者使用到大量的字體,而在選用字體的時後,各家服務機制都有提供簡易的篩選功能,使用者依據自身的需要,從上千套字體中快速的找到符合需求的字體造型來做使用。

 

在應用上,我們以幾個例子來演示字體加粗/粗體的使用建議。在Windows的使用環境中,文書處理的首選絕大多數想到應該是Microsoft Office系列的軟體,繪圖設計則是illustrator,這對於大多數的文書處理使用者、設計師來說,這絕對是一時之選。

 

但是,我們認為在這兩個軟體中,字體加粗的使用情境有一個可以增加字體閱讀舒視度的小方法,即是多字重、多橫筆粗度的字體應用彈性。下圖方框中的部分是Microsoft Word字體加粗的機制,一般來說,這是透過程式演算的機制產生出來的,對於中文漢字顯示效果的支援較差,在筆畫相對複雜的字元上,就會出現筆畫因空間過於接近而產生沾黏的現象,即便是專業的繪圖軟體illustrator,透過外框的機制也是呈現出不佳的視覺效果。

 

現在大部分的字體在開發設計時,多會以朝多字重的方向做規劃,這個情境下,就可發揮多字重字體的使用彈性了,以文鼎UD晶熙黑體為例,如果我們以Medium這個字重當作內文排版使用,那我們會建義需要做加粗的部分,可以往上跨一個粗度,即使用Bold作為加粗後字體呈現的選擇,以此類推,這是我們對於文鼎UD晶熙黑體在加粗屬性的建議,可以作為排版的使用參考。

另外,在明/宋體的造型上,我們以文鼎書苑宋Display字體家族做演示,字重相同為Heavy,文鼎書苑宋DisplayH16 Heavy的有著輕盈的視覺感受,如果我們需要一個加粗的效果,在Word使用Blod屬性或illustrator外框加粗,得到的都是一個暴力加粗的結果,如果我們嘗試選擇文鼎書苑宋DisplayH62 Heavy,我們依然得到一個加粗的效果,但與程式暴力加粗的效果對比,字體結構不至於變形,視覺感受也相對來的優雅起來。

多字重、多橫筆粗度字體家族的設計,能夠帶給設計師排版上的選用彈性,透過細膩的選用技巧,可以讓字體排版時不再受限於軟體的限制。

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