1

點(diǎn)陣漢字

點(diǎn)陣字體(Dot Matrix Fonts，又稱Bitmap Fonts)的使用，早已成為世界上第一臺廣為人知的電子自動排版機(jī)器。這是1966年德國發(fā)明家Ing博士。這是Rudolf Hell發(fā)明的外殼50。

Hell 50T1 Digiset [2]

而中文點(diǎn)陣字體的使用也有幾十年了，那時候比較流行軟／硬漢字系統(tǒng)（看你是否知道 CCDOS，UCDOS，213 什么的？），常用到 16 和 24 點(diǎn)陣的漢字。由于以前屏幕的分辨率比較低，點(diǎn)陣漢字還是相當(dāng)?shù)膲蛴?。后來，隨著圖形化操作系統(tǒng)的普及，矢量字體（Outline Fonts, Vector Fonts）大行其道，其矢量渲染的方式能夠顯示出平滑的字體，體驗(yàn)大大超過了傳統(tǒng)的點(diǎn)陣字體，理所當(dāng)然的成為了當(dāng)前的主流。

那么是不是點(diǎn)陣漢字就已經(jīng)退出歷史舞臺了呢？并沒有。現(xiàn)在街上能常常見到的簡易 LED 屏，很多都還是用的點(diǎn)陣漢字。很多工控或者簡易屏幕上，也都還在使用點(diǎn)陣漢字，這是因?yàn)橥噶孔煮w相比，點(diǎn)陣漢字占用的空間極小，這是由于點(diǎn)陣漢字的特性所決定的，一般一個點(diǎn)陣漢字是這樣的：

如上圖所示，沒有像素的點(diǎn)的值設(shè)為 0，有像素的點(diǎn)的值設(shè)為 1，那么一個 16 點(diǎn)陣漢字就可以用 16x16 位，也就是 4 個字節(jié)（Byte）來表示，所以非常節(jié)省空間，因此它非常適合用在早期的電腦系統(tǒng)以及需要低成本使用的情況下。盡管它放大之后既不平滑也不利于閱讀，但是在文字尺寸比較小的情況下，卻有著超過矢量字體的清晰度。所以，在今天的某些漢字字體中，也還包含有多組點(diǎn)陣字庫，在特定文字尺寸的時候（比如：12px - 16px），就會使用這些點(diǎn)陣字體來代替矢量字體。

點(diǎn)陣漢字應(yīng)用場景還是非常廣泛，那么上面還沒有提到的一點(diǎn)就是：使用在像素游戲中。

2

在游戲中使用點(diǎn)陣漢字

要想在游戲中使用點(diǎn)陣漢字，有兩種方法：

• 一種是使用早期的 GB2312-80 的漢字庫，然后編寫程序自行解析或者繪制，這里有一篇文章（）可以幫助您了解解析的方法。

• 使用這種方法相對繁瑣，而且要想換成其它語言也要寫相應(yīng)的代碼，但是好處也是顯而易見的：那就是可以控制點(diǎn)陣漢字的每一個點(diǎn)（Pixel），可以輕易顯示出多彩的漢字，甚至可以針對每一個點(diǎn)制作動態(tài)的效果，想象力夠的話，可以將漢字表現(xiàn)得很炫。（如果今后有機(jī)會我會寫一篇相關(guān)的教學(xué)，不做保證 :D）

• 還有一種方法就是使用帶有點(diǎn)陣字庫的字體，這樣可以輕松的支持多種語言，而且在需要平滑字體的時候也可以使用。不過呢，只有特定尺寸的漢字可以顯示成點(diǎn)陣漢字。不過這種方法是做不到對漢字的到點(diǎn)（Pixel）的操作。

目前大家使用比較多的是直接使用帶有點(diǎn)陣字庫的 True Type 字體，不過由于限定在固定尺寸的漢字才能顯示出點(diǎn)陣字體，所以當(dāng)想要任意尺寸表現(xiàn)的點(diǎn)陣漢字的時候，就受到很多限制。雖然可以使用各種方法來達(dá)到目的，但是如果有一種字體它既是矢量的又表現(xiàn)得跟點(diǎn)陣字庫一樣的話，可能用起來就自由多了。所以，這就有了另外一種方法：將點(diǎn)陣字體矢量化成一個新的矢量字體，無論怎樣使用都是表現(xiàn)出某一點(diǎn)陣字體的特性。比如，著名的 04 Bitmap 字體，就是這樣的：

Yuji Oshimoto 的 04 像素字體

（）

這種方法雖然見仁見智，有利也有弊，但是，也不失為一個解決方案。尤其是在本地化海外游戲的時候，如果原游戲使用了像素字體，而在中文化之后如果直接使用矢量化的點(diǎn)陣字體，就會是一個非常棒的選擇。

所以，我們今天就來試著自己做一套像素漢字字體。

3

準(zhǔn)備工作

開始教程之前，需要先準(zhǔn)備好如下幾項(xiàng)：

• FontForge（）

FontForge（2004 年 3 月前稱為 PfaEdit）是一款全功能的支持所有通用字體格式的字體編輯器，主要由 George Williams 開發(fā)，F(xiàn)ontForge 是自由軟件，并以 GNU 通用公共許可證第 3 版及三句式 BSD 許可證授權(quán)。該軟件用于多個操作系統(tǒng)（包括 Linux、Windows 和 OS X）并翻譯成 12 種語言。[3] 具體的安裝方法請看這里（），我們不做贅述。

• ImageMagick（http://www.imagemagick.org/script/index.php）

ImageMagick 是一個用于查看、編輯位圖文件以及進(jìn)行圖像格式轉(zhuǎn)換的開放源代碼軟件套裝。它可以讀取、編輯超過 100 種圖象格式。ImageMagick 以 ImageMagick 許可證（一個類似 BSD 的許可證）發(fā)布。[4] 各個系統(tǒng)下的下載安裝方法請見這里（http://www.imagemagick.org/script/binary-releases.php）。

• 一個包含有點(diǎn)陣字庫的字體，或者通用格式的點(diǎn)陣字庫

可選擇的帶有點(diǎn)陣漢字庫的字體還是不少的，大家在 Windows 下常用的 SimSun 就包含有多種尺寸的點(diǎn)陣字體。為了便于涵蓋各個不同平臺的讀者，我們這里選擇的例子是著名的開源字體文泉驛的正黑體。

該字體包含了所有常用簡體中文、繁體中文，日文及韓文所需要的漢字（最新版本包含超過 27842 個漢字，完整覆蓋 GB2312/Big5/GBK/GB18030 標(biāo)準(zhǔn)字符集）。該字體同時還包含了英文、日文、韓文和其他多種語言符號。該點(diǎn)陣字體包含五個屏幕常用字號（9pt-12pt），逾 21 萬漢字點(diǎn)陣。Windows 版需要下載文泉驛正黑體，正黑體嵌入了所有 GBK 漢字點(diǎn)陣，在9-12pt范圍內(nèi)，將自動使用點(diǎn)陣宋體顯示。[5]

• Python 環(huán)境支持

我們要求的這幾項(xiàng)都是可以跨 Windows，Mac OSX，Linux 平臺的，而且均為開源項(xiàng)目，便于大家親自嘗試。

我們的教程是基于 Mac OSX 撰寫的，其它平臺也基本上一致。

4

制作文字

一、提取點(diǎn)陣漢字

首先，我們要做的是提取點(diǎn)陣漢字。雖然文泉驛已經(jīng)提供了 9pt - 12pt 的 pcf 格式的字體，可以直接使用，但是為了讓大家能夠隨意處理自己選用的字體，所以還是先講講怎么提取點(diǎn)陣漢字。

我們打開 FontForge，選擇導(dǎo)入文泉驛正黑 wqy-zen，這其中包含有三個項(xiàng)目，我們選擇帶有點(diǎn)陣字庫的WenQuanYi Zen Hei Sharp 導(dǎo)入。接下來就會詢問是否要導(dǎo)入某一尺寸的點(diǎn)陣字庫，在本教學(xué)中，我們選擇 16 點(diǎn)陣的。

按照這個步驟讀取想要的點(diǎn)陣字庫

完成選擇后，字體就會正常導(dǎo)入到 FontForge 里面了。

打開的字庫

目前在 FontForge 中打開的字體包含了點(diǎn)陣和矢量兩部分，其實(shí)我們只需要點(diǎn)陣部分，所以要再做一次輸出，將其中的點(diǎn)陣字體庫輸出成 BDF 點(diǎn)陣字庫。

選擇 File | Generate Fonts… 然后按照如下的設(shè)置選擇“No Outline Font”以及“BDF”格式，點(diǎn)擊 Generate 就可以生成提取的點(diǎn)陣字庫了。

輸出點(diǎn)陣字庫

這個字庫會留著備用，但是如果您愿意的話可以用 FontForge 打開看一下，可以看到已經(jīng)只是點(diǎn)陣字體了。

得到的 16 點(diǎn)陣字庫

二、配置 Auto Trace

由于 FontForge 的自動矢量化插件并不是自帶的，所以我們要安裝第三方的插件，我們推薦的是 Potrace（應(yīng)該是效果最好的），在前面也提到過，安裝了 Potrace 之后要注意，需要設(shè)置 AUTOTRACE 的環(huán)境變量，以便 FontForge 能夠找到它。

Windows 下直接安裝即可，Mac 和 Linux 下如果沒有使用 port 等方式安裝的話，也就需要簡單手動處理下。下面就說一下我在 Mac 上的安裝過程。

1、下載并打開 Potrace 的包以后，將 potrace 和 mkbitmap 移到可以直接訪問的地方，個人建議是 /usr/local/bin

2、然后將 potrace 設(shè)置為 AUTOTRACE 的目標(biāo)

export AUTOTRACE=/usr/local/bin/potrace

3、另外，如果安裝了多個矢量化插件的話，為了確保使用 Potrace，我們還需要在 FontForge 中設(shè)置一下。選擇 File | Preferences 打開設(shè)置面板，選擇 Apps，將Prefer Potrace 設(shè)置為“On”

4、另外根據(jù)我在 Mac 下的經(jīng)驗(yàn)，由于是通過 X11 啟動的 FontForge，所以應(yīng)該先關(guān)閉 FontForge，通過 X11 的終端命令行執(zhí)行 export，然后再通過終端打開 FontForge，比如我這里是：

/Application

如果配置正確，那么 Autotrace 將在后面可以使用了，請看下一步。

三、準(zhǔn)備我們的新字庫

完成上面的準(zhǔn)備工作以后，我們可以再次打開 FontForge 了（配置好 potrace 后，Mac / Linux 通過命令行打開），然后按照以下步驟：

File | New，創(chuàng)建一個新字體；

選擇菜單：Encoding | Reencode | ISO 10646 (Unicode BMP)，此舉是因?yàn)樵谀J(rèn)設(shè)置情況下，新字體的編碼是ISO 8859-1 (Latin1)；

現(xiàn)在導(dǎo)入我們之前提取的 BDF 格式點(diǎn)陣字庫：File | Import。打開導(dǎo)入窗口之后不要著急導(dǎo)入，要記得如圖所示，將點(diǎn)陣字庫作為背景（Background）導(dǎo)入；

導(dǎo)入后，就會發(fā)現(xiàn)，有字體內(nèi)容的部分變了顏色，代表已經(jīng)成功導(dǎo)入到背景。雙擊某一個字，就可以打開該字的詳情窗口，我們可以在這里對字體進(jìn)行所有復(fù)雜的操作。接下來，我們就要通過導(dǎo)入的背景點(diǎn)陣圖來自動矢量化字體了。

四、正確的矢量化點(diǎn)陣如果配置正確，那么，在字體的 Element 菜單下的 Autotrace 功能應(yīng)該是可用了，我們在文字的窗口點(diǎn)擊Element | Autotrace，就會自動跟蹤出新的文字輪廓。不過，現(xiàn)在可能是這個樣子：

矢量化效果不盡如人意這根本不符合我們的要求，我們要的是點(diǎn)陣像素的風(fēng)格，而自動矢量化將其變成了平滑的曲線。這個問題看起來比較棘手，但是通過 Google，發(fā)現(xiàn)有人（Ben Morris）解決了這個問題：他將 potrace 更名為 potrace-bin，然后寫了一個名為 的腳本來作為矢量化入口。在這個 的腳本中，將位圖放大十倍，然后再跟蹤，最后再恢復(fù)回去，就可以得到漂亮的點(diǎn)陣文字了。[6]方法如下：1.將 potrace 更名為 potrace-bin；

2.創(chuàng)建 。 代碼如下：

# get the last parameter passed by fontforge - the name of the temp img file
for last; do true; done
# get all of the other parameters
length=$(($#-1))
array=${@:1:$length}
array="`echo "$array" | sed -E 's/ -r ([0-9]+)/ -r 10/g'`"
# get the size of the passed image
size=$(identify $last | grep -Eo "[0-9]+x[0-9]+" | head -1)
# multiply that size by 10
newsize=$(python -c "x = '$size'; print('x'.join([str(int(i)*10) for i in x.split('x')]))")
# scale up 10x and then use potrace to trace the pixelated outline
cat $last | mkbitmap -s 1 | convert -scale $newsize - - | potrace-bin -a 0 $array

（此段代碼有修正，原文地址在這里：）

注意：這段代碼針對 Mac 有修正，如果是其它系統(tǒng)下使用，需要將 grep -Eo 改為 grep -Po，sed -E 改為sed -r。

之后記得將 設(shè)為擁有可執(zhí)行權(quán)限。

chmod 0755

現(xiàn)在，再做一次 Element | Autotrace看看效果：

完美！

五、矢量化并輸出

接下來關(guān)閉文字窗口，在字體列表上用 Ctrl+A 選擇所有字體，然后選擇 Element | Autotrace，耐心的等待一會兒，全部字體就矢量化完成了。查看字體是否完成很容易，只要看看原來的空位上是否顯示出了文字輪廓就可以了。

矢量化全部字體中

生成的字體可能在某些地方有問題，比如缺少筆劃或者約束（Constrain）等等，根據(jù)需要自行調(diào)整一下即可。一般這些不完整的內(nèi)容會出現(xiàn)在英文部分以及最后的位置 65281 開始的漢字標(biāo)點(diǎn)符號處 [7]，而其它的漢字基本上均無問題?？傊?，后續(xù)還是需要少量的處理的，具體的看您的需要。

有錯過或者缺少的字

處理好這些有問題的字體以后，基本上就可以了，如果自己想要添加特別的符號或者漢字，也有大量的空位去做這些。

都處理完畢之后，就可以在 Element | Font Info…中定義字體的各個屬性，比如 Font Family，F(xiàn)ont Name 之類的。然后就可以輸出（File | Generate Fonts...）了。

如上圖所示，選擇“Ture Type”和“No Bitmap Fonts”，再Generate 就會生成新的點(diǎn)陣漢字轉(zhuǎn)換的 Ture Type 字體了。這個字體可以直接在 Unity 或者其它軟件中使用，甚至直接用做系統(tǒng)字體，永遠(yuǎn)表現(xiàn)為點(diǎn)陣字體。

5

結(jié)束語

本人并不是字體方面的專家，也沒有更多的研究過字體相關(guān)的內(nèi)容，所了解的都只是皮毛。本文的主要目的是提供大家提取和制作矢量點(diǎn)陣漢字的方法，所以文章之中有不恰當(dāng)?shù)牡胤綒g迎大家批評和指正。

另外我們在教學(xué)中所使用的文泉驛字體需要遵循 GPL 協(xié)議，所以對該字體進(jìn)行的修改以及衍生也要遵循 GPL 協(xié)議。另外有一款字體 FireFly（螢火飛）則是支持雙協(xié)議：GPL / APL [8]。請大家在使用的時候注意。另外在使用其它字體的時候也同樣要注意授權(quán)協(xié)議，以免侵害原版權(quán)方的合法權(quán)益。

6

參考

[1] The Birth of Digital Type

[2] Christoph Knoth, COMPUTED TYPE DESIGN, p.16。

[3] ，來自 WikiPedia

[4] ，來自 WikiPedia

[5]

[6] Ben Morris，MonsterFace Games: Creating a pixel font for your game。

[7] ，漢字標(biāo)點(diǎn)符號。

[8] “文泉驛”用戶常見問題解答。

詳細(xì)的資料地址，請點(diǎn)擊下方“閱讀原文”。