自制字图库流程

---

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文件时贴出代码）；
  

  css&fonts
  
  
  
  fonts下字图文件
  
  
• 打开 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";
}