Emoji图释in文鼎DC曼蒂手書體

2022-12-02 15:04:28.0

分類: 字体产品与应用

2021年,文鼎字型与插画家Mandie合作,将Mandie亲笔书写的手写字开发成数字中文字体。Mandie自己平时一直保持着手写的习惯,希望藉由数字化后的字体产品,让大家在取得计算机打字方便性的同时,也能够重温手写字体的情感,让更多人记得手写字体的温度,回味一笔一画写字的时光。

文鼎字型自2015年开始开发文鼎DC陈森田MORITA、文鼎DC香蕉人体、文鼎DC云康钢笔行楷、文鼎DC蔡燊轩行书体,这类型的字体强调具有个人风格、个性化,近年在台湾市场能见度逐渐提高,应用在印刷、屏幕显示、手机接口上都有别于传统印刷字体的感受体验。

文鼎DC曼蒂手书体除了将Mandie的手书风格记录在字体中,另外还有一个小彩蛋:特别企划商请Mandie绘制了三百多个图释(emoji),让Mandie具有特色的手绘融入字体中。

要如何使用文鼎DC曼蒂手书体的图释呢? 我们以Adobe illustrator为例,当字符选择文鼎DC曼蒂手书体时,开启「字符」面板,滑动面板右方的拉杆,看到图释点选即可。需要注意的是在字符面板共有两个区块呈现这三百多个图释,这两者的差别在于当符号用于横排、直排的位置。



对于图释的开发,文鼎的设计师也不马虎,对于符号单独使用在横排、直排以及符号与汉字一起使用时,在横排、直排的排版效果都有加以优化的调整与设计。



在Adobe illustrator另外一个使用图释的方式是透过替换字符的机制做选用,在这个情境中,图释已经输入完成,将鼠标移至该图释上出现的替换字符,呈现的候选符号为上述为直排情境设计的字符。



近年来在Apple

2021年,文鼎字型與插畫家Mandie合作,將Mandie親筆書寫的手寫字開發成數位中文字體。Mandie自己平時一直保持著手寫的習慣,希望藉由數位化後的字體產品,讓大家在取得電腦打字方便性的同時,也能夠重溫手寫字體的情感,讓更多人記得手寫字體的溫度,回味一筆一畫寫字的時光。

文鼎字型自2015年開始開發文鼎DC陳森田MORITA、文鼎DC香蕉人體、文鼎DC云康鋼筆行楷、文鼎DC蔡燊軒行書體,這類型的字體強調具有個人風格、個性化,近年在台灣市場能見度逐漸提高,應用在印刷、螢幕顯示、手機介面上都有別於傳統印刷字體的感受體驗。

文鼎DC曼蒂手書體除了將Mandie的手書風格記錄在字體中,另外還有一個小彩蛋:特別企劃商請Mandie繪製了三百多個表情符號(emoji),讓Mandie具有特色的手繪融入字體中。

要如何使用文鼎DC曼蒂手書體的表情符號呢? 我們以Adobe illustrator為例,當字元選擇文鼎DC曼蒂手書體時,開啟「字符」面板,滑動面板右方的拉桿,看到表情符號點選即可。需要注意的是在字符面板共有兩個區塊呈現這三百多個表情符號,這兩者的差別在於當符號用於橫排、直排的位置。



對於表情符號的開發,文鼎的設計師也不馬虎,對於符號單獨使用在橫排、直排以及符號與漢字一起使用時,在橫排、直排的排版效果都有加以最佳化的調整與設計。



在Adobe illustrator另外一個使用表情符號的方式是透過替換字符的機制做選用,在這個情境中,表情符號已經輸入完成,將滑鼠移至該表情符號上出現的替換字符,呈現的候選符號為上述為直排情境設計的字元。



近年來在Apple、Microsoft等系統廠商開發支援表情符號的作業系統、軟體後,表情符號在使用上的門檻降低了許多,有興趣的使用者可以在Mac、Windows上試試以下快捷鍵,呼叫出可輸入表情符號的小鍵盤、視窗來使用:
Mac作業系統:Control+Command+空白鍵
Windows作業系統:Windows(視窗鍵) + . (句點)或Windows(視窗鍵) + ; (分號)

但要請使用者注意,現階段有支援表情符號的軟體有限,以Windows為例,同樣是office 356中的Word、Excel、Powerpoint,輸入表情符號後呈現的行為也會有異,這樣的情形有待軟體開發商的支援,以讓表情符號有一個友善的使用環境。

文鼎DC曼蒂手書體
字體應用及用途:書刊標題、影片/電影標題、食品包裝、生活感的廣告標語、電子書信書寫等。

Microsoft等系统厂商开发支持图释的操作系统、软件后,图释在使用上的门坎降低了许多,有兴趣的使用者可以在Mac, Windows上试试以下快捷键,呼叫出可输入图释的小键盘、窗口来使用:
Mac操作系统:Control+Command+空格键
Windows操作系统:Windows(窗口键) + . (句点)或Windows(窗口键) + ; (分号)

但要请使用者注意,现阶段有支持图释的软件有限,以windows为例,同样是office 356中的word、excel、powerpoint,输入图释后呈现的行为也会有异,这样的情形有待软件开发商的支持,以让图释有一个友善的使用环境。

文鼎DC曼蒂手書體
字体应用及用途:书刊标题、影片/电影标题、食品包装、生活感的广告标语、电子书信书写等。


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