iconfont及自定义字体
一、iconfont
iconfont:
将iconfont拆开来看,就是icon(图标)和font(字体)。简单的说iconfont就是利用字体工具把我们平时网页上用的图形图标转换成网页字体。其实跟字体差不多,字体对应的是文本,iconfont对应的是图标
iconfont的优势:
1、相比图片的大小容量,iconfont几乎是羽翼级轻量。
2、图标都被打包在字体库里面,减少了HTTP的请求数量,加速网页加载速度。
3、使用iconfont非常方便,和设置网页字体一样,可以利用CSS来定义图标大小、图标颜色、图标透明度等
iconfont的劣势:
1、利用CSS无法方便的定义多彩的icon,大部分是单一颜色。
2、因为iconfont跟字体有关,所以它很容易受到字符编码的影响。
iconfont的使用:
Iconfont-阿里巴巴矢量图标库
1.新建项目,将自己需要的图标加入购物车
2.点击下载代码
3.下载好的文件打开后:
4.打开demo.html
使用步骤:
(1)在css中复制生成的@font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
(2)定义使用 iconfont 的样式(还可以设置颜色color)
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
(3)挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">3</span>
二、自定义字体
1.首先下载好字体文件.ttf 字魂网
2.@font-face引入字体文件,并且定义该字体的名称为:Font(自己随便写)
<style>
@font-face{
font-family: Font;
src: url('字体文件路径.ttf')
}
</style>
3.使用
<body>
<div class="font">哈哈哈哈</div>
</body>
<style>
@font-face{
font-family: Font;
src: url('字体文件路径.ttf')
}
body{ font-family:Font; }
</style>
自定义字体图片: