CSS3:@font-face的使用

首先你应该去网站下载一些你想要的图标字体,推荐在这里下载http://ued.alimama.com/fonts/

在你下载的文件夹icon里就会有四个文件,如下图:

CSS3:@font-face的使用_第1张图片


ps:这四个文件分别是为了兼容各种浏览器


然后你需要在该文件夹里新建一个css文件,在css文件里写上定义字体,如下图:

CSS3:@font-face的使用_第2张图片

这是引用上面四个文件来定义字体,第一行的'iconfont'是你自己定义字体的名称,可以随便命名

然后写上你们熟悉的css样式,如下图:CSS3:@font-face的使用_第3张图片

.iconfont是html文件定义的类,不要和font-family:"iconfont"相混淆,两个都是自己可以随便命名的

最后就是你需要在html中引入该css文件,相信着大家都知道吧

CSS3:@font-face的使用_第4张图片

需要注意的是第十行中&#xfoo7; ,这是引用你想要的图标字体的unicode,只需要将你想要的 图标字体的unicode复制在i标签这个位置就可以了。

有些朋友就有疑问,那我在哪里找到我需要的unicode呢,这个问的很好,在你下载的还有一个html文件中,打开该文件,找到你想要的图标字体,下面有编号,只将数字复制下来(注意:只复制数字,不管前面符号),粘贴覆盖f007就可以了

不难吧,相信大家都学会了,为了让大家看懂,有些地方挺啰嗦的,呵呵……



你可能感兴趣的:(css3,@font-face)