标签：rip utf-8 优点 alt san content 创建 pre Fix
unicode 方式应该是最开始接触最熟悉的方式，在 css 中像定义 Web 字体一样，定义将要使用的 iconfont 的名字还有引入地址，再在类样式中使用此字体，设置大小颜色等，最后在元素里添加类并粘贴字体编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@font-face{
font-family: ‘iconfont‘;
src: url(‘iconfont/iconfont.eot‘);
src: url(‘iconfont/iconfont.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘iconfont/iconfont.woff‘) format(‘woff‘),
url(‘iconfont/iconfont.ttf‘) format(‘truetype‘),
url(‘iconfont/iconfont.svg#iconfont‘) format(‘svg‘);
}
.iconfont{
font-family: "iconfont";
font-size:16px;
font-style: normal;
}
</style>
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
也可以使用伪元素的方式添加字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--同上，略-->
.iconfont{
font-family: "iconfont",sans-serif;
font-size:16px;
font-style: normal;
}
i::before{
content:"\e602";
}
</style>
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
字体编码在 html 中是  ，在 css 中是 \e602
font-class方式
font-class 方式是引入相关 css 文件，该定义该设置的此文件已经帮做好，所以我们直接用类样式就能使用对应的字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</head>
<body>
<i class="iconfont icon-aixin"></i>
</body>
</html>
symbol方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-aixin"></use>
</svg>
<script src="iconfont/iconfont.js"></script>
</body>
</html>
这种方式是第一次使用，直接照说明文档做即可，感觉不如 font-class 方式简便，但支持多色图标是一大优点
标签：rip utf-8 优点 alt san content 创建 pre Fix
原文地址：https://www.cnblogs.com/Grani/p/9610115.html
