iconfont实操

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！