1 of 108

字體設計與文字編碼

HW01 - 字元編碼

國立臺北科技大學資訊工程系

2 of 108

「瀨戶字體」大家族

P.2

3 of 108

瀨戶字體（瀬戸フォント）

SetoFont

01

章節 01

4 of 108

瀨戶字體

  • （瀬戸フォント，SetoFont）
  • 是一位日本業餘設計師製作的日文字型，本身字體相當可愛活潑，除了收錄日文還包含常用漢字、平片假名，支援部分繁體中文和簡體中文，不過在中文使用時會有缺字或空白問題。
  • http://setofont.osdn.jp/

P.4

https://spy-family.net/

原文出處: cjkfonts 全瀨體 https://free.com.tw/naikaifont/

5 of 108

瀨戶字體

P.5

原文出處: cjkfonts 全瀨體 https://free.com.tw/naikaifont/

6 of 108

cjkfonts 全瀨體、內海字體、小賴字體

P.6

02

章節 02

7 of 108

cjkfonts

  • cjkFonts 致力於研究運用AI深度學習解決中文字體及中文網頁的各種問題，在整個過程中，我們遇上了很多困難，經歷了很多個不眠不休的日子才能解決部分問題。同時科技日新月異，我們也要不停地學習新的技術來應付各種問題，有時候也會覺得很倦。儘管如此，我們相信是值得的，希望能為中文設計及應用上作出少少貢獻。

P.7

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

8 of 108

cjkfonts 全瀨體

  • 雙點擊，安裝 cjkfonts 全瀨體

​

​

​

​

  • 前往這裡下載全瀨體
  • https://cjkfonts.io/blog/cjkfonts_

P.8

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

9 of 108

cjkfonts 全瀨體

  • 雙點擊，安裝 cjkfonts 全瀨體

​

​

​

​

​

​

​

P.9

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

10 of 108

cjkfonts 全瀨體

  • cjkFonts 全瀨體是基於瀨戶字體透過深度學習智能造字，產生的字體數量是跟思源黑體相同，所以是全面支持繁、簡、日、韓字體，彌補了瀨戶字體沒有的繁體及簡體字，可以安心使用，不會遇上缺字的情況。
  • 由於是電腦學習了字型的特點及風格後，每個字根據學習後的數據造字,所以字體的風格會跟瀨户字體有輕微的分別。

P.10

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

11 of 108

cjkFonts的字體是 由「誰」製作?

  • 「誰」就是一部以機器學習、深度學習為製作字體用途的工作站，看描述好像很厲害， 其實只是一部硬件配置稍高一點的電腦。

​

  • 主板(Motherboard) : Gigabyte X399 AORUS Gaming 7
  • 中央處理器(CPU) : AMD Ryzen Threadripper 2920X
  • 顯示卡(GPU)：MSI RTX 2080 Ti VENTUS 11G OC
  • 內存(RAM) : CORSAIR 32G DDR4 3200Mhz
  • 硬碟(Hard disk) : Samsung 970 EVO Plus NVMe M.2 1TB
  • 電源(PSU) : CORSAIR AX1600i Digital ATX Power Supply
  • 電腦機箱(Case) : be quiet! Dark Base Pro 900

P.11

https://cjkfonts.io/blog/fonts

12 of 108

cjkFonts的字體是 由「誰」製作?

  • 軟件方面 :
    • Tensorflow
    • Python
    • Nodejs
    • Photoshop
    • Fontlab

​

​

​

  • 以下影片顯示AI訓練過程中的變化，剛開始字形是模糊的，隨著訓練次數增加，字形開始產生變化，到最後字形就產生出來了。

P.12

https://cjkfonts.io/blog/fonts

https://www.zeczec.com/projects/cjkfonts

13 of 108

cjkfonts 全瀨體

  • ... 以下影片顯示了電腦產生字體的過程，約5分鐘時間，就可以產生4萬2千個字。

P.13

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

https://cjkfonts.io/video/cjkfonts_video.mp4

14 of 108

cjkfonts 全瀨體

以下是造字的過程 :

1. 深度學習訓練: 這過程是教電腦學習字型的特點及風格，就像教小明友學寫字一樣。電腦要24小時不停訓練，一般訓練3至4天，初步字體成形。

2. 調整字體: 訓練完成後，檢視產生的字體，如果有變形的情況，就人手修正。

P.14

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

15 of 108

cjkfonts 全瀨體

3a. 再訓練: 修正後的新字體，再加入訓練，重復步驟一，讓機器學習新的字型特點。

3b. 再訓練” 反復一至三的步驟，當產生的字型達到滿意效果，然後就可以產生全部字型。

​

P.15

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

16 of 108

cjkfonts 全瀨體

4. 篩選及調整: 產生的字體數量大約4萬2千個字左右，當中會有一些字是變形的，要篩選出來再人工調整，這個步驟工作量是非常大及花費大量時間的。

5. 輸出字體檔案: 使用軟件組合字體，然後輸出字體檔案(ttf)。

P.16

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

17 of 108

cjkfonts 全瀨體

  • ... 造出一款字大約要用3至4個月時間，如果人手充足的話，可以縮短至2個月。

P.17

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

18 of 108

cjkfonts 全瀨體

  • 瀨戶字體的數量已足夠應付一般情況，為何要基於它再造字?
  • 瀨戶字體是一款很可愛的手寫字，在繁體支援上是很足夠的。
  • 但是在簡體字上，缺字情況嚴重，很多日常會使用到的字也缺少(圖.1 顯示簡體部分缺字)，我們希望可以補回缺少的簡體字，令到繁體及簡體的應用上也可以使用此字體。

​

P.18

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

19 of 108

cjkfonts 全瀨體

​

​

​

​

​

  • (圖.1) 瀨戶字體缺了 谢 和 览

P.19

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

20 of 108

cjkfonts 全瀨體

  • 瀨戶字體: 用 SIL Open Font License 授權方法，此授權可以商業使用，也可以容許修改字體。

​

  • 全瀨體: 用 SIL Open Font License 授權方法，此授權可以商業使用，也可以容許修改字體。

P.20

原文出處: cjkfonts 全瀨體 https://cjkfonts.io/blog/cjkfonts_allseto

21 of 108

「內海字體」

  • 瀨戶字體在中文使用時會有缺字。
  • 台灣開發者 max32002 以此字型做為基礎加入繁中常用字進行補足，開發出一款「內海字體」開放原始碼中文免費字型。
  • 風格上接近瀨戶字體，使用者能夠免費下載，亦可使用於個人和商業用途。

P.21

原文出處: cjkfonts 全瀨體 https://free.com.tw/naikaifont/

22 of 108

「小賴字體」

​

​

​

​

  • 小賴字體源自日文瀨戶字體、內海字體、cjkFonts 全瀨體，改造擴編而來，作者孤鶩先森調整了原作筆劃與字元大小等。

P.22

原文出處: https://jfsblog.com/blog/post/kosefont

23 of 108

「小賴字體」

​

​

​

  • 小賴字體，並且補全幾乎常見的中文漢字，包括GB18030-2000的全部漢字、《通用規範漢字表》，以及BIG5-2003（含台灣教育部規定常用漢字），同時也包含日文假名與朝鮮文，算是非常全面的字體。

P.23

原文出處: https://jfsblog.com/blog/post/kosefont

24 of 108

「小賴字體」

​

​

​

​

  • 小賴字體包含兩個字重，採 SIL Open Font License 1.1 授權條款免費公開，不限印刷、媒體、個人、嵌入網站或商業使用，在創作使用上可以放心使用。

P.24

原文出處: https://jfsblog.com/blog/post/kosefont

25 of 108

(a) Unicode 輸入法練習

P.25

章節 05

26 of 108

Unicode 輸入法練習

  • 工具一 輸入法整合器。
  • 工具二 滑鼠右鍵。選［插入符號］。
  • 工具三 Alt+X 鍵。
  • 工具四 charmap。
  • 工具五 注音輸入法輸入 Unicode 編碼。

​

P.26

27 of 108

工具一

  • 輸入法整合器－用寫的！

P.27

28 of 108

工具一

  • 按這個！

P.28

29 of 108

移動到你的字，按右鍵選[詳細資料]

P.29

30 of 108

工具二

  • 打開 Word，按下滑鼠右鍵。選［插入符號］

P.30

31 of 108

工具二

  • 或是，打開 Word，點選[插入]，點選[符號](在最右邊)。

P.31

32 of 108

工具二

  • 提示: Segoe UI Symbol 字型有非常大的 Unicode 符號集合可供選擇。

​

  • 字型選[cjkFonts 全瀨體]，字元代碼輸入[6771]，右側要選，從[Unicode (十六進位)]。(見下頁)

P.32

33 of 108

工具二

P.33

34 of 108

工具三 (字變數)

  • 打開 Word，輸入一個字。
  • 按一下 Alt+X 鍵，即會顯示這個中文字的 Unicode 碼。
  • 蘇 按一下 Alt+X 鍵 8607
  • 東 按一下 Alt+X 鍵 6771
  • 坡 按一下 Alt+X 鍵 5761

P.34

35 of 108

工具三 (數變字)

  • 打開 Word，輸入一個 Unicode 碼。
  • 然後按一下 Alt+X 鍵。
  • 8607 按一下 Alt+X 鍵 蘇
  • 6771 按一下 Alt+X 鍵 東
  • 5761 按一下 Alt+X 鍵 坡

P.35

36 of 108

工具三

  • Unicode 碼不全然都是四碼( 16進位)，有可能是五碼(16進位) ，有可能是六碼(16進位) 。
  • 例如，在 word 中輸入，
  • 然後按下 Alt+x，就會顯示 🍰(&#x1f370)的字元。

P.36

37 of 108

字元實體 Character Entities

  • HTML Character Reference
    • &name; character entity reference
    • &#dddd; numeric character reference 十進位數字
    • &#xhhhh; numeric character reference 十六進位數字

P.37

https://www.cnblogs.com/philipding/p/10153094.html

38 of 108

字元實體 Character Entities

P.38

https://www.cnblogs.com/philipding/p/10153094.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>

</head>

<body>

​

<h1>

&#x8607

&#x6771

&#x5761

</h1>

​

</body>

</html>

39 of 108

工具三

P.39

https://www.w3.org/International/articles/definitions-characters/

Supplementary Special Use Plane

Basic Multilingual Plane (BMP)

Private Use Planes

SIP (Supplementary Ideographic Plane)

SMP (Supplementary Multilingual Plane)

65,536 code points

40 of 108

工具三

P.40

https://zh.wikipedia.org/wiki/Unicode%E5%AD%97%E7%AC%A6%E5%B9%B3%E9%9D%A2%E6%98%A0%E5%B0%84

平面

始末字元值

中文名稱

英文名稱

0號平面

U+0000 - U+FFFF

基本多文種平面

Basic Multilingual Plane，簡稱BMP

1號平面

U+10000 - U+1FFFF

多文種補充平面

Supplementary Multilingual Plane，簡稱SMP

2號平面

U+20000 - U+2FFFF

表意文字補充平面

Supplementary Ideographic Plane，簡稱SIP

3號平面

U+30000 - U+3FFFF

表意文字第三平面

Tertiary Ideographic Plane，簡稱TIP

4號平面�至�13號平面

U+40000 - U+DFFFF

（尚未使用）

​

14號平面

U+E0000 - U+EFFFF

特別用途補充平面

Supplementary Special-purpose Plane，簡稱SSP

15號平面

U+F0000 - U+FFFFF

保留作為私人使用區（A區）[1]

Private Use Area-A，簡稱PUA-A

16號平面

U+100000 - U+10FFFF

保留作為私人使用區（B區）[1]

Private Use Area-B，簡稱PUA-B

41 of 108

工具三

Plane Name Abbr. Characters Blocks

U+0000 - U+FFFF Basic Multilingual Plane BMP 55,503 163

U+10000 - U+1FFFF Supplementary Multilingual Plane SMP 22,279 134

U+20000 - U+2FFFF Supplementary Ideographic Plane SIP 60,866 6

U+30000 - U+3FFFF unassigned - 4,939 1

U+40000 - U+4FFFF unassigned - 0 0

U+50000 - U+5FFFF unassigned - 0 0

U+60000 - U+6FFFF unassigned - 0 0

U+70000 - U+7FFFF unassigned - 0 0

U+80000 - U+8FFFF unassigned - 0 0

U+90000 - U+9FFFF unassigned - 0 0

U+A0000 - U+AFFFF unassigned - 0 0

U+B0000 - U+BFFFF unassigned - 0 0

U+C0000 - U+CFFFF unassigned - 0 0

U+D0000 - U+DFFFF unassigned - 0 0

U+E0000 - U+EFFFF Supplement­ary Special-purpose Plane SSP 337 2

U+F0000 - U+FFFFF Supplement­ary Private Use Area planes PUA 0 1

U+100000 - U+10FFFF Supplement­ary Private Use Area planes PUA 0 1

P.41

https://www.compart.com/en/unicode/plane

42 of 108

工具四

  • Open Run (Win+R),
  • type charmap into Run, and click/tap on OK to open Character Map.

​

P.42

43 of 108

工具四

  • 選[cjkFonts 全瀨體]，
  • 字元集選[Unicode]。

P.43

44 of 108

工具五

  • 使用注音輸入法來輸入 Unicode 編碼。
  • 首先切換到注音輸入法的中文輸入模式，然後按下
  • `u6771
  • [`]([Esc]鍵下方的鍵) + [u] + [Unicode 編碼] + [enter]。
  • 特別要注意輸入的數字，是鍵盤上方的數字鍵，不可以使用 Number Pad 的數字鍵。

P.44

45 of 108

參考文獻

P.45

46 of 108

(b) 字元編碼

UTF-8

UTF-16 BE

UTF-16 LE

​

P.46

章節 05

47 of 108

UTF-8

  • UTF-8 encoder/decoder
  • https://mothereff.in/utf-8

P.47

48 of 108

HexEd.it https://hexed.it/

P.48

49 of 108

安裝 Visual Studio Code

  • 安裝 hexdump Hex Editor for VSCode。

P.49

50 of 108

記事本

P.50

51 of 108

P.51

6 bytes

3 bytes

6 bytes

4 bytes

52 of 108

UTF-8

  • UTF-8 (無BOM)

P.52

3 bytes

53 of 108

UTF-8

  • UTF-8 (BOM)

P.53

6 bytes

54 of 108

UTF-8

  • UTF-16 BE

P.54

55 of 108

UTF-8

  • UTF-16 LE

P.55

56 of 108

(c) 漢字中的四疊字

P.56

章節 05

57 of 108

漢字中的四疊字

  • UTF-8 encoder/decoder
  • https://mothereff.in/utf-8

​

  • 四叠字大全 - 汉语字典 - 千篇国学
  • https://zidian.qianp.com/sidiezi.html

​

P.57

58 of 108

UTF-8

P.58

59 of 108

UTF-8

  • UTF-8

P.59

60 of 108

UTF-8

P.60

61 of 108

UTF-16 and Surrogates

  • Let A be the code point of a character.
  • We subtract 0x10000 (65536) from A to obtain a number between 0x00000 and 0xFFFFF,
  • which is therefore a 20-bit number.

P.61

62 of 108

漢字中的四疊字

  • 𪚥
  • 0x2A6A5 - 0x10000 = 0x1A6A5

​

0001 1010 0110 1010 0101

​

P.62

63 of 108

UTF-8

  • UTF-16 BE

P.63

64 of 108

UTF-8

  • UTF-16 LE

P.64

65 of 108

(d) 非Unicode環境

P.65

章節 05

66 of 108

(d) Unicode環境

  • Unicode
    • 將編碼空間分成 17 個平面，
    • 以 Plane 0 到 Plane 16 編號。

​

P.66

67 of 108

(d) Unicode環境

  • 第 0 平面（基本多文種平面）中的碼點，
    • 可以用一個 UTF-16 單位來編碼，
    • 或者以 UTF-8 來編碼，會使用一、二或三個位元組。

​

P.67

68 of 108

(d) 非Unicode環境

  • 在非Unicode環境下，
    • 由於不同國家和地區採用的字元集不一致，
    • 很可能出現無法正常顯示所有字元的情況。

​

P.68

69 of 108

(d) 非Unicode環境

  • 微軟使用了頁碼（Code Page）轉換表的技術

​

    • 來過渡性地部分解決這一問題。

​

    • 即通過指定的轉換表，將非Unicode的字元編碼，

​

    • 轉換為同一字元對應的系統內部使用的 Unicode編碼。

​

P.69

70 of 108

(d) 非Unicode環境

  • 非 Unicode 環境
    • 選擇一個頁碼作為非Unicode編碼所採用的預設編碼方式，如
    • 936 為簡體中文GB碼，
    • 950 為繁體中文Big5碼（皆指PC上使用的）。
    • 1252 為 8-bit ASCII (default for graphical applications under Windows)
    • 437 為 8-bit ASCII (default for console applications under Windows)
  • Unicode 環境
    • UTF-7 頁碼是65000
    • UTF-8 頁碼是65001

​

P.70

http://zuga.net/articles/text-ascii-vs-cp-1252-vs-cp-437/

71 of 108

設定 cmd 的編碼方式

P.71

移動到此處，按下滑鼠右鍵

http://elvishsieh.blogspot.com/2013/03/cmd.html

72 of 108

設定 cmd 的編碼方式

P.72

http://elvishsieh.blogspot.com/2013/03/cmd.html

73 of 108

設定 cmd 的編碼方式

  • Unicode 編碼( chcp 65001)
  • C:\Users\cg>chcp 65001

​

P.73

http://elvishsieh.blogspot.com/2013/03/cmd.html

74 of 108

設定 cmd 的編碼方式

P.74

http://elvishsieh.blogspot.com/2013/03/cmd.html

75 of 108

Visual Studio Code 終端機

P.75

76 of 108

Visual Studio Code 終端機

#include <stdio.h>

​

int main(){

printf("中文\n\n");

​

// https://stackoverflow.com/questions/29776849/why-cant-i-print-a-unicode-character-in-c-with-wchar-t

wchar_t a = 0x0041; /* A */

printf("%lc\n\n", a);

​

// https://www.ithome.com.tw/voice/135711

char text[] = u8"林𪚥𨰻";

printf("%s\n\n", text);

​

return 0;

}

​

P.76

77 of 108

Visual Studio Code 終端機

P.77

1. 拖拉進來，

按 Enter 執行

2. 拖拉進來，

按 Enter 執行

chcp 65001

78 of 108

Visual Studio Code 終端機

  • 使用「剪取工具」

​

P.78

79 of 108

Visual Studio Code 終端機

P.79

80 of 108

Visual Studio Code 終端機

  • 截圖

​

P.80

81 of 108

Visual Studio Code 終端機

  • 存檔

P.81

82 of 108

Visual Studio Code 終端機

  • 存檔

​

P.82

83 of 108

Visual Studio Code 終端機

  • 將截圖放到 hw01 作品集

P.83

84 of 108

參考文獻

​

​

P.84

85 of 108

(e) Ligature 「合字」「連字」

Enable Font Ligatures in VS Code

P.85

章節 05

86 of 108

Enable Font Ligatures in VS Code

​

P.86

87 of 108

Enable Font Ligatures in VS Code

  • 影片教學 https://youtu.be/PRMQ7bFK3L4

​

P.87

88 of 108

Enable Font Ligatures in VS Code

  • Font ligatures combine multiple characters into a single unique character.
  • Some fonts provide ligatures specifically for software development.

P.88

89 of 108

Enable Font Ligatures in VS Code

P.89

Font

Reference

Cascadia Code

Fira Code

JetBrains Mono

Iosevka

Hasklig

Monoid

Victor Mono

https://worldofzero.com/posts/enable-font-ligatures-vscode/

https://github.com/tonsky/FiraCode

90 of 108

Enable Font Ligatures in VS Code

  • 找到這個按鈕，按下去。

P.90

https://github.com/tonsky/FiraCode

91 of 108

Enable Font Ligatures in VS Code

  • 解壓縮 Fira_Code_v6.2.zip
  • 安裝

P.91

https://github.com/tonsky/FiraCode

92 of 108

Enable Font Ligatures in VS Code

  • To enable font ligatures in Visual Studio Code you will need to edit the settings.json file.
  • To do this open the VS Code settings (File -> Preferences -> Settings) select the Text Editor group and Font settings.
  • Replace the name of the font with the font you would like to use.

P.92

93 of 108

Enable Font Ligatures in VS Code

{

"editor.fontFamily": "*** Your ligature enabled font ***",

​

"editor.fontLigatures": true,

}

P.93

‘Fira Code’

94 of 108

P.94

95 of 108

P.95

96 of 108

P.96

97 of 108

P.97

98 of 108

P.98

99 of 108

Enable Font Ligatures in VS Code

重新開啟 VS Code

P.99

100 of 108

Enable Font Ligatures in VS Code

重新開啟 VS Code

P.100

101 of 108

HW01 評分標準

P.101

04

章節 04

102 of 108

評分標準

  • Simple baseline (6pt)
    • a (2pt)
    • b (2pt)
    • c (2pt)
  • Medium baseline (2pt)
    • d (2pt)
  • Strong baseline (2pt)
    • e (2pt)

​

P.102

103 of 108

繳交資訊

P.103

章節 05

104 of 108

繳交資訊

  • HW01 繳交方式: 上傳到自己 github 的 hw01 檔案夾
  • HW01 作品集範例，參考
  • https://tjhsieh.github.io/ct2023s/hw01/index.html

​

P.104

105 of 108

https://tjhsieh.github.io/ct2023s/hw01/index.html

P.105

106 of 108

HW01 自我評分表

  • 記得更新 “自我評分表”

P.106

107 of 108

Regulations

  • You should finish your homework on your own. 
  • Do not share your codes with any living creatures. 
  • Your HW will get 0 pt if you violate any of the above rules. 
  • Professor & TAs preserve the rights to change the rules & grades.

P.107

108 of 108

助教聯絡資訊

  • TA Email
    • 王俞喬 t111598002@ntut.org.tw
    • Email 標題請按照此格式(X為作業編號) : [ct2023s-hwX-學號]

P.108