html中引入图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。字体图标(iconfont)就解决了我们的问题。
- iconfont跟图片一样可以改变透明度、旋转度…
- 由于其本质是文字,可以很随意的改变颜色、产生阴影、透明效果等等…
- 占用空间更小,加载更快,但携带的信息并没有减少
- 几乎支持所有的浏览器
推荐网站:
http://icomoon.io
http://www.iconfont.cn/
http://fortawesome.github.io/Font-Awesome/
如何将从网站下载的字体图标引入到html中呢?
分三步:
第一步:在样式里面声明字体
第二步:给盒子使用字体,使用的字体名与声明的一致
第三步:盒子中添加结构(有两种方法,见代码块,图标和图标代码从下载的字体包中demo.html文件中获得)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*第一步:在样式里面声明字体*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/*第二步:给盒子使用字体*/
span {
font-family: "icomoon";
}
/*第三步:盒子中添加结构 方法二*/
span::before {
content: "\e900";
}
</style>
</head>
<body>
<span></span> <!-- 第三步:盒子中添加结构 方法一 -->
</body>
</html>
CSS学习笔记,整理于网络资源