1 of 61

字體設計與文字編碼

HW10

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

2 of 61

目錄

  • 評分標準
  • 製作稿紙
  • 切割成圖檔
  • 製作手寫體

P.2

3 of 61

評分標準

P.3

01

章節 01

4 of 61

評分標準

  • Simple baseline (8pt)
    • 完成 138 頁稿紙書寫
  • Medium baseline (1pt)
    • 成功切割成 13759 張 png
  • Strong baseline (1pt)
    • 打包成字型檔

P.4

5 of 61

懸賞功能（額外加分）

稿紙掃描圖片自動校正程式開發

​

P.5

6 of 61

製作稿紙

P.6

02

章節 02

7 of 61

下載程式碼

網址

​

P.7

8 of 61

下載完成解壓縮

檔案內容

P.8

PDF 檔案夾：裝步驟二完成生成的 138 個 pdf 檔案

Table 檔案夾：裝步驟一完成生成的 138 個 svg 檔案

步驟一：生成 138 張 svg 稿紙

步驟二：將 138 個 svg 檔案加上 qrcode

步驟三：將 138 張 svg 轉成 138 個 pdf 檔案

CP950.json：Code Page 950 字元的 big5 和 unicode 編碼

個人資訊修改

四步驟

步驟四：將 138 張 pdf 檔案合併成一個 pdf 檔案

PIP 安裝 requirements.txt 的套件

唯一需要修改的檔案

9 of 61

安裝 requirements.txt 的套件

打開 cmd 輸入：

pip install –r requirements.txt

P.9

10 of 61

執行 python

使用 spyder 、 vscode 或 指令輸入 都行

P.10

11 of 61

步驟 0

修改 info.py 程式碼

修改成自己的⇓⇓

  • 學號
  • 姓名
  • 序號（編號）網址

​

P.11

12 of 61

步驟一

生成 138 張 svg 稿紙

svg 會生成在 Table 資料夾中

指令輸入：

python 1_SVGtable.py

​

P.12

……

13 of 61

步驟二

將 138 個 svg 檔案加上 qrcode

指令輸入：

python 2_QR_add.py

​

P.13

14 of 61

步驟三

將 138 張 svg 轉成 138 個 pdf 檔案

pdf 會生成在 PDF 資料夾中

指令輸入：

python 3_SVG2PDF.py

​

P.14

……

15 of 61

步驟四

將 138 個 pdf 檔案合併為 1 個 pdf 檔案

指令輸入：

python 4_PDFmerge.py

​

P.15

16 of 61

結果

P.16

序號（編號）

頁碼

頁碼

學號_姓名

書寫區

字順

應寫入書寫區之字元

該字元 Unicode

頁碼 QRcode

手寫字請寫在綠色框框中！

17 of 61

注意事項

如果是電子書寫

請儲存成 PDF 再轉成 JPG/PNG

（如果直接存成 JPG/PNG 圖檔解析度會偏低）

P.17

18 of 61

切割成圖檔

P.18

03

章節 03

19 of 61

旋轉校正角度（紙本掃描）

P.19

角度微傾斜

角度轉正

20 of 61

旋轉校正角度（紙本掃描）

由於掃描機掃描出來的檔案角度會有微微的傾斜，

所以需要去做角度的校正以利於之後切割的步驟。

程式碼

​

安裝scipy函式庫:

pip install scipy

​

註：電子書寫不須經過此步驟

P.20

21 of 61

切割稿紙

P.21

經過角度校正稿紙

檔名：'U+' + 'unicode編碼'

22 of 61

切割稿紙

此為手動調整位置版本

​

安裝pillow函式庫:

pip install Pillow

​

原程式碼

經過修改程式碼（修課同學提供）

P.22

23 of 61

自動校正切割程式（+縮放字符、相似度）

程式碼

​

​

​

注意：適用一次執行 138 頁的綠框稿紙！

P.23

24 of 61

對齊和縮放字符圖像

程式碼

  • 對齊字符圖像：根據字符的邊界框將字符放在新圖像的中心
  • 縮放字符圖像：根據指定的縮放百分比來縮放字符(非中文字跳過，不處理)
  • 顯示操作前後的字符圖像對比

​

​

P.24

25 of 61

紙本書寫掃描檔案

紙本掃描

​

​

​

請下載自己學號的資料夾！

P.25

26 of 61

製作手寫字

04

P.26

27 of 61

轉檔

使用 Potrace.js Demo

將切割下來的圖檔轉換成 SVG 格式

P.27

28 of 61

轉檔

Potrace.js Demo 使用步驟

P.28

點選左方資料夾圖示

選擇切割完成的文字圖檔資料夾

點選最下方按鈕

上傳完成

https://t109598105.github.io/Potrace-Demo/

29 of 61

轉檔

P.29

解壓縮 下載的壓縮檔

我們將會使用 `svg_image` 資料夾

30 of 61

打包字體

使用 Font SVG Viewer

將轉換完成的 SVG 打包成字體

P.30

SVG

手寫字體

31 of 61

打包字體

Font SVG Viewer 使用步驟

P.31

此處記得打勾

拖拉基底字體到此處

推薦基底字體：

cjkfonts 全瀨體

全瀨體下載

32 of 61

打包字體

P.32

點選右側資料夾圖示

點選 Select

打勾

選擇 SVG 資料夾

點選右下角 TTF 圖示

下載

打包完成

33 of 61

字寬調整

05

P.33

34 of 61

下載 fontforge

點此下載

P.34

支援所有通用字型格式的字型編輯器，可用於多個作業系統（包括Linux、Windows 和 OS）

35 of 61

P.35

下載

36 of 61

fontforge 使用

選擇要調整的字體

P.36

37 of 61

fontforge 使用

雙點擊要調整的字

P.37

38 of 61

fontforge 使用

P.38

調整字高

調整字寬

39 of 61

fontforge 使用

快速將全形改半形字寬

P.39

半形字元 ex：

0123456789

abcdefg…xyz

ABCDEFG…XYZ

!”#$%&’()*+,-./:;<=>?@[\]^_`{|}~

數字

小寫英文

大寫英文

標點符號

40 of 61

fontforge 使用

快速將全形改半形字寬

P.40

選取要調整的字元

41 of 61

fontforge 使用

快速將全形改半形字寬

P.41

自動調整

42 of 61

fontforge 使用

匯出字型

P.42

檔名

選擇 TrueType

取消勾選

匯出

Validte Befor Saving 會延長輸出時間，有時也會造成輸出錯誤，沒必要勾選。

設定路徑

43 of 61

圖像相似度

06

P.43

44 of 61

圖像相似度

  • MSE (Mean Squared Error)：均方誤差
  • SSIM (Structural Similarity Index)：結構相似性指標
  • LPIPS (Learned Perceptual Image Patch Similarity)：學習感知圖像塊相似性指標

P.44

45 of 61

MSE

  • 又稱為「L2 損失 (L2 loss)」。
  • 一種常用的評估兩個圖像之間差異的指標。
  • 計算兩個圖像對應像素值的差異平方的平均值。
  • MSE 越小表示兩個圖像越相似。

P.45

Mean

Error

Squared

46 of 61

P.46

圖 B

圖 A

(對應像素值的差異)²

計算

取平均值

1/n

…

47 of 61

SSIM

  • SSIM 是一種用於衡量兩個圖像結構相似性的指標。
  • 基於人類視覺系統對於亮度、對比度和結構訊息的感知。
  • 考慮了亮度、對比度和結構三個方面的相似性，並生成一個介於 0 和 1 之間的分數，越接近 1 表示兩個圖像越相似。
  • SSIM 越大表示兩個圖像越相似。

P.47

ㄈ

x均值

y均值

x變異數

y變異數

x和y的共變異數

48 of 61

P.48

49 of 61

P.49

MSE

4443.170

5445.344

4592.340

SSIM

0.744

0.713

0.047

原圖

圖 1

圖 2

圖 3

無法區別➩

⇧⇧區別很大⇧⇧

50 of 61

LPIPS

  • 又稱為「感知損失 (perceptual loss)」。
  • 一種基於深度學習模型的圖像相似性指標。
  • 使用預訓練的深度學習模型（例如 AlexNet 或 VGG）來提取圖像的特徵表示，並計算這些特徵之間的差異。
  • 考慮了感知上的差異，能更好地捕捉人類主觀感知的圖像差異。
  • LPIPS 的分數越小表示兩個圖像越相似。

P.50

51 of 61

P.51

深度學習模型

AlexNet

VGG

捕捉特徵

（結構、權重）

邊緣、紋理、顏色、形狀、類別等等

邊緣、紋理、細節、形狀、外觀等等

用途

用於衡量圖像之間的相似性或距離

差異

與 AlexNet 不同，VGG 模型具有更深的網路結構，因此它可以提取更多層次的特徵。具體來說，VGG 的深層卷積層學習到的特徵更加抽象

52 of 61

計算結果

P.52

源樣黑體_EL

源樣明體_EL

範例程式

同學A手寫體

53 of 61

P.53

​

同學A手寫體

源樣黑體_EL

源樣明體_EL

​

​

​

​

MSE

0.15971

0.25472

0.28015

SSIM

0.78551

0.66654

0.63820

LPIPS

0.38494

0.52781

0.54601

CircleFont.ttf

<

<

更接近1

更相似

（你的手寫字體）

<

<

54 of 61

計算結果

P.54

同學B手寫體

同學C手寫體

55 of 61

P.55

​

同學B手寫體

同學C手寫體

​

​

​

MSE

0.17349

0.18674

SSIM

0.74656

0.74362

LPIPS

0.42531

0.42431

CircleFont.ttf

更接近1

更相似

（你的手寫字體）

<

>

56 of 61

圖像相似度 – 結論

☆推薦程度☆

No.1 LPIPS

No.2 SSIM

No.3 MSE

P.56

57 of 61

繳交資訊

07

P.57

58 of 61

繳交資訊

請將手寫字體檔名改為自己的學號交至以下連結

↓↓↓↓↓

你的手寫體

P.58

111xxxxxx.ttf

59 of 61

繳交資訊

請將切割完成的手寫字 png 壓縮資料夾交到以下連結(如果一次上傳一萬多張會造成其他同學的下載困難)

↓↓↓↓

切割圖檔

P.59

資料夾請以學號命名！�（此資料夾為方便修課同學做比較）

批次比較程式

或是使用投影片 p23 的程式（有新增相似度比對的功能）

60 of 61

作品集網頁 Github

  • 計算相似度，找到班上與自己手寫字體最為相似的同學A。
  • 將自己的字體和同學A的字體放同一段文字至網頁（例如：洛神賦）。
  • 網頁可自由設計。

P.60

61 of 61

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.61