<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* 两种定义字体的方法： */
@font-face {
font-family: ‘PingFang‘;
src: url(‘pingfang/PingFang Regular.eot‘);
src: local(‘PingFang Regular‘),
local(‘PingFang‘),
url(‘pingfang/PingFang Regular.woff‘) format(‘woff‘),
url(‘pingfang/PingFang Regular.ttf‘) format(‘truetype‘),
url(‘pingfang/PingFang Regular.svg#PingFang Regular‘) format(‘svg‘);
}
@font-face {
font-family: ‘ping fang‘;
src: url(‘pingfang/PingFang Regular.eot‘);
src: url(‘pingfang/PingFang Regular.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘pingfang/PingFang Regular.woff‘) format(‘woff‘),
url(‘pingfang/PingFang Regular.ttf‘) format(‘truetype‘),
url(‘pingfang/PingFang Regular.svg#PingFang Regular‘) format(‘svg‘);
font-weight: normal;
font-style: normal;
}
h1{font-family: "微软雅黑";font-weight: 400;}
.demo{font-family: PingFang;}
h2{font-family: ping fang;font-weight: 400;}
</style>
</head>
<body>
<h1 class="demo">大厦将颠沙井街道哦啥老东家是</h1>
<h1>大厦将颠沙井街道哦啥老东家是</h1>
<h2>大厦将颠沙井街道哦啥老东家是</h2>
</body>
</html>
下载的字体是ttf格式的，需要通过转换工具再转化成eot、woff、svg、otf格式的字体文件
推荐字体格式转换网址：https://www.fontke.com/tool/convfont/
注意：一般引用的中文字体文件都是很大的，这样就会影响页面的加载速度
从网上下载的苹方字体分为几种类型的，本案例只演示了常规字体的引用方法，其他类型的字体套用即可。
时间： 2024-11-21 06:22:25