[文鼎 IN-HOUSE]感恩購物節❤️

2024-11-27 00:00:00.0

分類: Products and Applications



用心織就每個感恩時刻,於字裡行間刻畫溫暖,在這個充滿暖意的季節裡,以真誠傳達專屬於你的感謝與驚喜。

本期內容圍繞「感恩節」以及「購物」為主題,提供字體應用上的參考。


Products and Applications

可變式字型variable font在設計上的應用,以明/宋體為例

可變式字型(variable font) 發佈於2016年,發佈至今,我們觀察到許多字型設計公司逐漸地發布自家的可變式字型,經過這幾年的推廣,最近我們從問卷調查上發現國內的設計師對這樣的產品仍然感到陌生,今天,我們藉由幾個演示,再一次讓大家認識可變式字型。

 

可變式字型的特色在於可隨使用者的設定或是依應用程式的自動判斷,變化出將近無限種的字體屬性組合。只需要一個字型檔案,就可以無間段調整該字型提供的字重、字寬或對比等可變屬性,讓設計師用字的創意不再受侷限,同時也減少了龐大字體家族所需要的大量記憶體空間。

 

不知道大家有沒有思考過一個問題,字體設計師都是在60公分距離前的螢幕做字體設計,使用時,有可能近到20公分,遠則超過5公尺以在使用的字體,這樣的應用情境,字體的設計如果都一樣,合理嗎?設計師如果在用字的時後,思考到這樣層次的問題,有沒有產品可以上設計師挑選使用呢?

 

通常在進行字型開發前先會決定使用目的,而在選用字型時,會依情境來選用造型,在使用明/宋體這類的字型時,通常橫向筆畫的粗細是固定的,在可變式字型裡,可以將橫向粗細的變化設計在可變式字型的變化軸上,使用者除了傳統的字重外,還可以使用到橫向筆畫(對比/Contrast)變化軸的調整。下方以文鼎書苑宋體書苑宋作為舉例,因應複雜化的使用情境,書苑宋設計了四個橫筆粗細的產品,為橫筆寬度16(EM Square =1000 ) 到62 的響應式設計,使用者可依據使用配方建議,從內文到標題,從紙本到屏幕,因應不同情境選取適當字型使用。

 

有個多個橫筆粗細對比這樣的產品,我們思考一下,如果在設計這樣的指示標示,怎麼樣可以讓閱讀訊息用的字體在畫面上呈現的更好呢?畫面上『南京三民站』這幾個字分別使用思源宋體(上)與文鼎書苑宋體(下)做展示,我們可以看到這五個字元筆畫數並不算多,但『三』這個字的筆畫相對起來特別少,整體看起來視覺灰度少了一級。

這時候如果我們要對他加粗,通常的作法就是在AI裡轉外框,加筆畫,但這樣一來,字就變成圖,不是字了,會增加後續版本維護的困擾。使用書苑宋可變式字型的微調後的成果,我們來看看調整前後的差別,經過適當的調整後,每個字元的視覺量感變得更平均了。

我們認為,設計師寶貴的時間應該要用在設計思考上,如果字體可以協助設計師解決問題,節省設計師的時間,那就是我們對設計產業的幫助。關於更多可變字型的資訊可參閱下方文鼎iFontCloud雲字庫的展示說明

https://ifontcloud.com/index/variablefont.jsp

Products and Applications

融入校園的iFontCloud教育授權

文鼎iFontCloud為學生、學校單位規劃了多樣的字體租賃服務方案,涵蓋同學個人使用、國中小、高中職大專院校、學校教職員等不同角色與組織的授權方案。

專屬學生以教育學習為目的的方案
身為學生的你,在用字上有沒有這些困擾呢?除了系統內建字體外,沒有其他來源可以選用字體,或是使用到來路不明的字體,無形的誤觸著作財產權的爭議,想要使用新世代的字體,費用上卻無力負擔呢?文鼎字型從教育的視角切入,在iFontCloud平台上提供了繁中多元學習包(學生)(年)美感學習包(學生)(年)等兩個方案,期望對於著作權的尊重、透過合法途徑使用正版字型、使用者付費的觀念從校園學生時期開始養成。學生們於就學期間可以合法的以學習為目的使用這兩個方案的字型於報告、作業、佈置等用途,藉由字體的運用豐富的作品的樣貌。


iFontCloud學生教育方案的購買者、使用者必須具有學生的身份,購買時可以先準備以下資訊申請教育身分的認證:

  1. 在學學生證正反面(需蓋上當期註冊學年章,如未蓋章則不具效力證明)
  2. 在學證明

在註冊iFontCloud會員後,並將上述證明文件擇一上傳至ifontcloud@arphic.com.tw信箱,待客服人員審核通過後,即可以學生身分購買學生方案。

學生在使用學生方案的同時要注意,本服務是以提供學生學習使用為主要目的,使用iFontCloud期間所產出的文件、作品皆不得有銷售等營利的行為喔。

△: 學生版注意事項
學生版以學生個人學習為目的,使用本服務,本服務及產出物不得用以營利或銷售,詳細請見授權書內容。

以教育學習或教學為目的的方案
文鼎iFontCloud字型產品有上架到教育部補助各縣市及學校「推動中小學數位學習精進計畫-數位內容與教學軟體」的計畫中,教職員或學校採購單位可依教學需求自行評估採購,現況共有以下方案上架:

  1. 文鼎iFontCloud雲字庫 繁中旗艦包 教育版
  2. 文鼎iFontCloud雲字庫 繁中旗艦包 進階版(一人授權一年)
  3. 文鼎iFontCloud雲字庫 繁中旗艦包 標準版(一人授權一年)
  4. 文鼎iFontCloud雲字庫 文鼎繁中DC風格包(一人授權一年)

此外,如果您符合政府機關或公立學校等資格,有以下幾個方案可以選購,詳情請參考政府電子採購網 政府電子採購網,也可致電文鼎字型團隊,為您做更詳細的介紹:

  1. 文鼎iFontCloud雲字庫 文鼎繁中DC風格包(一人授權一年)
  2. 文鼎iFontCloud雲字庫 繁中旗艦包 教育版(全校授權一年,國小/國中/高中職,使用人數450以內)
  3. 文鼎iFontCloud雲字庫 繁中旗艦包 教育版(全校授權兩年,國小/國中/高中職,使用人數450以內)
  4. 文鼎iFontCloud雲字庫 繁中旗艦包 教育版(行政人員授權兩年,使用人數15以內)
  5. 文鼎iFontCloud雲字庫 繁中旗艦包 標準版(一人授權一年)

上述的方案都可以引領莘莘學子、學校單位、教師以較實惠的價格使用到iFontCloud雲字庫的服務,期盼透過正確管道尋求合法使用授權的觀念從學習生涯養成,讓字型的美從小校園渲染到大社會,透過iFontCloud服務讓設計美學融入每個人的日常。

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