<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
//本地的css路径 根据自己环境改变
<link rel="stylesheet" href="./source/fontImg/css/font-awesome.css">
<style>
/* 牵扯到两个问题
1.加载速度
2.版权 */
@font-face {
/* 设置字体的引用名 */
font-family: ‘newFont‘;
/* 服务器中字体的路径 */
src: url(‘./source/font/毛笔书法字体(启功体)繁启体.TTF‘);
}
p{
color:brown;
/* font-family serif */
font-family: ‘newFont‘;
font-size: 2em;
}
li{
list-style: none;
}
li:before{
/* 在content中设置字体编码 */
content:‘\f13d‘;
/* 引用字体别名 */
font-family: ‘FontAwesome‘;
margin-right: 10px;
color:darkgoldenrod;
}
</style>
</head>
<body>
<p>今天天气非常棒！</p>
<i class="fa fa-bell"></i>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
</body>
</html>
图标字体和@fontface的用法
原文：https://www.cnblogs.com/kukai/p/12294503.html
