[{"data":1,"prerenderedAt":231},["ShallowReactive",2],{"article-使用fontello和Abobe Illustrator制作自己的web字体":3},{"title":4,"article":5,"hot_article":17,"month_arch":80,"cover":228},"使用fontello和Abobe Illustrator制作自己的web字体 - 独孤影的博客",{"id":6,"title":7,"uri":7,"author":8,"tags":9,"created_at":14,"view_count":15,"content":16},23,"使用fontello和Abobe Illustrator制作自己的web字体","duguying",[10,11,12,13],"fontello","Illustrator","web","字体","2014-12-11 10:48:30",6758,"\u003Cp>自定义web字体流行已经不是一天两天的事了，仿佛是随着google，ajax，web2.0这些字眼在多年前就已经到来了，不过如今却是越加流行了。用自定义字体代替图片图标确实有着不少好处，比如，字体是矢量的可以无限放大，字体可以随意的改变颜色只需在css中设置color属性即可。最近发现了一个在线字体生成工具很是不错，那就是\u003Ca href=\"http:\u002F\u002Ffontello.com\u002F\" target=\"_blank\" title=\"http:\u002F\u002Ffontello.com\u002F\">fontello\u003C\u002Fa>。\u003C\u002Fp>\u003Cp>fontello提供众多图标供用户定制选择，并且用户还可以上传自己设计的svg图标文件，fontello会将其转化打包为字体文件fontello.eot、fontello.svg、fontello.ttf以及fontello.woff，供不同的浏览器调用，它在浏览器中的调用方式和众多的图标字体的调用方式是一样的——通过css调用，或者说通过指定class值的html节点调用，相信所有人都会使用，如果不会，自己查看打包目录下的demo.html文件就会了。\u003C\u002Fp>\u003Cp>\u003Cem>\u003Cstrong>字体设计：\u003C\u002Fstrong>\u003C\u002Fem>\u003C\u002Fp>\u003Cp>首先打开Illustrator，通过性状工具以及钢笔工具勾勒出你所需要的图形，然后转化为复合路径(对象>复合路径>建立)，然后保存为svg配置文件SVG 1.1，即可生成svg文件。\u003C\u002Fp>\u003Cp>\u003Cimg src=\"\u002F\u002Fduguying.oss-cn-qingdao.aliyuncs.com\u002F2014\u002F12\u002F11\u002Fillustrator_demo.png\" title=\"\" alt=\"illustrator_demo.png\"\u002F>\u003C\u002Fp>\u003Cp>然后，在fontello页面的custom区域拖拽上传svg文件便会生成自定义的字体文字(或者说是图标)，选中它，以及你所需要的图标，点击download便可以打包字体文件。\u003C\u002Fp>\u003Cp>\u003Cimg src=\"\u002F\u002Fduguying.oss-cn-qingdao.aliyuncs.com\u002F2014\u002F12\u002F11\u002Ffontello.png\" title=\"\" alt=\"fontello.png\"\u002F>\u003C\u002Fp>\u003Cp>使用字体图标的好处就不在赘述了。在Illustrator中设计图标时无需在意图标的颜色，因为对于字体来说是没有颜色的，只有形状，这也是在Illustrator中将其转换为复合路径的原因。另外需要注意的是在Illustrator中绘制路径的话要保证路径是闭合的，不然无法形成形状，在导入fontello后便会发现图标是空白的，假如你发现自己的图标是空白的或者是全黑的，那么建议你先学习一下Illustrator的使用以及路径和性状这些概念再来设计图标。\u003C\u002Fp>",{"title":18,"list":19},"最热文章",[20,26,32,38,44,50,56,62,68,74],{"id":21,"title":22,"uri":23,"author":8,"created_at":24,"view_count":25},28,"docker容器目录与主机目录同步","\u002Farticle\u002Fdocker容器目录与主机目录同步","2014-12-31 12:34:08",15573,{"id":27,"title":28,"uri":29,"author":8,"created_at":30,"view_count":31},21,"beego中使用fis","\u002Farticle\u002Fbeego中使用fis","2014-12-03 10:47:56",9253,{"id":33,"title":34,"uri":35,"author":8,"created_at":36,"view_count":37},20,"用github登录，oauth开发","\u002Farticle\u002F用github登录，oauth开发","2014-11-23 13:33:37",9115,{"id":39,"title":40,"uri":41,"author":8,"created_at":42,"view_count":43},18,"windows服务注册工具nssm","\u002Farticle\u002Fwindows服务注册工具nssm","2014-10-31 21:34:39",9054,{"id":45,"title":46,"uri":47,"author":8,"created_at":48,"view_count":49},49,"用latex排版中文书籍","\u002Farticle\u002F用latex排版中文书籍","2016-10-31 11:12:02",8645,{"id":51,"title":52,"uri":53,"author":8,"created_at":54,"view_count":55},19,"texlive中文书签乱码","\u002Farticle\u002Ftexlive中文书签乱码","2014-11-15 02:54:01",8466,{"id":57,"title":58,"uri":59,"author":8,"created_at":60,"view_count":61},6,"Windows上的软件包管理器chocolatey","\u002Farticle\u002FWindows上的软件包管理器chocolatey","2014-08-10 15:55:22",8012,{"id":63,"title":64,"uri":65,"author":8,"created_at":66,"view_count":67},3,"利用开源和免费资源搭建CI环境","\u002Farticle\u002F利用开源和免费资源搭建CI环境","2014-07-04 16:54:58",7740,{"id":69,"title":70,"uri":71,"author":8,"created_at":72,"view_count":73},16,"php-fpm网站目录权限配置","\u002Farticle\u002Fphp-fpm网站目录权限配置","2014-10-18 01:36:10",7276,{"id":75,"title":76,"uri":77,"author":8,"created_at":78,"view_count":79},27,"sublime text 2插件开发，外部修改文件无法重新加载","\u002Farticle\u002Fsublime text 2插件开发，外部修改文件无法重新加载","2014-12-26 20:24:13",7055,{"title":81,"list":82},"按月归档",[83,87,90,93,96,99,102,106,110,113,116,119,123,126,129,133,136,139,142,146,149,152,155,158,161,164,167,170,173,176,179,182,185,188,191,194,197,200,203,206,210,213,216,219,222,225],{"title":84,"uri":85,"view_count":86},"2026年7月","\u002Farchive\u002F2026\u002F7\u002F1","[1]",{"title":88,"uri":89,"view_count":86},"2026年1月","\u002Farchive\u002F2026\u002F1\u002F1",{"title":91,"uri":92,"view_count":86},"2025年4月","\u002Farchive\u002F2025\u002F4\u002F1",{"title":94,"uri":95,"view_count":86},"2024年6月","\u002Farchive\u002F2024\u002F6\u002F1",{"title":97,"uri":98,"view_count":86},"2024年5月","\u002Farchive\u002F2024\u002F5\u002F1",{"title":100,"uri":101,"view_count":86},"2024年4月","\u002Farchive\u002F2024\u002F4\u002F1",{"title":103,"uri":104,"view_count":105},"2023年12月","\u002Farchive\u002F2023\u002F12\u002F1","[6]",{"title":107,"uri":108,"view_count":109},"2023年11月","\u002Farchive\u002F2023\u002F11\u002F1","[2]",{"title":111,"uri":112,"view_count":86},"2023年10月","\u002Farchive\u002F2023\u002F10\u002F1",{"title":114,"uri":115,"view_count":86},"2023年7月","\u002Farchive\u002F2023\u002F7\u002F1",{"title":117,"uri":118,"view_count":109},"2023年6月","\u002Farchive\u002F2023\u002F6\u002F1",{"title":120,"uri":121,"view_count":122},"2023年5月","\u002Farchive\u002F2023\u002F5\u002F1","[3]",{"title":124,"uri":125,"view_count":109},"2023年4月","\u002Farchive\u002F2023\u002F4\u002F1",{"title":127,"uri":128,"view_count":109},"2023年3月","\u002Farchive\u002F2023\u002F3\u002F1",{"title":130,"uri":131,"view_count":132},"2023年2月","\u002Farchive\u002F2023\u002F2\u002F1","[5]",{"title":134,"uri":135,"view_count":86},"2023年1月","\u002Farchive\u002F2023\u002F1\u002F1",{"title":137,"uri":138,"view_count":109},"2022年12月","\u002Farchive\u002F2022\u002F12\u002F1",{"title":140,"uri":141,"view_count":132},"2022年11月","\u002Farchive\u002F2022\u002F11\u002F1",{"title":143,"uri":144,"view_count":145},"2022年10月","\u002Farchive\u002F2022\u002F10\u002F1","[4]",{"title":147,"uri":148,"view_count":105},"2022年9月","\u002Farchive\u002F2022\u002F9\u002F1",{"title":150,"uri":151,"view_count":132},"2022年8月","\u002Farchive\u002F2022\u002F8\u002F1",{"title":153,"uri":154,"view_count":86},"2019年7月","\u002Farchive\u002F2019\u002F7\u002F1",{"title":156,"uri":157,"view_count":86},"2019年2月","\u002Farchive\u002F2019\u002F2\u002F1",{"title":159,"uri":160,"view_count":86},"2018年9月","\u002Farchive\u002F2018\u002F9\u002F1",{"title":162,"uri":163,"view_count":86},"2018年8月","\u002Farchive\u002F2018\u002F8\u002F1",{"title":165,"uri":166,"view_count":86},"2017年11月","\u002Farchive\u002F2017\u002F11\u002F1",{"title":168,"uri":169,"view_count":86},"2017年8月","\u002Farchive\u002F2017\u002F8\u002F1",{"title":171,"uri":172,"view_count":86},"2017年5月","\u002Farchive\u002F2017\u002F5\u002F1",{"title":174,"uri":175,"view_count":86},"2017年4月","\u002Farchive\u002F2017\u002F4\u002F1",{"title":177,"uri":178,"view_count":86},"2016年11月","\u002Farchive\u002F2016\u002F11\u002F1",{"title":180,"uri":181,"view_count":86},"2016年10月","\u002Farchive\u002F2016\u002F10\u002F1",{"title":183,"uri":184,"view_count":109},"2016年9月","\u002Farchive\u002F2016\u002F9\u002F1",{"title":186,"uri":187,"view_count":86},"2016年8月","\u002Farchive\u002F2016\u002F8\u002F1",{"title":189,"uri":190,"view_count":109},"2016年7月","\u002Farchive\u002F2016\u002F7\u002F1",{"title":192,"uri":193,"view_count":132},"2016年6月","\u002Farchive\u002F2016\u002F6\u002F1",{"title":195,"uri":196,"view_count":86},"2015年12月","\u002Farchive\u002F2015\u002F12\u002F1",{"title":198,"uri":199,"view_count":86},"2015年10月","\u002Farchive\u002F2015\u002F10\u002F1",{"title":201,"uri":202,"view_count":109},"2015年2月","\u002Farchive\u002F2015\u002F2\u002F1",{"title":204,"uri":205,"view_count":86},"2015年1月","\u002Farchive\u002F2015\u002F1\u002F1",{"title":207,"uri":208,"view_count":209},"2014年12月","\u002Farchive\u002F2014\u002F12\u002F1","[8]",{"title":211,"uri":212,"view_count":109},"2014年11月","\u002Farchive\u002F2014\u002F11\u002F1",{"title":214,"uri":215,"view_count":132},"2014年10月","\u002Farchive\u002F2014\u002F10\u002F1",{"title":217,"uri":218,"view_count":122},"2014年9月","\u002Farchive\u002F2014\u002F9\u002F1",{"title":220,"uri":221,"view_count":122},"2014年8月","\u002Farchive\u002F2014\u002F8\u002F1",{"title":223,"uri":224,"view_count":122},"2014年7月","\u002Farchive\u002F2014\u002F7\u002F1",{"title":226,"uri":227,"view_count":109},"2013年9月","\u002Farchive\u002F2013\u002F9\u002F1",{"url":229,"title":230},"https:\u002F\u002Fimage.duguying.net\u002F2022\u002F09\u002Fij6x8o4s.webp","老家 摄于2020年秋",1790781595742]