Icon font

1,169 views

Published on

Icon Font

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,169
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Icon font

  1. 1. Icon Font 赵磊
  2. 2. 概述1、什么是Icon Font?它能干什么?2、Icon Font有什么优缺点?3、如何制作Icon Font?4、如何使用Icon Font?
  3. 3. 什么是Icon Font?我们现在通常所指的Icon Font,是用字体文件取代图片文件,来展示图标、特殊字体等元素的方法
  4. 4. Icon Font能干什么?
  5. 5. Icon Font优点1、体积要比图片小的多2、可维护性更好,拉伸不变形,颜色可以自 行更换,支持CSS3对文字的效果(阴影等)3、可以实现通过base64置于CSS内,没有了 http请求
  6. 6. Icon Font缺点1、只能纯色图标,多颜色不支持(WIN8上 面纯色图标更出色)2、重构成本相应增高
  7. 7. 如何制作Icon Font工具:FontCreator,PS步骤:设计给出矢量Icon >> PS中栅格化图层 (不栅格个别图片会出问题)>> 保存为 PNG24 >>在FontCreator中importimage导入 (需要调整字体参数)>>都做完的字体文件 通过在线网站转换成多种格式http://www.fontsquirrel.com/fontface/generator
  8. 8. 如何使用Icon Font1、声明2、通过在html中打入代码,或者在css中通过 before或after伪类中content控制(各有利弊)3、应该建立一个公共页面,方便后期维护和 调用,包括输入的字符,图标含义等
  9. 9. Thank You~~~

×