相信有不少設(shè)計(jì)師朋友想把自己設(shè)計(jì)的字體制作成屬于自己的字庫，但是都面臨不會(huì)使用字體制作軟件的難題。現(xiàn)在市面上流行的字庫制作軟件有FontForge(免費(fèi))，F(xiàn)ontCreator(收費(fèi))，F(xiàn)ontLab等，但是一般設(shè)計(jì)師對(duì)這些字體制作軟件不太熟悉，所以操作起來也是相當(dāng)不順手。相對(duì)而言，Adobe Illustrator的路徑操作就順手多了。所以貓啃君寫這一篇教程，教你怎樣把在Illustrator設(shè)計(jì)的字體變成字庫。

一、前期工作

在開始設(shè)計(jì)你的字體之前，請(qǐng)先準(zhǔn)備一個(gè)文字列表的txt文件，您必須按照這個(gè)順序進(jìn)行字體設(shè)計(jì)制作。這個(gè)txt的列表文件將在后面導(dǎo)入生成字庫的時(shí)候用到，先務(wù)必準(zhǔn)備好。貓啃君這里把文字列表文件命名為 list.txt。

在準(zhǔn)備好上面的這個(gè)文字列表文件后，我們就可以開始在AI中進(jìn)行字體設(shè)計(jì)了。

二、在Ai里進(jìn)行字體設(shè)計(jì)

我們接接下來在 Adobe Illustrator 中開始做前期準(zhǔn)備工作，這樣可以方便我們接下來的步驟流程。

【注意：Adobe Illustrator 一個(gè)文檔最多只支援 1000 個(gè)畫板?！?

二．一、正確準(zhǔn)備畫板

為了方便后續(xù)把每個(gè)字形切割成單獨(dú)的 SVG 文件，我們首先需要準(zhǔn)備好 Ai 的畫板功能。

首先確認(rèn)需要?jiǎng)?chuàng)建的畫板數(shù)量，此處用100個(gè)。因?yàn)槭窍蛄课募嫲宕笮∈强梢噪S需求設(shè)置，這邊建議的畫板大小是 1000 px × 1000 px，也貼近一般字體設(shè)計(jì)使用的單位大?。蝗绻嫲逄?1 cm × 1 cm 或者 100 px × 100 px 也可以。

滾動(dòng)下去看到 More Settings，打開來看確認(rèn)畫板方向是從左到右，上到下（呈Z形）即可。這里你也可以調(diào)整畫板之間的間距，設(shè)置為 0 的話畫板之間就會(huì)完美貼合。

點(diǎn)擊 Create/Create Document，就會(huì)創(chuàng)建畫板了。

接下來，我們?cè)诶锩娈嬌纤{(lán)色的框。畫板的邊緣代表了字身框，字體要設(shè)計(jì)在這個(gè)框以內(nèi)，不能超出這個(gè)框的范圍。藍(lán)色的框代表了字面框，把字體的大小限制在字面框內(nèi)，這樣字與字之間就不會(huì)粘連在一起。

貓啃君這里也在背景加上了中分的紅色虛線。加上剛剛繪畫的藍(lán)色格，這像不像我們學(xué)寫字的時(shí)候的田字簿？這個(gè)田字格的大小可以按照你自己的實(shí)際需要進(jìn)行設(shè)計(jì)調(diào)整。

這里需要注意：字面框（藍(lán)色的）應(yīng)該占據(jù)字身框（畫板）至少 90%，這樣導(dǎo)出時(shí)字和字之間不會(huì)出現(xiàn)太大的空虛。

參考剛剛畫上的框，就能開始設(shè)計(jì)字體了。

二．二、導(dǎo)出 SVG

已經(jīng)畫完字了，接下來就是把字導(dǎo)出 Ai 準(zhǔn)備做成字體了。

1、把之前制作的田字格隱藏或者刪掉，避免在導(dǎo)入字體的時(shí)候出現(xiàn)這些田字格。

刪掉之后的狀態(tài)是這樣子的

如果有參考用的背景圖片，也把他們隱藏。

2、在菜單上選擇 “文件 -> 導(dǎo)出 -> 導(dǎo)出為多種屏幕所用格式…”

3、在彈出的對(duì)話框中，直接 Ctrl+A 全選畫板。確保這里數(shù)字的順序和之前的 txt 里面的順序一樣后，就可以導(dǎo)出全部畫板了。

4、耐心等待所有的畫板導(dǎo)出完成。

5、在導(dǎo)出的文件夾中，會(huì)自動(dòng)生成一個(gè)SVG文件夾，文件夾里面就是每個(gè)字的svg文件。

三、在Ai里用一個(gè)（?。┊嫲暹M(jìn)行字體設(shè)計(jì)

三．一、我不想用一堆畫板啊…

如果已經(jīng)在一個(gè)畫板里面畫好了字形，怎么辦？

我們可以在AI中制作好田字格以實(shí)現(xiàn)每個(gè)字體的大小統(tǒng)一，也方便接下來切割畫板時(shí)有一個(gè)可以對(duì)照的參考線。

下面以貓啃君正在補(bǔ)簡(jiǎn)的德拉黑體為例：

貓啃君在AI文件中制作了這樣的一個(gè)表格，也和步驟二一樣加上了田字格背景。因?yàn)槭鞘噶课募?，所以在AI中設(shè)計(jì)的大小并不會(huì)影響實(shí)際制作的字庫的字體大小，此處貓啃君用的是 1000×1010px（實(shí)際如果制作漢字只需要方形 1000×1000px）。

然后在這個(gè)表格的基礎(chǔ)上進(jìn)行字體設(shè)計(jì)，紅色紅框是代表了字身框，字體要設(shè)計(jì)在這個(gè)框以內(nèi)，不能超出這個(gè)框的范圍。藍(lán)色的框代表了字面框，把字體的大小限制在字面框內(nèi)，這樣字與字之間就不會(huì)粘連在一起。

這里需要和步驟二一樣要注意：字面框（藍(lán)色的）應(yīng)該占據(jù)字身框（紅色的）的至少 90%，這樣導(dǎo)出時(shí)字和字之間不會(huì)出現(xiàn)太大的空位。

三．二、切割畫板和導(dǎo)出 SVG

繼三．一，在一個(gè)畫板上該把每個(gè)字分割成單獨(dú)的svg文件呢？可以按以下的操作步驟切割畫板：

1、畫一個(gè)白色的矩形框把設(shè)計(jì)好的文字全部蓋住

2、選中遮蓋的白色矩形框，然后在菜單上選擇 “對(duì)象 -> 路徑 -> 分割成網(wǎng)格”

3、在彈出的對(duì)話框中填入行數(shù)與列數(shù)。以貓啃君做的字體為例，我做的畫板的寬和高是1010px * 1000px，分成了10行和10列。所以我在對(duì)話框中的行數(shù)量與列數(shù)量均填入10，其它的字段就會(huì)自動(dòng)計(jì)算出來。

4、點(diǎn)擊“確定”后，畫板將會(huì)變成下面這個(gè)樣子。

5、然后在菜單上選擇 “對(duì)象 -> 畫板 -> 轉(zhuǎn)換為畫板”，AI就會(huì)把字體分割成多個(gè)畫板了。

完成上面的切割之后，接下來就是準(zhǔn)備導(dǎo)出 SVG 了。

1、把之前制作的田字格隱藏或者刪掉，避免在導(dǎo)入字體的時(shí)候出現(xiàn)這些田字格。

刪掉之后的狀態(tài)是這樣子的

如果有參考用的背景圖片，也把他們隱藏。

2、在菜單上選擇 “文件 -> 導(dǎo)出 -> 導(dǎo)出為多種屏幕所用格式…”

3、在彈出的對(duì)話框中，取消第一個(gè)畫板的選中狀態(tài)，范圍第二個(gè)畫板開始導(dǎo)出畫板。

4、耐心等待所有的畫板導(dǎo)出完成。

5、在導(dǎo)出的文件夾中，會(huì)自動(dòng)生成一個(gè)SVG文件夾，文件夾里面就是每個(gè)字的svg文件。

至此，導(dǎo)出字體為svg文件的工作就完成了。

四、準(zhǔn)備 CSV 文件

通過上面的操作步驟，我們已經(jīng)得到單獨(dú)的字體的 SVG 文件。但是現(xiàn)在存在一個(gè)問題，這些SVG 文件的名字都是“畫板 1.svg，畫板 2.svg…”這樣子的名稱，我們無法得知這些 SVG 文件對(duì)應(yīng)的是哪個(gè)字。這個(gè)時(shí)候，我們之前準(zhǔn)備好的字體列表文件就有用了。

我們接下來需要準(zhǔn)備一個(gè) CSV 文件。CSV 文件本質(zhì)上就是一個(gè)文本文件，只是里面用逗號(hào)分隔不同欄的資料。這邊我們需要準(zhǔn)備的內(nèi)容格式參考如下：

畫板 1.svg,字
畫板 2.svg,uni5B57
畫板 3.svg,u5B57
D:\Artboard\SVG\畫板 4.svg,A
D:\Artboard\SVG\畫板 5.svg,uni0041

逗號(hào)前面是SVG文件名（可以是文件名或者完整路徑），后面是對(duì)應(yīng)的字符或漢字。這邊字符可以直接輸入漢字、標(biāo)點(diǎn)符號(hào)、字母等單個(gè)字符，或者提供 Unicode 碼位（用 uXXXX 或 uniXXXX 格式）。

接下來貓啃君示范使用 Excel 制作 CSV 文件的快速方法。當(dāng)然，我們首先還是需要 SVG 文件夾內(nèi)的所有文件名，所以貓啃君接下來給三個(gè)方法

方法一：直接復(fù)制

1、在 SVG 文件夾里，選擇第一個(gè)文件（要不然順序會(huì)亂）

2、選擇右上的“全選”（或快捷鍵 Ctrl+A）

3、按住 Shift 右鍵，選擇“復(fù)制為路徑”（Copy as path），就能復(fù)制全部文件的完整路徑

4、打開Excel，在A列處粘貼即可

（軟件可以接受完整路徑，但是如果你不喜歡可以搜索替換前半部的文件夾路徑）

方法二：用 VS Code

VS Code 是現(xiàn)代編程猿人手必備的編程工具，里面的功能十分齊全，日常使用完全可以替代掉Windows 內(nèi)建的Notepad了。這里我們使用了 VS Code 的特性：如果復(fù)制了文件后在 VS Code 內(nèi)粘貼，VS Code會(huì)粘貼文件名，而不像 Notepad 里完全不可以粘貼。您可在 https://code.visualstudio.com/ 下載 VS Code。

1、在 SVG 文件夾里，選擇第一個(gè)文件（要不然順序會(huì)亂）

2、選擇右上的“全選”（或快捷鍵 Ctrl+A）

3、右鍵選擇復(fù)制（快捷鍵 Ctrl+C）

4、打開 VS Code粘貼，就能看到全部文件名了

5、全選（Ctrl+A） VS Code 內(nèi)的文件名，復(fù)制，打開 Excel 在A列處粘貼即可

方法三：用夜煞之樂寫的軟件

如果你的系統(tǒng)是 Windows XP 右鍵沒有“復(fù)制為路徑”，也沒辦法使用 VS Code，這邊@夜煞之樂寫了一個(gè)軟件 win_file_lister.exe 可以把所在的文件夾的文件列表生成一個(gè) txt 文件。這樣生成完畢后，只需要復(fù)制 txt 的內(nèi)容進(jìn)去 Excel 就可以啦！你可以點(diǎn)擊這里下載win_file_lister.exe。

1、把win_file_lister.exe復(fù)制放入SVG文件夾里，然后雙擊運(yùn)行。

2、用記事本打開file_list.txt文件，把里面的 win_file_lister.exe 一行刪掉

3、然后按菜單 “編輯->全選”(快捷鍵Ctrl+A) 選中txt文件里面的所有行，Ctrl+C復(fù)制

4、打開Excel，在A列處粘貼

5、然后我們回到SVG文件夾里面，把file_list.txt和win_file_lister.exe這兩個(gè)文件刪除。

把文字搬進(jìn) Excel 內(nèi)

現(xiàn)在打開之前準(zhǔn)備好的造字的順序的列表（貓啃君這里的示例的列表文件名為list.txt）

1、按菜單 “編輯→全選”(快捷鍵Ctrl+A) 選中txt文件里面的所有行，Ctrl+C復(fù)制

2、然后在剛才打開的Excel里面的B列處粘貼，顯示應(yīng)該類似下面

3、最后把這個(gè)Excel表另存為 CSV 格式（注意選 CSV UTF-8（逗號(hào)分隔）），這樣我們就得到了一個(gè) SVG 文件與文字一一對(duì)應(yīng)的列表了。

五、制作字體啦～

完成了上面幾個(gè)步驟后，我們已經(jīng)有一個(gè)保存所有 SVG 圖片的文件夾，以及把 SVG 對(duì)應(yīng)字符的 CSV 文件。

接下來，我們可以下載@夜煞之樂寫的全新軟件：SVG2FontBuilder?；蛘呱显撥浖拿赓M(fèi)開源項(xiàng)目地址進(jìn)行下載：https://github.com/NightFurySL2001/SVG2FontBuilder/releases/latest，這個(gè)軟件可以把一堆 SVG 文件按照 CSV 的內(nèi)容格式批量轉(zhuǎn)換成完整的字體，而里面也提供了設(shè)置基本字體信息和參數(shù)的界面，非常適合小白上手。

P/S：貓啃君之前也讓@夜煞之樂寫了一個(gè)非常基本的 FontForge 導(dǎo)入工具，原理和這個(gè)文章大致相同，但是實(shí)際制作的工具略有差異，有興趣想要自行編程 Python 的朋友可以參考這個(gè)文章噢~

請(qǐng)你點(diǎn)擊這里下載貓啃君為您準(zhǔn)備的 SVG2FontBuilder 軟件。

解壓縮文件夾后運(yùn)行里面的 svgbuilder.exe，就能看到下面的界面。

1、單擊第一個(gè)“SVG 文件夾”右邊的“選擇…”按鈕，選擇前面步驟二或三的 SVG 文件夾。

2、單擊第二個(gè)“CSV 映射表”右邊的“選擇…”按鈕，選擇前面步驟四的 CSV 文件。

3、完成后，界面應(yīng)該會(huì)顯示選擇的完整路徑

4、點(diǎn)擊下面的“生成”按鈕，選擇要導(dǎo)出字體的位置，保存即可

5、等待界面轉(zhuǎn)了一下后，下方和“記錄”會(huì)提示已成功導(dǎo)出和文件路徑，你的字體就完成制作啦～

當(dāng)然，這個(gè)字體是最最最基礎(chǔ)的字體而已，多數(shù)情況下你還是需要使用字體編輯軟件進(jìn)行后續(xù)操作，例如合并輪廓避免出現(xiàn)筆畫交叉反白的情況。

如果你有時(shí)間閑情把SVG的文件名設(shè)置成對(duì)應(yīng)的字符的話（比如“字.svg”、“uni4E00.svg”），那么你可以跳過上面的第四步：準(zhǔn)備 CSV 文件。只需要把文件名改好后，在軟件界面內(nèi)選擇“使用文件名自動(dòng)辨識(shí) Unicode 碼位”，軟件就會(huì)根據(jù)文件名自動(dòng)對(duì)應(yīng)字符了。

左上角的漢堡按鈕可以展示更多選項(xiàng)，這里可以在“字體信息”里添加中文名后，設(shè)置中文字體名。

設(shè)置內(nèi)可以調(diào)整軟件語言和界面主題，另外也有一些特別參數(shù)，可以參考 GitHub 倉庫閱讀更詳細(xì)的說明。

如果出現(xiàn)錯(cuò)誤，有幾個(gè)方向可以排查：

1、如果是 Adobe Illustrator，請(qǐng)確保你使用的是“導(dǎo)出”功能而不是“保存”功能。保存功能有機(jī)率出現(xiàn)問題，我們強(qiáng)烈建議使用“導(dǎo)出”功能。

2、確保導(dǎo)出 SVG 時(shí)畫板上只有你要導(dǎo)出的東西，不要有任何其他的文字或者背景圖片，軟件都不支援且有機(jī)率報(bào)錯(cuò)。

3、如果您第四步使用的是 WPS 而不是 Microsoft Excel，您導(dǎo)出的 CSV 文件可能會(huì)有編碼問題。請(qǐng)用Notepad打開CSV文件后選擇“文件→另存為”，右下的“編碼”請(qǐng)選擇“UTF-8”。