設(shè)計(jì)師如何制作一套屬于自己字庫(kù) 手把手教你生成字庫(kù)教程

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

一、在AI上進(jìn)行字體設(shè)計(jì)

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

在準(zhǔn)備好上面的這個(gè)文字列表文件后,我們就可以開(kāi)始在AI中進(jìn)行字體設(shè)計(jì)了。在AI中進(jìn)行字體設(shè)計(jì)有兩種方式,第一種方式是每個(gè)字先建立好獨(dú)立的畫(huà)板進(jìn)行設(shè)計(jì),第二種方式是在一個(gè)畫(huà)板上先做好字體的設(shè)計(jì),然后再分割成多個(gè)畫(huà)板。下面以貓啃君正在補(bǔ)簡(jiǎn)的德拉黑體為例:

  1. 在AI中新建文件,新建文件時(shí)畫(huà)板的數(shù)量設(shè)置為100,列數(shù)設(shè)置為10。畫(huà)板的寬度和高度可以根據(jù)自己的需求設(shè)置,因?yàn)樽煮w是矢量的,所以在設(shè)計(jì)時(shí)的寬高并不會(huì)影響后續(xù)的導(dǎo)入。
  1. 點(diǎn)擊創(chuàng)建文檔,我們就可以得到一個(gè)10×10畫(huà)板的文件,然后我們就可以在這些畫(huà)板上進(jìn)行字體設(shè)計(jì)了。

  2. 把字體設(shè)計(jì)好后我們就可以開(kāi)展后續(xù)的工作了。

二、把字體制作成單獨(dú)的SVG文件

如何把每個(gè)字分割成單獨(dú)的svg文件呢?可以按以下的操作步驟進(jìn)行:

  1. 準(zhǔn)備好我們?cè)O(shè)計(jì)好的AI文件

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

  3. 在彈出的對(duì)話框中,按下面的圖進(jìn)行設(shè)置好后,然后點(diǎn)導(dǎo)出畫(huà)板按鈕。
  4. 耐心等待所有的畫(huà)板導(dǎo)出完成。
  5. 在導(dǎo)出的文件夾中,會(huì)自動(dòng)生成一個(gè)SVG文件夾,文件夾里面就是每個(gè)字的svg文件。
    至此,導(dǎo)出字體為svg文件的工作就完成了。下面準(zhǔn)備把這些svg文件導(dǎo)入到FontForge中并生成字庫(kù)文件。

三、把SVG文件導(dǎo)入至FontForge中并生成字庫(kù)文件

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

制作字庫(kù)需要用到FontForge軟件,請(qǐng)你點(diǎn)擊這里下載貓啃君為您準(zhǔn)備的FontForge軟件。請(qǐng)務(wù)必下載貓啃君提供的這個(gè)FontForge軟件,這個(gè)是非官方的64位綠色版。因?yàn)楣俜降陌姹居袀€(gè)問(wèn)題,就是打開(kāi)類(lèi)似于思源字體這樣大的字體文件的時(shí)候會(huì)因?yàn)閮?nèi)存溢出而崩潰,而這個(gè)64位的版本就不會(huì)有這個(gè)問(wèn)題。另外,在貓啃君提供的這個(gè)FontForge軟件里面還包含了@夜煞之樂(lè)寫(xiě)的批量導(dǎo)入字體文件的腳本,沒(méi)有這個(gè)就無(wú)法完成批量導(dǎo)入的功能。

下面我們可以開(kāi)始把svg文件導(dǎo)入到FontForge中了,請(qǐng)按以下的操作步驟進(jìn)行:

1、我們先把在貓啃網(wǎng)上下載的FontForge解壓出來(lái),這個(gè)FontForge是綠色版的,解壓出來(lái)就可以用了。比如貓啃君把FontForge解壓到D:\Program Files (x86)\FontForge_64目錄下。其中win_file_lister.exe是@夜煞之樂(lè)為方便生成字體文件列表寫(xiě)的一個(gè)可執(zhí)行程序,運(yùn)行后會(huì)把所在的文件夾的文件列表生成一個(gè)txt文件。vbpy.py是一個(gè)批量導(dǎo)入字體的python腳本文件。

2、把我們剛才生成的SVG文件夾復(fù)制到FontForge的目錄下

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

4、用記事本打開(kāi)file_list.txt文件,把里面的第一行刪掉

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

6、然后打開(kāi)Excel,在A列處粘貼

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

8、然后打開(kāi)之前準(zhǔn)備好的造字的順序的列表(貓啃君這里的示例的列表文件名為list.txt),按菜單 “編輯->全選”(快捷鍵Ctrl+A) 選中txt文件里面的所有行,Ctrl+C復(fù)制

9、然后在剛才打開(kāi)的Excel里面的B列處粘貼

10、然后把這個(gè)Excel表另存為csv格式,這樣我們就得到了一個(gè)svg文件與文字一一對(duì)應(yīng)的列表了。


11、然后我們把之前的字體列表文件(list.txt)也復(fù)制到FontForce目錄下

12、雙擊執(zhí)行fontforge-console.bat文件,會(huì)打開(kāi)一個(gè)命令行界面

13、在這個(gè)命令行界面輸入“ffpython vbpy.py -n SVG new.sfd font_list.csv”然后按回車(chē)鍵執(zhí)行命令。

14、然后等待命令執(zhí)行完畢,就大功告成啦!這樣我們就得到new.sfd字庫(kù)文件。

15、最后我們打開(kāi)這個(gè)sfd文件看一下,完成啦。字庫(kù)的一些信息的設(shè)置,請(qǐng)參考貓啃君之前發(fā)表的另一篇文章《小白教程,如何使用FontForge修改字體的名稱?

發(fā)表評(píng)論 搶沙發(fā)

取消
  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網(wǎng)址

5 條評(píng)論

  1. 造字的順序的列表的那個(gè).txet的記事本文件有下載碼

    張偉4年前 (08-03) 回復(fù)
    #0
  2. list.txt 這個(gè)文件 順序這個(gè)有下載嗎

    張偉4年前 (08-03) 回復(fù)
    #1
    • 按自己的需要自己編寫(xiě)就行了哦~示例用的排序是按 GB 2312 截取缺字部分,您可以參考 GB 2312 看看哦

      夜煞之樂(lè)4年前 (08-04) 回復(fù)
  3. 感謝作者的知識(shí)分享,多多益善喔?。。?/p>

    天王大哥4年前 (07-01) 回復(fù)
    #3
  4. 厲害厲害!~

    東東4年前 (06-12) 回復(fù)
    #4