在仿苹果官网"垃圾桶"时, 设计出的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字体的更多相关文章

  1. 前端项目引入Echarts中的dataTool的正确方式

    使用echarts画箱线图时调用echarts.dataTool.prepareBoxplotData() 报错:"echarts.dataTool.prepareBoxplotData i ...

  2. webpack项目如何正确打包引入的自定义字体?

    一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字体呢? 其实实现起来并不复杂,可以借用CSS3 ...

  3. webpack项目如何正确打包引入的自定义字体

    webpack项目如何正确打包引入的自定义字体 一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字 ...

  4. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

  5. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  6. 基于Gulp + Browserify构建es6环境下的自动化前端项目

    随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...

  7. 前端项目添加自定义icont图标步骤

    文章转自https://blog.csdn.net/weixin_36185028/article/details/53416185 这里就用到了两个文件,一个是icontfont.css,另外一个是 ...

  8. 用gulp构建你的前端项目

    前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...

  9. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

随机推荐

  1. python学习笔记(二十三)私有方法和私有属性

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面Person类的定义来看,外部代码还是可以自由地修改一个实例的nam ...

  2. Spark Streaming Checkpoint反序列化问题分析

    转载自:https://mp.weixin.qq.com/s/EQgDUSf3TK0oVg1xmg-49Q Checkpoint是Spark Streaming中的核心机制,它为应用程序的7*24小时 ...

  3. Flask form(登录,注册)

    用户登录 from flask import Flask, render_template, request, redirect from wtforms import Form from wtfor ...

  4. xe7开发的安卓程序,体积宏大--112M!

    原因没找到,但似乎可以这样解决: 解决过程:因为代码很少,所以我重新建立一个空白程序,把代码复制过去,一字不差.重新编译, 关键的时刻到了:不要连上真机,在编译完成时,系统提示是否要启动android ...

  5. javascript 类型 内存

    ecmscript中包含两种类型 基本类型值         引用类型值(对象) 按值传递和按引用传递 function test ($num) {   //按值传递,JavaScript中没有按引用 ...

  6. vue生命周期探究(二)

    vue生命周期探究(二) 转载自:https://segmentfault.com/a/1190000008923105 上一章我们介绍了vue的组件生命周期和路由勾子,这一章,让我们来看看在vue- ...

  7. vue工程权限怎么配置?

    vue工程权限怎么配置? router.beforeEach((to, from, next) => { }):方法的to参数能拿到router设置的对象信息,如: { path: " ...

  8. SSH的加入顺序*(转)

    首先创建一个 New  =>  Web Project  起名 demo 然后在项目名称上 点击鼠标右键 选择 MyEclipse => Add Speing Capabilites... ...

  9. 对称加密与非对称加密,以及RSA的原理

    一 , 概述 在现代密码学诞生以前,就已经有很多的加密方法了.例如,最古老的斯巴达加密棒,广泛应用于公元前7世纪的古希腊.16世纪意大利数学家卡尔达诺发明的栅格密码,基于单表代换的凯撒密码.猪圈密码, ...

  10. 使用selenium前学习HTML介绍

    <!-- HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (mark ...