CSS高级技巧 图标字体ICONFONT的使用方法视频

图标字体  iconfont

这是一种字体,它跟svg 有很大 相似点  
它是矢量的,放大缩小不失真的。很且很小。 我们把它成字看来。
字体 在 从ie4就开始支持的。  兼容性很好
唯一麻烦的地方,就是制作麻烦。
越来越的网站开始运用这个图标字体。 一些地方,我们就不用精灵图片,直接用图标字体。

图标字体的使用

自己制作比较麻烦,我们一般是网上直接下载,因此,要使用iconfont字体一共分为三步:

1. 先从网上下载字体。  
 
经常使用的两个网站:

   icomoon.io            

   http://iconfont.cn/   阿里妈妈字体库 
 
  我们以icomoon.io 为主
  
  打开网站点 : icomoon App 按钮

 CSS高级技巧 图标字体ICONFONT的使用方法视频

继续 

 CSS高级技巧 图标字体ICONFONT的使用方法视频
 

CSS高级技巧 图标字体ICONFONT的使用方法视频

CSS高级技巧 图标字体ICONFONT的使用方法视频
 
 
 2. 声明字体

这么多是为了兼容浏览器,所以,大家只管复制就可以了,看好路径
@font-face {
font-family: ‘iconfont‘;
 src: url(‘iconfont.eot‘); /* IE9*/
 src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
url(‘iconfont.woff‘) format(‘woff‘), /* chrome、firefox */
 url(‘iconfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url(‘iconfont.svg#uxiconfont‘) format(‘svg‘); /* iOS 4.1- */
 
CSS高级技巧 图标字体ICONFONT的使用方法视频
 
3. 使用字体  
每个图片都会对应着一个文字,所以这个文字要记住。
例如:
 CSS高级技巧 图标字体ICONFONT的使用方法视频
先复制文字  在加  font-family

最后就可以看到效果了。

具体完整操作,请参看视频地址:

     http://www.tudou.com/programs/view/LaCdxBCcrrw/  

CSS高级技巧 图标字体ICONFONT的使用方法视频,布布扣,bubuko.com

CSS高级技巧 图标字体ICONFONT的使用方法视频

上一篇:找到一个在上海租房非常不错的网站 - 一步租房网,推荐推荐,综合了赶集,58同城,搜房,安居客等所有的信息


下一篇:js数组对象以及数组常用属性和方法