CSS 字体图标

最新推荐文章于 2025-06-10 05:58:31 发布

原创最新推荐文章于 2025-06-10 05:58:31 发布 · 398 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#字体图标 #iconfont

CSS 专栏收录该内容

4 篇文章

订阅专栏

html中引入图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。字体图标(iconfont)就解决了我们的问题。

iconfont跟图片一样可以改变透明度、旋转度…
由于其本质是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
占用空间更小，加载更快，但携带的信息并没有减少
几乎支持所有的浏览器

如何将从网站下载的字体图标引入到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学习笔记，整理于网络资源