css如何引用字体

704 阅读1分钟

最近遇到个问题,页面使用的字体要用PingFangSC字体,引入方法如下:

简单介绍下PingFangSC字体:

(1)苹方-简 常规体        font-family: PingFangSC-Regular, sans-serif; 
(2)苹方-简 极细体        font-family: PingFangSC-Ultralight, sans-serif; 
(3)苹方-简 细体           font-family: PingFangSC-Light, sans-serif; 
(4)苹方-简 纤细体       font-family: PingFangSC-Thin, sans-serif; 
(5)苹方-简 中黑体       font-family: PingFangSC-Medium, sans-serif; 
(6)苹方-简 中粗体       font-family: PingFangSC-Semibold, sans-serif;

用哪个字体就把哪个字体引入即可:

将下载好的字体放在当前项目的文件夹里面。截图如下:

html文件:

<!DOCTYPE html>
<html>
<head>
    <title>引入PingFangSC 字体</title>
    <meta charset="utf-8">
    <link href="index.css" rel="stylesheet" type="text/css">
    <style>
        @font-face{
            font-family: 'FZZ';
            src:url('./FZZJ-WHHLTJW.TTF');
        }
    </style>
</head>
<body>
    <div class="box">
        你好呀
    </div>
</body>
</html>

效果图如下: