如何呈現國字〇

2021-05-04 10:41:36.0

分類: 字體產品與應用

在使用輸入法輸出中文字時,你的零是以怎樣的面貌呈現呢?是寫成國字「零」,還是「〇」、「O」、「○」、「0」或是寫「0」?在windows作業系統的環境裡,「零」、「O」或「0」使用任何輸入法都可以打出來,但是「〇」用一般系統內建的輸入法像是注音、新注音、倉頡是找不到的,如果您有額外安裝的輸入法,如自然輸入法,鍵入零這個字,則可以透過選單找到「〇」。

上面舉例的這些字元造型都長的很相近,每一個字元在Unicode字碼的定義裡都有一組數字來代表自己,這組數字一般通稱為字碼,這幾個字碼及其代表的意思分別如下:

零:U+96F6,中文漢字零。

0:U+FF10,全形數字零。

○:U+25CB,空心圓圈,幾何圖形。

〇:U+3007,國字零,中日韓符號和標點。

0:U+0030,數字零,屬於基本拉丁字母。

O:U+004F,拉丁大寫字母O,屬於基本拉丁字母。

 

這些造型相似的字元在使用上會有怎樣的差異,下圖我們以微軟正黑以及文鼎UD晶熙黑體做舉例,在使用國字顯示西元年時,我們可以看到使用 U+3007「〇」字元有最佳的排版效果,除了U+3007這個字元本身就是為了與國字一起使用外,以晶熙黑體為例,還會因應字體造型、字重做最佳化的設計。

字碼對於大部份人來說很陌生,而且並不是每個軟體都支援字碼輸入,在word使用微軟注音輸入法時,透過輸入鍵盤上左上位置的「`」這個符號,就可以輸入字碼,輸入「~」會產生一個黃色的小視窗,此時輸入「U3007」按空格就可產出「〇」,要特別注意的是數字不能用鍵盤右方的小鍵盤輸入,一定要用英文上方的數字輸入才行。

如果在繪圖軟體,如Adobe illustrator裡,我們可以透過「字符」工具面版來找到「U+3007,〇」這個字元,或者是用前面word輸入的教學方式,在word中將「〇」呼叫出來,再複製到Adobe illustrator中做使用。

 

分享一個可以快速打出「〇」的方法,讓你不用再花時間找方法要怎麼打出這個字。

1. 開啟瀏覽器到google翻譯的頁面:https://translate.google.com/?hl=zh-TW

2. 選擇中文,會看到右下角顯示「注」,點選下拉選單,選擇「簡體中文(中國)-手寫」

3. 選好後就會出現手寫的輸入框,直接用滑鼠在上面寫「〇」

4. 寫好後就會顯示和「〇」相似的字,選擇紅框即會產出「〇」 

這個方法是不是很簡單,快來試試看吧!


字體產品與應用

好看的中文字體哪裡找? Fonts Fun–字字不倦 App

讓你的 IG 限時動態與眾不同!!!Fonts Fun App 有60種精選的中文字體,可以讓你在社群軟體、筆記、或是簡報製作上都有更多元的字型盡情的創作!

 

Link: 

https://agirls.aotter.net/post/59343

 

字體產品與應用

如何將可變式字體使用於網頁上

時間在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

 

字體產品與應用

輸入內碼也可以打出你想要的字

能夠代表一個人的稱謂有很多種,有本名、小名、綽號,還有獨一無二的身分證字號,在輸入法中,好比「林」這個字,注音輸入法輸入「ㄌㄧㄣˊ」,倉頡輸入法輸入「木+木」可以找到他,這就好比稱謂一樣,以不同的方式可以叫出不同的字碼,內碼輸入法也是其中一種,而且就是像身分證字號那樣,是一種獨一無二的,在標準字中,一個字碼就代表一個字,如果今天我們得知這個字碼Unicode碼位,但不知道他的念法或倉頡,就可以用這個小技巧。

以「林」這個字為例,開啟電腦的微軟注音或微軟倉頡,輸入「` 」+「U」+「6797」,輸入完字碼點選空白鍵輸出,就可以打出這個字碼所代表的字,這邊需要小提醒,這邊輸入的數字需要點選左邊上排的數字鍵,如果輸入右邊數字鍵盤,是沒有反應的喔~以「林」這個字為例,開啟電腦的微軟注音或微軟倉頡,輸入「` 」+「U」+「6797」,輸入完字碼點選空白鍵輸出,就可以打出這個字碼所代表的字,這邊需要小提醒,這邊輸入的數字需要點選左邊上排的數字鍵,如果輸入右邊數字鍵盤,是沒有反應的喔~

My alt text

 

 

同場加映,如果今天想要知道一個字的字碼怎麼辦,我們只需要開啟Word,在上面鍵入您想知道字碼的字,例如「林」這個字,輸入完後直接點選鍵盤的Alt+X,這個字就會轉換成Unicode的字碼「6797」。