<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体图标</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="font_3486647_3a5nesa23ua/iconfont.css"/>
<style type="text/css">
.fa-handshake-o{
font-size: 60px;}
/* 字体图标库1的使用: */
@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1656312249174') format('woff2'),
url('iconfont.woff?t=1656312249174') format('woff'),
url('iconfont.ttf?t=1656312249174') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 99px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 阿里矢量图标库的使用: */
</style>
</head>
<body>
<i class="fa fa-handshake-o" aria-hidden="true"></i>
<i class="fa fa-handshake-o fa-pulse " aria-hidden="true"></i>
<!-- 字体图标库1的使用: -->
<span class="iconfont">𐃙</span>
<span class="iconfont">𐃛</span>
<span class="iconfont">𐃚</span>
<!-- 阿里矢量图标库的使用: -->
<!--
字体图标
一种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样。
字体图标最大的好处,在于它不会变形和加载速度快。字体图标可以像文字一样,
随意通过 CSS来控制它的大小和颜色,对于建网站来说,非常方便。
1.字体图标库:http://www.fontawesome.com.cn/examples/#rotated-flipped
-->
<!-- 文字是矢量图
1.点是没有大小的
2.线是没有粗细的
3.面是没有厚度的
这种可以修改大小和颜色的图形称为字体图标
灵活性:灵活地修改样式,例如:尺寸、颜色等
轻量级:体积小、渲染快、降低服务器请求次数
兼容性:几乎兼容所有主流浏览器
2.阿里矢量图标库:www.iconfont.cn
-->
</body>
</html>
字体图标-矢量图
于 2022-06-27 17:59:13 首次发布