css - 字体图标的制作

很多的时候我们在开发过程中一般都是直接使用图片,尤其在移动页面频繁请求图片对性能不是很好 ,所以图标字体的应用也越来越广泛。一般情况下直接用的是font awesome字体,但是有时候需要制作自己风格的字体该怎么做呢?

制作方法:SVG+icomoon

  一、首先生成SVG格式图标:

    1:复制图标的路径;打开ps选中图层中的路径,然后“Ctrl+C”;

    2:粘贴路径到Illustrator文档。新建Illustrator 文档,就是“Ctrl+N”,大小建议60x60px,”Ctrl+V”粘贴到该图层;

    3:为图标填充黑色。在Illustrator中选择右侧 “外观”在“填色”那里选择黑色;

    4:等比调整图标大小。按住“Shift”键等比调整图标大小,使其适合当前文档大小;

    5:存储为SVG格式的图标。“Ctrl+ Shift+S”存储为svg格式图标,存储时的选项直接用默认的设置即可,在命名时注意下,会涉及到后面图标样式名称。(注意:存储为SVG格式的图标之前,一定要先选中字体图标,control + shift + O 用于创建字体轮廓;不然后面用的时候不显示图标字体)

    Ps:关于Illustrator 文档的设置大小只是建议,因为在ps设计稿中图标的路径大小一般不超过30px,如果是retina屏幕那就不超过60px,设置太大的话等比缩放时会造成小麻烦,所以建议60X60px。

  二、利用icomoon生成字体图标:

    1:浏览器打开 https://icomoon.io/app/?utm_source=caibaojian.com#/select

    2:导入svg图标。点击左上角的“import icons”按钮,选择您想要制作成字体的svg图标;

    3:导出字体图标及demo。选中您需要的图标字体,点击页面最下方的“Font”按钮,在download之前还可以进行些个人的配置。点“Preferences”按钮,可以设置你的字体的名字(Font Name)、样式的前缀或后缀、如果需要兼容IE7及以下的浏览器请勾选上,等还有更多不太常用详细的选项。配置后之后,download it!

    4:拷贝你所需要的资源到自己的项目。解压文件后,里面有一个示例的demo页面,大家可参考里面的写法,然后把所用的fonts和样式拷贝到自己的项目中,大功告成啦!

    

  

  

  

猜你喜欢

转载自www.cnblogs.com/changxue/p/9066195.html
今日推荐