引入pingfang SC字体

最新推荐文章于 2021-08-03 22:23:08 发布

weixin_30448685

最新推荐文章于 2021-08-03 22:23:08 发布

阅读量6.4k

点赞数 3

文章标签： javascript ui 移动开发 ViewUI

原文链接：http://www.cnblogs.com/beimingbingpo/p/9711716.html

版权

在仿苹果官网"垃圾桶"时，设计出的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

转载于:https://www.cnblogs.com/beimingbingpo/p/9711716.html