81 lines (57 loc) · 2.45 KB

使用图标字体生成字库

本文以 IcoMoon 提供的免费图标字体为例，讲解如何生成图标字库

首先下载Free Version的压缩包
从压缩包中提取如下文件：
- Font/IcoMoon-Free.ttf：图标字体文件
- Font/demo-files/demo.css：样式表文件，包含图标的Unicode值
打开.ttf文件，点击安装按钮，同时记录下字体名称IcoMoon-Free

打开.css文件，找到第一个和最后一个与如下格式类似的内容

 // 第一个
 .icon-home:before {
     content: "\e900";
 }

 // 最后一个
 .icon-IcoMoon:before {
     content: "\eaea";
 }

记录content后边的Unicode值，这里分别是e900和eaea

打开client/fonts/cst_generator.py，根据font_list的格式添加一个icomoon-free列表

 font_list = [
     # [
     # 	output_file_prefix,
     # 	charset_range,
     # 	fontface,
     # 	fontfile
     # ]
     ['open-iconic', range(0xe000, 0xe0de + 1), 'Icons', 'open-iconic.ttf'],
     ['emoticons21', range(0x20, 0x3f + 1), 'Emoticons21', 'emoticons21.fon'],
     ['icomoon-free', range(0xe900, 0xeaea + 1), 'IcoMoon-Free', 'icomoon-free.ttf']
 ]

运行cst_generator.py文件，并根据提示内容进行操作，最终生成icomoon-free.cst文件（字符映射表）
```
 $ cd client
 $ python fonts/cst_generator.py
```
运行命令行工具生成字库文件，其中IcoMoon-Free为安装.ttf文件时记录的字体名称
```
 $ FontMaker_Cli.exe -f IcoMoon-Free -s 16 --charset fonts/icomoon-free.cst -o icomoon-free.bin
```
以二进制方式打开刚刚生成的icomoon-free.bin文件，滚动条拉到文件中部，如果文件内容全部为00表示以上操作步骤中的某一步出现了问题，字库文件生成失败

使用FontLib获取字符点阵数据

 from libs.fontlib import FontLib

 fontlib = FontLib('client/icomoon-free.bin')
 fontlib.info()
 
 chars = '\ue977\ue9e9\ue978'
 buffer_dict = fontlib.get_characters(chars)

 for unicode, data in buffer_dict.items():
     print('{}: {}'.format(unicode, bytes(data)))

 for char in chars:
     print('{}: {}'.format(char, bytearray(buffer_dict[ord(char)])))

运行cst_generator.py文件同时会生成图标预览页面，可以使用预览方式选择图标

注：.fon文件无效