title: 自制字图库流程
date: 2017-05-11
- 知识总结
- 字图库
本文主要介绍如何自制字图库
准备
FontCreator.exe
- 一个强大的字体编辑软件；
- 位置(svn)，山东公司\4 开发管理\01 开发资料\开发工具；
- 对于我们自制的字图库来说，只支持打开ttf、otf、woff格式的字图文件和fcp格式的项目文件，生成otf、woff格式的字图文件和fcp格式的项目文件。
everythingfonts
- 用这个网站来转换文件格式;
- 地址，https://everythingfonts.com/；
icomoon.io
- 一个矢量图标素材分享网站，这个网站可以在线简单的编辑字图文件(放大，移动，旋转)；
- 网站编辑字图功能地址，https://icomoon.io/app/#/select；
制作
字图资源
- 打开 icomoon.io （这里icomoon.io提供了一套free的字图资源）；
icomoon -
导入本地的字图资源（只支持svg格式，导入后修改不会影响源文件，以team-build为例，路径：team-build\static\fonts）；
import -
点击‘select’，选择好要使用的字图资源（每个资源都是展开状态保证能够从多个资源文件多选）；
export1.png -
设置导出设置；导出到本地，解压；
export2
生成字图工程
-
style.css文件放到web项目的css文件夹下（代码文件注意引用css），或者直接将style.css文件内容复制到已经被引用的其它css文件里（这里是将内容复制到了beyond.css文件里，具体将在下面编辑css文件时贴出代码）；
<center>
css&fonts
</center>
<center>fonts下字图文件
</center> - 打开 FontCreator ；
-
‘打开’ 刚下载的fonts文件夹下的文件（ttf/woff格式）；
fontcreator - 双击需要细致修改的图片进行修改（功能按钮有汉语提示，软件学习自行百度）；
-
字图关联css，调整字形列表的标题，代码点展示；如果需要则修改代码点（比如FontCreator上的某个字图代码点显示：‘$E900’，在web项目里全局搜索‘\e900’，看是否已经被占用）；
unicode -
保存，会新建一个字图工程文件（fcp格式，保存了之后再导出）；
save
字体文件格式转换
- ‘导出’，导出文件格式（选择otf、woff都可以，给导出文件编辑一个名字保证不重名）；
-
打开everythingfonts，选择转换器；converter1
-
转换出ttf和eot格式文件（适应浏览器参见图）；
converter2
字图库使用
- 将ttf和eot格式文件放到web项目的fonts文件夹下，编辑css相关类，就可以使用这套组图库了；
- 编辑css代码：
@font-face {
font-family: 'HdFontIcon'; /* 在icomoon.io保存设置时自定义 */
src: url('../fonts/HdFontIcon.eot'); /* IE9*/
src: url('../fonts/HdFontIcon.ttf') format('truetype');/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
/* 对其他浏览器、版本的支持，修改时注意结尾标点符号 */
/*url('iconfont.eot?t=1494406771826#iefix') format('embedded-opentype'), /* IE6-IE8 */*/
/*url('iconfont.woff?t=1494406771826') format('woff'), /* chrome, firefox */*/
/*url('iconfont.svg?t=1494406771826#iconfont') format('svg'), /* iOS 4.1- */*/
font-weight: normal;
font-style: normal;
}
.hd-icon { /* 在icomoon.io保存设置时自定义 */
font-family: 'HdFontIcon' !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* 后边的属性及值可以自定义，这里只是给出示例 */
/* speak: none; */
/* font-weight: 400; */
/* font-variant: normal; */
/* text-transform: none; */
/* line-height: 1; */
/* vertical-align: baseline; */
/* display: inline-block; */
}
.hd-plus:before { /* 自定义 类名 */
content: "\e900"; /* 注意匹配字图的代码点 */
}
.hd-pencil:before {
content: "\e901";
}
.hd-search:before {
content: "\e902";
}
.hd-th-list:before {
content: "\e903";
}
