iconfont实操

E0c987d94d37f5d19f5b6c4fedff65e0?s=47 三 桂
March 31, 2014

 iconfont实操

从准备工作、制作流程、字体使用、应用案例、存在问题等全方位讲解iconfont在实际项目中的实践。

E0c987d94d37f5d19f5b6c4fedff65e0?s=128

三 桂

March 31, 2014
Tweet

Transcript

  1. iconfont实操 Samgui @ 2013.11.08 操

  2. 目录  准备工作  制作流程  字体使用  应用案例 

    存在问题  总结
  3. 准备工作  沟通  工具

  4. 沟通 提前跟产品侧及设计侧进行沟通,表明这么做的好处以及存在的问题, 确定这件事值得做! 新淘宝首页设计创新点 http://samgui.com/slides/taobao_new_homepage.html

  5. 工具 制作过程涉及以下工具:  Photoshop  Illustrator  Fontcreator  Fontsquirrel

    Fontsquirrel http://www.fontsquirrel.com/tools/webfont-generator
  6. 制作流程 是否开源字体 是否有4种格式 设计是否矢量图? 转换成矢量图 复制图层粘贴到AI 复制形状粘贴到 Fontcreator 调整baseline等 导出.ttf格式

    生成其他格式 Fontsquirrel 写一大坨CSS DONE!
  7. Photoshop 在Photoshop图层面版直接拷贝图标图层,可以是以下格式:  形状  矢量智能对象 直接拷贝图层 双击进入Illustrator

  8. Illustrator Photoshop形状 将在Photoshop中复制的形状粘贴到Illustrator,并填充任意颜色,然后 复制到Fontcreator字体单元。

  9. Illustrator Photoshop矢量智能对象 将在Photoshop中复制的矢量智能对象粘贴到Illustrator,第一步先进行 扩展(菜单栏》对象》扩展),然后再按Shift+Ctrl+F9调出”路径查找 器”合并形状,最后复制形状到Fontcreator字体单元。

  10. Fontcreator 将在Illustrator中复制的形状粘贴到Fontcreator字体单元中,然后双击字 体进入字体编辑界面,调整好细节之后导出为.ttf文件。 上边界 下边界 基线 字符左右间距

  11. Fontsquirrel 将在Fontcreator中导出的.ttf文件上传到Fontsquirrel并导出其他几种字 体格式文件,至此字体制作完成。

  12. 字体使用  设置@font-face  使用方法

  13. 设置@font-face @font-face { font-family: iconfont; src: url(' iconfont.eot'); /* IE9*/

    src: url(' iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url(' iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */ url(' iconfont.woff') format('woff'), /* chrome 6+、firefox 3.6+、Safari5.1+、Opera 11+ */ url(' iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ font-weight: normal; font-style: normal; } http://stackoverflow.com/questions/8050640/how-does-iefix-solve-web-fonts-loading-in-ie6-ie8 http://www.fluorcow.com/embedding-fonts-on-a-website
  14. 使用方法 .iconfont { font-family: iconfont; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:

    grayscale; } <i class=''iconfont''>&#61564</i> 注:View 》Display format 》Decimal 对应编码
  15. 应用案例 我要买 卖家数据中心 QQ网购 http://www.wanggou.com/search/category.shtml icon font大搜罗 http://www.qianduan.net/icon-font-large-collecting.html

  16. 存在问题  IE7、8下渲染存在锯齿;  IE9字体闪烁,渲染有延迟;  用户自定义浏览器字体覆盖(无解);  字体跨域(配置静态服务器允许指定域名跨域请求); 

    字体文件过大(配置Web服务器Gzip压缩);  字体下载出错(通过Javascript重新声明自定义字体);  其他未知原因(浏览器自己的缺陷如IE7)。 网易字体异常帮助页 http://help.163.com/12/0815/15/88V6929T00753VB8.html
  17. 总结 沟通 看应用场景是否合适,提前跟产品以及设计沟通 工具 寻求更好的工具,尽量做到自动化 流程 尽量简化流程,减少制作和维护成本 容错 渲染失败的容错方案

  18. THANKS!