font-face
下面进入正题吧:
-
字体图标
font-face是css3中的一个模块,它主要是把自己定义的web字体嵌入到你的网页中 -
好处
1.可以非常方便的改变大小和颜色(利用font-size和color属性)
2.它是矢量图,放大后不会失真
3.减少请求次数和提高加载速度(不用重复加载)
4.简化网页布局
5.减少设计师和前端工程师的工作量
6.可以使用当前计算机没有提供的字体 -
iconfont矢量图标库
https://www.iconfont.cn(阿里巴巴矢量图标库)
该图标库提供了大量免费的字体图标(.woff2, .woff, .svg, .eot文件为配置文件,用于适应平台)
在引用该图标库的字体图标时,可将文件下载至本地,根据Demo.html文件的指示进行引用。 -
下面举个栗子:
Example1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@font-face字体图标</title>
<style>
@font-face {
font-family:hello;src:url(https://at.alicdn.com/t/font_1401963178_8135476.eot);
src:url(https://at.alicdn.com/t/font_1401963178_8135476.eot?#iefix)format('embedded-opentype'),
url(https://at.alicdn.com/t/font_1401963178_8135476.woff) format('woff'),
url(https://at.alicdn.com/t/font_1401963178_8135476.ttf) format('truetype'),
url(https://at.alicdn.com/t/font_1401963178_8135476.svg#iconfont) format('svg')
}
div{
font-family: hello; /* 这里可以自定义字体图标的名字,我们把它定义为hello */
font-size: 40px; /*使用font-size定义字体图标的大小 */
}
span{font-family: hello;color: brown;} /* 这里使用color属性定义字体图标的颜色 */
.shopping:after{content:'';}
</style>
</head>
<body>
<span></span>
<div class="shopping"></div>
</body>
</html>
效果:
Example2:(使用icon-font字体图标库)
step1:首先进入阿里巴巴字体图标库https://www.iconfont.cn(当然,你首先得登录,我这里是已经登录后的)
step2:搜集我们要用的字体图标,加入购物车,如下图
step3:添加至项目,点击“下载至本地”按钮,将需要的图标文件下载到本地,
step4:下载好后将其解压,放入到iconfont文件夹中(其中,.json, .eot,.svg, .ttf, .woff, .woff2后缀的文件都是做兼容平台处理的,demo_index.html文件描述了iconfont的引用方法。当然最重要的是iconfont.css文件。)
ps:本例子中,iconfont文件夹路径:./iconfont
step5:新建index.html文件,代码如下:
ps:本例子中,index文件路径:./index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon-fnot</title>
<link rel="stylesheet" href="./iconfont/iconfont.css"> /*利用link标签引入iconfont.css文件 */
<style>
.box div{float:left;margin-left:18px;}
.box i{font-size:20px;position:relative;top:3px;padding-right:1px;color:brown} /* 设置字体图标大小和颜色*/
</style>
</head>
<body>
<div class="box">
<div>
<i class="iconfont icon-relationship"></i> /* 一般都是利用i标签引入对应的iconfont图标 */
职位
</div>
<div>
<i class="iconfont icon-groupctrl"></i>
我的
</div>
<div>
<i class="iconfont icon-search"></i>
搜索
</div>
</div>
</body>
</html>
效果:
以上内容作为学习笔记之用,仅供参考。。。