<!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/
注意：一般引用的中文字体文件都是很大的，这样就会影响页面的加载速度
从网上下载的苹方字体分为几种类型的，本案例只演示了常规字体的引用方法，其他类型的字体套用即可。