[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"tag-Illustrator-1":3},{"title":4,"articles":5,"hot_article":18,"month_arch":81,"total":229,"cover":230},"Illustrator - 独孤影的博客",[6],{"id":7,"title":8,"uri":8,"author":9,"tags":10,"created_at":15,"view_count":16,"content":17},23,"使用fontello和Abobe Illustrator制作自己的web字体","duguying",[11,12,13,14],"fontello","Illustrator","web","字体","2014-12-11 10:48:30",6756,"\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":19,"list":20},"最热文章",[21,27,33,39,45,51,57,63,69,75],{"id":22,"title":23,"uri":24,"author":9,"created_at":25,"view_count":26},28,"docker容器目录与主机目录同步","\u002Farticle\u002Fdocker容器目录与主机目录同步","2014-12-31 12:34:08",15570,{"id":28,"title":29,"uri":30,"author":9,"created_at":31,"view_count":32},21,"beego中使用fis","\u002Farticle\u002Fbeego中使用fis","2014-12-03 10:47:56",9250,{"id":34,"title":35,"uri":36,"author":9,"created_at":37,"view_count":38},20,"用github登录，oauth开发","\u002Farticle\u002F用github登录，oauth开发","2014-11-23 13:33:37",9113,{"id":40,"title":41,"uri":42,"author":9,"created_at":43,"view_count":44},18,"windows服务注册工具nssm","\u002Farticle\u002Fwindows服务注册工具nssm","2014-10-31 21:34:39",9047,{"id":46,"title":47,"uri":48,"author":9,"created_at":49,"view_count":50},49,"用latex排版中文书籍","\u002Farticle\u002F用latex排版中文书籍","2016-10-31 11:12:02",8634,{"id":52,"title":53,"uri":54,"author":9,"created_at":55,"view_count":56},19,"texlive中文书签乱码","\u002Farticle\u002Ftexlive中文书签乱码","2014-11-15 02:54:01",8461,{"id":58,"title":59,"uri":60,"author":9,"created_at":61,"view_count":62},6,"Windows上的软件包管理器chocolatey","\u002Farticle\u002FWindows上的软件包管理器chocolatey","2014-08-10 15:55:22",8009,{"id":64,"title":65,"uri":66,"author":9,"created_at":67,"view_count":68},3,"利用开源和免费资源搭建CI环境","\u002Farticle\u002F利用开源和免费资源搭建CI环境","2014-07-04 16:54:58",7732,{"id":70,"title":71,"uri":72,"author":9,"created_at":73,"view_count":74},16,"php-fpm网站目录权限配置","\u002Farticle\u002Fphp-fpm网站目录权限配置","2014-10-18 01:36:10",7274,{"id":76,"title":77,"uri":78,"author":9,"created_at":79,"view_count":80},27,"sublime text 2插件开发，外部修改文件无法重新加载","\u002Farticle\u002Fsublime text 2插件开发，外部修改文件无法重新加载","2014-12-26 20:24:13",7054,{"title":82,"list":83},"按月归档",[84,88,91,94,97,100,103,107,111,114,117,120,124,127,130,134,137,140,143,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,211,214,217,220,223,226],{"title":85,"uri":86,"view_count":87},"2026年7月","\u002Farchive\u002F2026\u002F7\u002F1","[1]",{"title":89,"uri":90,"view_count":87},"2026年1月","\u002Farchive\u002F2026\u002F1\u002F1",{"title":92,"uri":93,"view_count":87},"2025年4月","\u002Farchive\u002F2025\u002F4\u002F1",{"title":95,"uri":96,"view_count":87},"2024年6月","\u002Farchive\u002F2024\u002F6\u002F1",{"title":98,"uri":99,"view_count":87},"2024年5月","\u002Farchive\u002F2024\u002F5\u002F1",{"title":101,"uri":102,"view_count":87},"2024年4月","\u002Farchive\u002F2024\u002F4\u002F1",{"title":104,"uri":105,"view_count":106},"2023年12月","\u002Farchive\u002F2023\u002F12\u002F1","[6]",{"title":108,"uri":109,"view_count":110},"2023年11月","\u002Farchive\u002F2023\u002F11\u002F1","[2]",{"title":112,"uri":113,"view_count":87},"2023年10月","\u002Farchive\u002F2023\u002F10\u002F1",{"title":115,"uri":116,"view_count":87},"2023年7月","\u002Farchive\u002F2023\u002F7\u002F1",{"title":118,"uri":119,"view_count":110},"2023年6月","\u002Farchive\u002F2023\u002F6\u002F1",{"title":121,"uri":122,"view_count":123},"2023年5月","\u002Farchive\u002F2023\u002F5\u002F1","[3]",{"title":125,"uri":126,"view_count":110},"2023年4月","\u002Farchive\u002F2023\u002F4\u002F1",{"title":128,"uri":129,"view_count":110},"2023年3月","\u002Farchive\u002F2023\u002F3\u002F1",{"title":131,"uri":132,"view_count":133},"2023年2月","\u002Farchive\u002F2023\u002F2\u002F1","[5]",{"title":135,"uri":136,"view_count":87},"2023年1月","\u002Farchive\u002F2023\u002F1\u002F1",{"title":138,"uri":139,"view_count":110},"2022年12月","\u002Farchive\u002F2022\u002F12\u002F1",{"title":141,"uri":142,"view_count":133},"2022年11月","\u002Farchive\u002F2022\u002F11\u002F1",{"title":144,"uri":145,"view_count":146},"2022年10月","\u002Farchive\u002F2022\u002F10\u002F1","[4]",{"title":148,"uri":149,"view_count":106},"2022年9月","\u002Farchive\u002F2022\u002F9\u002F1",{"title":151,"uri":152,"view_count":133},"2022年8月","\u002Farchive\u002F2022\u002F8\u002F1",{"title":154,"uri":155,"view_count":87},"2019年7月","\u002Farchive\u002F2019\u002F7\u002F1",{"title":157,"uri":158,"view_count":87},"2019年2月","\u002Farchive\u002F2019\u002F2\u002F1",{"title":160,"uri":161,"view_count":87},"2018年9月","\u002Farchive\u002F2018\u002F9\u002F1",{"title":163,"uri":164,"view_count":87},"2018年8月","\u002Farchive\u002F2018\u002F8\u002F1",{"title":166,"uri":167,"view_count":87},"2017年11月","\u002Farchive\u002F2017\u002F11\u002F1",{"title":169,"uri":170,"view_count":87},"2017年8月","\u002Farchive\u002F2017\u002F8\u002F1",{"title":172,"uri":173,"view_count":87},"2017年5月","\u002Farchive\u002F2017\u002F5\u002F1",{"title":175,"uri":176,"view_count":87},"2017年4月","\u002Farchive\u002F2017\u002F4\u002F1",{"title":178,"uri":179,"view_count":87},"2016年11月","\u002Farchive\u002F2016\u002F11\u002F1",{"title":181,"uri":182,"view_count":87},"2016年10月","\u002Farchive\u002F2016\u002F10\u002F1",{"title":184,"uri":185,"view_count":110},"2016年9月","\u002Farchive\u002F2016\u002F9\u002F1",{"title":187,"uri":188,"view_count":87},"2016年8月","\u002Farchive\u002F2016\u002F8\u002F1",{"title":190,"uri":191,"view_count":110},"2016年7月","\u002Farchive\u002F2016\u002F7\u002F1",{"title":193,"uri":194,"view_count":133},"2016年6月","\u002Farchive\u002F2016\u002F6\u002F1",{"title":196,"uri":197,"view_count":87},"2015年12月","\u002Farchive\u002F2015\u002F12\u002F1",{"title":199,"uri":200,"view_count":87},"2015年10月","\u002Farchive\u002F2015\u002F10\u002F1",{"title":202,"uri":203,"view_count":110},"2015年2月","\u002Farchive\u002F2015\u002F2\u002F1",{"title":205,"uri":206,"view_count":87},"2015年1月","\u002Farchive\u002F2015\u002F1\u002F1",{"title":208,"uri":209,"view_count":210},"2014年12月","\u002Farchive\u002F2014\u002F12\u002F1","[8]",{"title":212,"uri":213,"view_count":110},"2014年11月","\u002Farchive\u002F2014\u002F11\u002F1",{"title":215,"uri":216,"view_count":133},"2014年10月","\u002Farchive\u002F2014\u002F10\u002F1",{"title":218,"uri":219,"view_count":123},"2014年9月","\u002Farchive\u002F2014\u002F9\u002F1",{"title":221,"uri":222,"view_count":123},"2014年8月","\u002Farchive\u002F2014\u002F8\u002F1",{"title":224,"uri":225,"view_count":123},"2014年7月","\u002Farchive\u002F2014\u002F7\u002F1",{"title":227,"uri":228,"view_count":110},"2013年9月","\u002Farchive\u002F2013\u002F9\u002F1",1,{"url":231,"title":232},"https:\u002F\u002Fimage.duguying.net\u002F2022\u002F09\u002Fij6x8o4s.webp","老家 摄于2020年秋",1790062269191]