码迷,mamicode.com
首页 > 其他好文 > 详细

前端项目,引入PingFang SC字体

时间:2018-08-06 11:06:10      阅读:3243      评论:0      收藏:0      [点我收藏+]

标签:too   log   color   tps   div   line   span   apple   复制   

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

 

前端项目,引入PingFang SC字体

标签:too   log   color   tps   div   line   span   apple   复制   

原文地址:https://www.cnblogs.com/keta/p/9429024.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!