百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> Html5+CSS3如何制作Icon Font
分享文章到:

Html5+CSS3如何制作Icon Font

发布时间:01/15 来源: 浏览: 关键词:
现在icon font越来越流行了,它可以用字体代替图片,提高了访问效率,并且不用担心放大会模糊,因为是矢量的。

201653ovgb0q7getete87q

很多大网站里都用到了这种方法,例如:新浪,一淘网等等。icon font 有很多优点,第一点就是本身比图片小很多,并且好维护,在兼容性方面也有很好的表现,但有优点就必有缺点,缺点就是只能制作纯色的,表情上多种颜色的就不支持了。当然制作icon font是需要工具的,首页ps是必须的,然后还需要一个字体编辑器,这里推荐FontCreator。

制作时需要icon的矢量图,然后我们在ps中栅格化,之后保存为png24,再在FontCreator中通过图片导入到字体中,进行大小的调整。最后通过在线工具将字体文件转换成我们需要的多种格式。

下面介绍一下制作完成后怎么使用(以下图片来源互联网)

字体声明,由于各浏览器所支持的字体文件不同,因此我们要针对浏览器的这个特点制作多种字体文件以达到兼容的目的

201656fs165lqv9zrhqs67

声明完需要用的时候,可以写在html这样兼容性比较好。

201656qk0o6kgrgzs9sgkr

我们输入的时候怎么去知道要输入的字符是我要输入的Icon呢?只需要通过查阅Unicode对照表,根据字体制作软件中的Unicode码进行对比即可。  


打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有0人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板