前端项目,引入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
前端项目,引入PingFang SC字体的更多相关文章
- 前端项目引入Echarts中的dataTool的正确方式
使用echarts画箱线图时调用echarts.dataTool.prepareBoxplotData() 报错:"echarts.dataTool.prepareBoxplotData i ...
- webpack项目如何正确打包引入的自定义字体?
一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字体呢? 其实实现起来并不复杂,可以借用CSS3 ...
- webpack项目如何正确打包引入的自定义字体
webpack项目如何正确打包引入的自定义字体 一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字 ...
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- 基于Gulp + Browserify构建es6环境下的自动化前端项目
随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...
- 前端项目添加自定义icont图标步骤
文章转自https://blog.csdn.net/weixin_36185028/article/details/53416185 这里就用到了两个文件,一个是icontfont.css,另外一个是 ...
- 用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
- 前后端分离之前端项目构建(grunt+require+angular)
前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...
随机推荐
- spring 拾遗
1.@PostConstruct VS init-method 1.1 both BeanPostProcessor 1.2 @PostConstruct is a JSR-250 annotati ...
- NSUserDefaults保存对象数组报错
在使用NSUserDefaults的时候插入数据有时候会报以下错误:Attempt to set a non-property-list objec 这种错误的原因是插入了不识别的数据类型,NSUse ...
- WebRtc(网页即时通讯技术)知识点总结
前言 WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,简而言之它是一个支持网页浏览器进行实时语音对话或视频对话的技术.并且还支持跨平台:window ...
- kettle部分传输场景应用(每个作业都实验过啦)
不过都是全量的,没有增量的,增量的需要自行写脚本实现 1.mysql->mysql 2.ftp->mysql(整个文件夹下面读取) 3.hdfs->mysql 4.sftp-> ...
- iClap的名字是怎么来的,clap是有什么特殊的意义么?
iClap的名字来源于:Clap中文是鼓掌的意思,鼓掌代表合拍,一个团队的价值观以及工作方式合拍,是最重要的,当项目启动时,大家对产品认可,鼓掌开始实施:当项目成功上线,团队也会以鼓掌的形式庆祝:当我 ...
- Web Servlet的体系架构
Servlet为根接口,里面有5个方法,init() servlet初始化,将ServletConfig作为参数传入,service() 响应请求,destroy() 销毁servlet,getSer ...
- $一步一步学Matlab(4)——使用Matlab进行初等数学运算
Matlab可以看成是一个功能强大的计算器,那么既然是计算器,进行基本的数学运算绝对是必不可少的.本文主要讲解如何用Matlab做初等数学运算,所谓"初等数学运算",可以理解成是小 ...
- java多态 以及静态绑定 动态绑定积累
重载,英文名是overload,是指在一个类中定义了一个以上具有相同名称的方法,这些方法的参数个数.参数类型和顺序不能相同.返回类型可以相同,也可以不同. 重写,英文名是overrid,是指在继承情况 ...
- Linux下mysql允许远程连接怎么设置
1.root用户登录到mysql数据库代码示例:/usr/local/mysql/bin/mysql -u root -p (输入密码进入mysql)2.进入mysql,输入:代码示例:use mys ...
- thinkerCMS是一款thinkphp写的微型cms框架可以参考下
http://www.thinkphp.cn/code/1764.html thinkphp官网thinkercms介绍 http://cms.thinke ...