如果IG限時動態可以換中文的話?

2019-05-21 09:55:35.043

分類: Products and Applications

「2018年10月24日,派傑投資公司最新調查顯示,美國85%青少年每月登入一次 Instagram,首度超越Snapchat的84%」 ─摘自Wikipedia

社群網絡早已滲透在你我的生活中,如同精神食糧般紮根在生活日常。相信大家對Instagram的現實動態功能一點都不陌生吧?24小時就會消失,要是喜歡的人發文沒看到就會覺得搥心肝😢(小心肝~。

 

英文字有多個選擇,中文字選擇好像不多?

發圖不附文,此風不可長!拍了美美圖片再點綴幾句金玉良言,圖文並茂就是好棒棒!不過大家有沒有發現,IG裡面的英文字型有多達五款字型可以選擇,但...中文字型除了系統字之外,就沒有別的選擇了...😱。

 

如果有不同中文字型選擇

由於我們都知道目前中文字的選擇只有一種,那如果選項變多了?可以帶來什麼樣的視覺感受呢?(圖例用字為文鼎字型)

是不是覺得有換有差😁?(在此感謝辦公室夥伴圖片支援),中文字不同帶來的視覺感受也不一樣,如果可以有更多不同的造型搭配更能豐富貼文給人的印象!

 

中文英文配一配

IG提供了5款不同造型英文字,如果說搭配時可以搭配上類似風格的中文字,在視覺上會不會更順眼呢?

以這款IG顯示「現代感」的英文字為例,最大的兩個特色為:筆畫收尾處導圓角;整體視覺比例瘦長。因此搭配中文字時就要考量到這兩個特色,文鼎公司現有字體產品裡,沒有完全符合的中文造型可以搭配。不過現在有了「Variable Font」這項新技術,小編巧手一弄,將晶熙黑體轉了圓角、瘦身一下....

一款可以搭配現代感的新字型就誕生了!可能很多人還沒聽過Variable Font,沒關係,下一篇我們就介紹Variable Font給大家認識!!

其他字型可以怎麼搭配:

字型搭配是一門學問,上面四款IG的現有英文字,小編先用文鼎現有的字型產品或Variable Font搭配,大致做到60分的標準,但仔細下去評估,例如:字體傾斜的角度在視覺上有沒有一致?手寫字筆畫有沒有更接近的筆感特徵?等...,要做到特徵完全吻合,必須要字體設計師評估,特別為這款字量身打造一套搭配的中文字型。不過這樣的搭配是非常費工一件事,除了評估、造型搭配外,設計師還要一字一筆慢慢製作等...,細節很多一項大工程,之後也會寫一篇字型搭配的文章,到時候我們再好好介紹字體搭配的流程吧!

 

上述總結

不管什麼原因,每天都要滑個手機看看IG。如果在中文字型可以增加新的中文字型,想必是可以帶來嶄新的視覺感受!最後就讓我們像IG許願,大神大神!造福廣大中文語系用戶吧!有什麼想法想要討論,都可以在下方留言回覆我們。那我們就期待下篇文章吧!


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

 

Products and Applications

「iFontCloud」APP介紹

文鼎推出「iFontCloud」APP在iPad和iPhone,APP內有多種豐富繁中與簡體類型的字體讓用戶安裝。「iFontCloud」APP共有320套字體,包含文鼎經典字體「晶熙黑體」完整12套字重和「方新書」字體系列,以及最受歡迎外部設計師的字體─陳森田和香蕉人字體,與最常使用的明體、黑體和圓體,除此之外,還有書苑宋、黃陽尖魏體、云康行楷、清圓體……等字體,讓您在iPad和iPhone用字體製作更精美的作品!

已在iFontCloud購買方案包或單套字的會員,只要字體有在「iFontCloud」APP中且訂單在授權期間內,即可在一台iPad或一台iPhone上免費安裝使用字體。

文鼎提供所有會員4套免費字體使用

  • 文鼎上海宋體_L
  • 文鼎楷體_M
  • 文鼎上海宋_L
  • 文鼎中楷体

在「iFontCloud」APP安裝完成字體後,即可開啟有支援custom fonts的APP,像是Pages、Keynote、Adobe Photoshop等APP使用字型。

規格
系統:iPhone 、iPad iOS 13及以上系統
支援安裝custom fonts的APP

  • Pages
  • Keynote
  • Numbers
  • Draft
  • Notebook
  • Noteshelf
  • GoodNotes
  • Adobe Photoshop
  • Adobe illustrator
  • Clip Studio Paint

字體清單:https://ifontcloud.com/index/plan_fontList.jsp#!?package_id=9920200814043308

Products and Applications

字體為什麼會缺字?

使用字體碰到缺字的原因有很多,最主要原因是字體使用的字集,其次與輸入法有關。

繁體中文在開發時最常使用的字體規格為Big5-2003(大五碼),共收錄13,060個漢字。有1萬多漢字怎麼還會缺字?原因是有些一般生活常用字並沒有收錄在其中,像是塵蟎的「蟎」、擀麵的「擀」等文字。因此形成使用Big5字集開發的字體在編排文件出現缺字的情形。

為了降低使用者用字缺字的機率,文鼎字型以現有Big5-2003字集規格為基礎,參考教育部字頻總表、中研院現代漢語語料庫詞頻統計、網路流行用字以及行銷與客戶服務所累積的資訊,彙整389個漢字,整合成Big5_AR 2021規格,自2021年以後皆以此規格進行新字體產品的開發,早期熱銷、經典的字體亦規劃補字更新,使用者可以透過iFontCloud獲得最新版本的字體使用。(完整的介紹請參考:消除繁體中文缺字的困擾)

再來談到輸入法。
可以打出漢字的中文輸入法有很多種,每種輸入法形成漢字的方式不大相同,一般常見為注音輸入法和漢語拼音輸入法。



如果不是使用注音輸入法或漢語拼音輸入法,有些字符的漢字與部首外型長得一樣,但是實際上分屬於不同的Unicode碼位,就會形成透過輸入法顯示出來的文字誤植成部首字也渾然不知,誤以為是字體缺字。以字符「日」為例,「日」漢字的Unicode碼位是U+65E5,是定義在中日韓統一表意文字(CJK Unified Ideographs)中,另外有一個與其形狀幾乎一樣的「日」,是位於康熙部首字區(Kangxi Radicals)的部首字,它的Unicode碼為是U+2F47,U+2F47其為Unicode於 Unicode 3.0 根據康熙字典的214 個部首按序編排,位於 U+2F00 - U+2FD5當中的一個字元。此區段的字符是用於表示部首使用,不是中日韓統一表意文字區段內的漢字,而繁體中文使用的Big5-2003的規格並沒有完整收錄這些部首字的字符,在這樣的情況下,如果使用標準Big5-2003字集的字體,在輸入U+65E5國字的「日」能夠顯示套用的字體,但是打成U+2F47部首字的「日」則可能會顯示缺字的狀況。

下次碰到字體缺字的狀況別驚慌,先確認字符是否為漢字以及字體使用的字集就能解決大部分的問題囉!