前端项目，引入PingFang SC字体

在仿苹果官网"垃圾桶"时， 设计出的UI使用PingFang SC 字体，在网上查了好久，特记录。
若是你有更好的方法，欢迎评论留言~

实现原理，使用@font-face将字体下载在用户电脑中，而后font-family使用字体。

关于font-face连接

 

 css:

@font-face { font-family: 'myFont'; src: url('/assets/font/PingFangSC-Light.ttf'); //你的资源目录 font-weight: normal; font-style: normal; } html,body { font-family: myFont, sans-serif; }

 

苹方提供了六个字重，font-family 定义以下：
　　苹方-简 常规体
　　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;

 

字体下载连接:https://pan.baidu.com/s/1xOOIJGjopRdsexXuC6FkVQ  密码:fq72