1. web字体
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>web字体</title>
<style>
@font-face{
font-family: "方正手迹";
src: url('./font1/方正手迹.ttf');
}
@font-face {
font-family: "webfont";
font-display: swap;
src: url('./font2/webfont.eot'); /* IE9 */
src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./font2/webfont.woff2') format('woff2'),
url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
.t1 {
font-size: 100px;
font-family: '方正手迹';
}
.t2 {
font-size: 100px;
font-family: 'webfont';
}
</style>
</head>
<body>
<h1 class="t1">春风得意马蹄疾，不信人间有别离</h1>
<h1 class="t2">春风得意马蹄疾，不信人间有别离</h1>
</body>
</html>2. 字体图标—方式一
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体图标_方式一</title>
<style>
@font-face {
font-family: 'iconfont';
src: url('./font3/iconfont.woff2?t=1704292879544') format('woff2'),
url('./font3/iconfont.woff?t=1704292879544') format('woff'),
url('./font3/iconfont.ttf?t=1704292879544') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 40px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
</body>
</html>3. 字体图标—方式二
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体图标_方式二</title>
<link rel="stylesheet" href="./font3/iconfont.css">
<style>
.iconfont {
font-size: 40px;
}
</style>
</head>
<body>
<span class="iconfont icon-guanzhu"></span>
<span class="iconfont icon-fuwuqi"></span>
<span class="iconfont icon-gongjizhe"></span>
<span class="iconfont icon-shouhaizhe"></span>
</body>
</html>4. 字体图标—方式三
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体图标_方式三</title>
<script src="./font3/iconfont.js"></script>
<style>
.icon {
width: 3em;
height: 3em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-guanzhu"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fuwuqi"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouhaizhe"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gongjizhe"></use>
</svg>
</body>
</html>5. 字体图标—方式一—在线使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体图标_方式一_在线使用</title>
<style>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: 'iconfont'; /* Project id 4398201 */
src: url('//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.woff2?t=1704293871283') format('woff2'),
url('//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.woff?t=1704293871283') format('woff'),
url('//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.ttf?t=1704293871283') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 40px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
</body>
</html>6. 字体图标—方式二—在线使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体图标_方式二_在线使用</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.css">
<style>
.iconfont {
font-family: "iconfont" !important;
font-size: 40px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
</body>
</html>7. 字体图标—方式三—在线使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体图标_方式二_在线使用</title>
<script src="//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.js"></script>
<style>
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-guanzhu"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fuwuqi"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouhaizhe"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gongjizhe"></use>
</svg>
</body>
</html>
评论 (0)