前端项目如何引入字体包? 引入字体包不起效果？

因为设计师用的是IMac电脑，设计图默认使用的字体为 pingFangSC-Regular，这就需要我们做开发的 引入苹方字体包 以达到和设计图一致的视觉效果，（引入其他字体包 同理）

先上个苹方字体包下载链接： https://pan.baidu.com/s/1xI4A7MO3u-P2qQbvS8pu0w 提取码：gqwi

 

首先先演示下如何引入字体包

1、下载好字体包之后，在项目中新建一个font文件夹，将字体包复制放入

、

2、在css文件夹下新建一个font.css 文件，并引入字体

@font-face {
  font-family: "pingFangSC-Regular";
  src: url("../font/PingFang Regular_0.ttf");
  font-weight: normal;
  font-style: normal;
}

3、在html页面中引入font.css

4、完成以上步骤，我们就已经引入了本地字体库了，我们在css文件里就可以设置字体 font-family 为所引入的字体

网上的很多文章的写法都是如上图所示的写法，但是有些人可能会发现，字体并没有如预期般设为苹方字体，那你可以改成如下所示：

ps：苹方字体简介

苹方分为简体的：苹方-简（PingFang SC）， 繁体：苹方-繁（PingFang TC） ，苹方-港（PingFang HK）
苹方提供了六个字重：
苹方 简体（PingFang SC）：
苹方-简 常规体
font-family: PingFangSC-Regular, sans-serif;
苹方-简 极细体
font-family: PingFangSC-Ultralight, sans-serif;
苹方-简 细体
font-family: PingFangSC-Light, sans-serif;
苹方-简 纤细体
font-family: PingFangSC-Thin, sans-serif;
苹方-简 中黑体
font-family: PingFangSC-Medium, sans-serif;
苹方-简 中粗体
font-family: PingFangSC-Semibold, sans-serif;

苹方-繁（PingFang TC） ：
font-family: PingFangTC-Regular, sans-serif;
font-family: PingFangTC-Ultralight, sans-serif;
font-family: PingFangTC-Light, sans-serif;
font-family: PingFangTC-Thin, sans-serif;
font-family: PingFangTC-Medium, sans-serif;
font-family: PingFangTC-Semibold, sans-serif;

苹方-港（PingFang HK） ：
font-family: PingFangHK-Regular, sans-serif;
font-family: PingFangHK-Ultralight, sans-serif;
font-family: PingFangHK-Light, sans-serif;
font-family: PingFangHK-Thin, sans-serif;
font-family: PingFangHK-Medium, sans-serif;
font-family: PingFangHK-Semibold, sans-serif;

 全文为个人学习的记录，有些为个人理解，若有不恰当之处，欢迎指正！