New Knowledge

如果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長體
Products and Applications

長體

長久以來，大多數中文漢字數位字體的設計規格都侷限在正方形的方框中，從而產品化出結構方正的字體，然而，當遇到字元寬度無法在有限的寬度空間中做文字排版時，即延伸出「長體」的字體產品，用以縮減排版時整體的字元寬度。早期長體的設計，相對於正方形標準產品的設計規格，保持相同的字體高度，但縮小左右的水平空間，所形成長型的字體即稱為長體，相對於未變形前水平、垂直100%的比例，縮小左右10%比例的字體，稱為長一，縮小左右20%比例的字體，稱為長二…。

為什麼要使用長體字？
長體數位中文字型的數量相對來的少，在早期，由於軟、硬體環境的不成熟，長體字被設計在正方形的方框中，縮小後的左右水平空間以留白的樣貌呈現，在水平橫向排排版應用時，會形成字元間距過大的情況。隨著外部軟硬體技術的提升，新技術、新應用情境的發生，字體設計的彈性更加的廣泛，讓字體設計師的創意可以盡情的發揮。

如前述，規格上，長體是縮小左右比例後的字型產品，在應用上存在經濟效益，此經濟效益說明的是節省版面的空間，具有較窄字寬的長體字，能夠將更多的字元呈現在一行、標題、段落、區塊文字甚至是頁面中，具有在有限的排版空間上呈現較多字元數的特性，反之，在同樣的版面空間上，可以有較多的字元數來呈現內容。 但是，長體字也不是沒有缺點，畢竟在漢字，尤其是筆畫數多的漢字，在縮小字寬後的辨視度、易讀性會比標準字寬的字體來的低。


中文長體字的使用在直排、字元數少的情境下效果最佳，以字元數少的情境，當字體家族具有標準與長體字的設計時，如標題、引言等都是長體適合發揮的舞台。使用同一種字體風格的長體字做排版，除了可以凸顯要點外，還可以維持整體風格的一致性；當長體字被獨立使用時，其長形字的特色容易被凸顯出來，用在獨立的標題更顯特色。



長體字型產品的開發，豐富且擴展了字體家族。
中文字型產品的字體家族(font family)大多以字重的粗細為基礎做字型產品的開發，相對於拉丁字的字體家族設計，除了字重以外，還有斜體(italic)、長體/窄體(condensed/ narrow)、寬體(extended)等設計，對應上就顯的單薄。在應用上，若設計案件選擇到具有condensed/ narrow設計的拉丁字，這時，往往找不到合適的中文字型產品做匹配。



自2017年開始，文鼎字型著手設計並發行具有規格化的長體字型產品，在字型設計時，即考量使用行為，為了讓設計師/使用者快速的從軟體的字型清單中找到長體字型，我們在字體名稱上做區隔，透過代碼即可辨視該字型是否為長體字。長體字型以代碼C做為表示，代碼後的數字表示在EM1000的規格下，字寬的比例，如「C80」表示為長體、字寬80%的字型。




目前，文鼎字型具有長體設計的字體家族有：文鼎UD晶熙黑體E1、文鼎方新書、文鼎書苑宋、文鼎白玉書體，詳細如下：（Variable Font：表示變數軸支援長體的變化）

長久以來，大多數中文漢字數位字體的設計規格都侷限在正方形的方框中，從而產品化出結構方正的字體，然而，當遇到字元寬度無法在有限的寬度空間中做文字排版時，即延伸出「長體」的字體產品，用以縮減排版時整體的字元寬度。早期長體的設計，相對於正方形標準產品的設計規格，保持相同的字體高度，但縮小左右的水平空間，所形成長型的字體即稱為長體，相對於未變形前水平、垂直100%的比例，縮小左右10%比例的字體，稱為長一，縮小左右20%比例的字體，稱為長二…。

為什麼要使用長體字？
長體數位中文字型的數量相對來的少，在早期，由於軟、硬體環境的不成熟，長體字被設計在正方形的方框中，縮小後的左右水平空間以留白的樣貌呈現，在水平橫向排排版應用時，會形成字元間距過大的情況。隨著外部軟硬體技術的提升，新技術、新應用情境的發生，字體設計的彈性更加的廣泛，讓字體設計師的創意可以盡情的發揮。

如前述，規格上，長體是縮小左右比例後的字型產品，在應用上存在經濟效益，此經濟效益說明的是節省版面的空間，具有較窄字寬的長體字，能夠將更多的字元呈現在一行、標題、段落、區塊文字甚至是頁面中，具有在有限的排版空間上呈現較多字元數的特性，反之，在同樣的版面空間上，可以有較多的字元數來呈現內容。 但是，長體字也不是沒有缺點，畢竟在漢字，尤其是筆畫數多的漢字，在縮小字寬後的辨視度、易讀性會比標準字寬的字體來的低。


中文長體字的使用在直排、字元數少的情境下效果最佳，以字元數少的情境，當字體家族具有標準與長體字的設計時，如標題、引言等都是長體適合發揮的舞台。使用同一種字體風格的長體字做排版，除了可以凸顯要點外，還可以維持整體風格的一致性；當長體字被獨立使用時，其長形字的特色容易被凸顯出來，用在獨立的標題更顯特色。



長體字型產品的開發，豐富且擴展了字體家族。
中文字型產品的字體家族(font family)大多以字重的粗細為基礎做字型產品的開發，相對於拉丁字的字體家族設計，除了字重以外，還有斜體(italic)、長體/窄體(condensed/ narrow)、寬體(extended)等設計，對應上就顯的單薄。在應用上，若設計案件選擇到具有condensed/ narrow設計的拉丁字，這時，往往找不到合適的中文字型產品做匹配。



自2017年開始，文鼎字型著手設計並發行具有規格化的長體字型產品，在字型設計時，即考量使用行為，為了讓設計師/使用者快速的從軟體的字型清單中找到長體字型，我們在字體名稱上做區隔，透過代碼即可辨視該字型是否為長體字。長體字型以代碼C做為表示，代碼後的數字表示在EM1000的規格下，字寬的比例，如「C80」表示為長體、字寬80%的字型。




目前，文鼎字型具有長體設計的字體家族有：文鼎UD晶熙黑體E1、文鼎方新書、文鼎書苑宋、文鼎白玉書體，詳細如下：（Variable Font：表示變數軸支援長體的變化）

字型名稱 字重 標準 C95 C90 C80 Variable Font
文鼎UD晶熙黑體 E1 MD ● ○ ○ ● ●
DB ● ○ ○ ●
BD ● ○ ○ ●
EB ● ○ ○ ●
HV ● ○ ○ ●
文鼎方新書 H7 MD ● ● ● ● ●
DB ● ● ● ●
BD ● ● ● ●
EB ● ● ● ●
HV ● ● ● ●
文鼎書苑宋 HKH32
文鼎書苑宋 HKH46		 MD ● ○ ○ ● ●
DB ● ○ ○ ●
BD ● ○ ○ ●
EB ● ○ ○ ●
HV ● ○ ○ ●
文鼎白玉書體 H16 LT ✖ ✖ ● ✖ ●
MD ●
DB ●
BD ●
EB ●
HV ●
EH ●
DBL ●
BL ●
文鼎白玉書體 H32 MD ✖ ✖ ● ✖ ●
DB ●
BD ●

*○:可透過可變式字型(Variable Font)使用


長體字型產品圖例：






 字重 標準 C95 C90 C80 Variable Font
文鼎UD晶熙黑體 E1 MD ● ✖ ✖ ● ●
DB ● ●
BD ● ●
EB ● ●
HV ● ●
文鼎方新書 H7 MD ● ● ● ● ●
DB ● ● ● ●
BD ● ● ● ●
EB ● ● ● ●
HV ● ● ● ●
文鼎書苑宋 HKH32
文鼎書苑宋 HKH46		 MD ● ● ● ● ●
DB ● ● ● ●
BD ● ● ● ●
EB ● ● ● ●
HV ● ● ● ●
文鼎白玉書體 H16 LT ✖ ✖ ● ✖ ●
MD ●
DB ●
BD ●
EB ●
HV ●
EH ●
DBL ●
BL ●
文鼎白玉書體 H32 MD ✖ ✖ ● ✖ ●
DB ●
BD ●

 


長體字型產品圖例：






condensed 長體
Products and Applications如何將可變式字體使用於網頁上
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

 

VF Variable font 可變式字型
Products and ApplicationsiFontCloud實體卡開卡介紹
Products and Applications

iFontCloud實體卡開卡介紹

在” 如何合法取得文鼎字型”中有提到的實體卡，可能會有很多人好奇，甚麼是實體卡，又要去哪裡購買，文鼎雲字庫除了透過iFontCloud網站上購買外，也可以透過經銷商展碁的通路購買文鼎雲字庫實體卡來使用字型。

如果購買實體卡的用戶不太清楚要如何開啟，今天這篇小文章就來帶大家一起透過實體卡，來啟用字型服務方案。

 

Step1實體卡上，將序號刮出會取得一組序號

Step2 開啟瀏覽器連線治 序號啟用網址https://ifontcloud.com/index/arphic_card.jsp

Step3 輸入序號成功後，如果有帳號即可立即登入，如果不是會員可先建立帳號

Step4驗證成功後會跳出輸入授權對像填寫畫面，請填寫完畢送出

Step5完成授權對像填寫後，可下載安裝字庫管理工具

Step6 完成字庫管理工具安裝後，登入帳號密碼

Step7 登入後，可到”訂單資訊”查看您的訂單並點擊啟用，即可完成訂單啟用

Step8 可到”我的字體”在想套用的字型”點擊安裝”即可套用字型

照著以上的步驟，大家是否對實體卡有更進一步的了解，如果在操作上有問題，歡迎大家詢問，文鼎專業的客服團隊，會為您做詳盡的答覆。

 

實體卡 啟用