制作Icon Font

Html5+CSS3 辰辰 21919℃ 40评论

201653ovgb0q7getete87q

现在icon font越来越流行了,它可以用字体代替图片,提高了访问效率,并且不用担心放大会模糊,因为是矢量的。很多大网站里都用到了这种方法,例如:新浪,一淘网等等。icon font 有很多优点,第一点就是本身比图片小很多,并且好维护,在兼容性方面也有很好的表现,但有优点就必有缺点,缺点就是只能制作纯色的,表情上多种颜色的就不支持了。当然制作icon font是需要工具的,首页ps是必须的,然后还需要一个字体编辑器,这里推荐FontCreator。

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

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

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

201656fs165lqv9zrhqs67

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

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

转载请注明:辰辰个人博客 » 制作Icon Font

喜欢 (82)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(40)个小伙伴在吐槽
  1. 文章很新颖,学习啦
    外汇账户托管2018-12-09 10:20 回复
  2. 文章很好支持一下
    武胜2018-06-20 08:47 回复
  3. 写得不错值得一看
    广安养老院2018-06-20 08:46 回复
  4. 每天跟着博主学点,会继续关注支持博主的 :smile:
    踢脚线采暖2018-06-15 17:10 回复
  5. 文章不错非常喜欢
    新闻头条2018-03-24 03:14 回复
  6. 文章不错非常喜欢
    头条新闻2017-12-11 10:59 回复
  7. 这个不错,学习了 :shock:
    云南普洱茶2017-11-19 12:25 回复
  8. 学习了
    乐赚1682017-01-09 14:09 回复
  9. 文章不错支持一下,谢谢分享
    女装2016-12-09 01:18 回复
  10. 网赚助手评论引流博客大全已经收录了您的网站
    网赚助手2016-12-02 20:01 回复
  11. 文章不错支持一下吧
    男装排行榜2016-11-27 05:44 回复
  12. 正需要这个,做Bootstrap的字体一直没搞懂是怎么回事。 谢谢分享
    前端练手项目2016-11-15 11:00 回复
  13. 非常好的前端博客,欢迎回访 前端练手项目-做一个模仿天猫: how2j.cn/t/33
    thomas2016-11-14 17:29 回复
  14. 省流量是好事儿啊。
    千思网2016-11-11 13:39 回复
  15. 不错,支持啦。
    北美省钱快报2016-11-05 13:15 回复
  16. 现在很多这样的图标字体了,方便简洁。
    信阳私房茶2016-11-05 10:42 回复
  17. 满满的干货
    Jean2016-11-02 12:29 回复
  18. 文章不错支持一下
    手机排行榜2016-10-13 03:50 回复
  19. 这个非常好
    小萝博客2016-10-05 20:11 回复
  20. 谢谢分享
    购物街2016-09-28 11:43 回复
  21. 不错!!!
  22. 学习了,实用
    标准源2016-09-06 10:59 回复
  23. 从百度点进来的,支持一下,希望站长您多出一些好文章。
    卢松松博客2016-09-01 21:15 回复
  24. 这个文章不错,支持。
    名人瑞裳2016-09-01 16:36 回复
  25. 感谢分享 欢迎回访
    洋得意自媒体2016-08-25 20:30 回复
  26. 有用,顶一个
  27. 不错,看完这个收获很大!
    卢松松博客2016-08-14 18:14 回复
  28. 难点其实就是: 跨域问题,可通过配置自己的服务器或者放在同域下都可以解决,还可以使用base64置入CSS中。
    教室网2016-07-26 11:31 回复
  29. 我是来学习的,薅羊毛来找我吧。
    值得赚2016-07-23 11:03 回复
  30. 这个真的不错,收藏了
    工控资料窝2016-07-19 14:09 回复
  31. 这个可以有
    一键转发2016-07-18 00:33 回复
  32. 不错的文章!学习了!
    卢松松博客2016-07-17 15:09 回复
  33. 谢谢博主,我带走了。哈哈
    任务易2016-07-13 14:12 回复
  34. 看着不错
    虫虫学车2016-05-19 15:49 回复
  35. 喜欢看楼主的博文,每篇文章都在用心写,绝对的干活,逍遥谷支持您! :mrgreen:
  36. 博主的文章很不错,希望多多交流!
    谙年博客2016-03-31 15:33 回复
  37. 不错,谢谢分享。:P
    跨境电商平台2016-03-24 22:10 回复
  38. 很好的文章!感谢!
    AdOnCn2016-01-04 19:59 回复
  39. 这个可以有,收藏了
    郑州SEO优化2015-12-20 08:45 回复
  40. 无需登录吗
    1232015-07-15 14:34 回复