pingfang css,前端项目，引入PingFang SC字体

在仿苹果官网"垃圾桶"时，设计出的UI使用PingFang SC 字体，在网上查了很久，特记录。

如果你有更好的方法，欢迎评论留言~

实现原理，[email protected]，然后font-family使用字体。

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://www.cnblogs.com/keta/p/9429024.html

pingfang css,前端项目，引入PingFang SC字体相关推荐

前端-项目引入苹方字体
下载字体文件 http://pan.baidu.com/s/1b1cRP8 提取密码:6r5s 引入到项目中 @font-face {font-family: PingFang-SC-Semibold ...
HTML+CSS+前端项目
学习目标: HTML+CSS+前端项目学习内容: HTML认知 HTML基础 CSS基础 CSS进阶 CSS盒子模型 CSS浮动在线项目实战 CSS定位装饰学习时间: 周一至周五晚上 7 点-晚 ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
前端项目引入js文件写绝对目录还是相对目录_flask入门（三）静态文件
前言上篇文章讲到 flask 的模板文件如何使用,印象模糊的朋友可以回顾一下flask入门 (二)(不用写代码的前端!) 今天的主题 - flask 和静态文件结合的使用技巧. 静态文件概念先来简 ...
vue前端项目引入iconfont阿里图标（font class）
1.首先进入阿里图标库官网(iconfont-阿里巴巴矢量图标库),选取你所要的图标,将其添加购物车. 2.然后进入购物车,点击添加进项目 3.点击下载到本地 4.将下载的文件复制下来 5.在main ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
前端项目如何引入字体包? 引入字体包不起效果？
因为设计师用的是IMac电脑,设计图默认使用的字体为 pingFangSC-Regular,这就需要我们做开发的引入苹方字体包以达到和设计图一致的视觉效果,(引入其他字体包同理) 先上个苹方字体 ...
前端项目，引入苹方字体
UI用的IMac,设计图默认使用的字体为 pingFangSC-Regular 与UI协商后,决定在项目里引入本地的字体库以达到与设计图同样的效果首先下载font字体库这里下载的是ttf文件(并 ...
【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标前言一. ...
H5（nuxt）项目引入字体
H5(nuxt)项目引入字体闲话少说方法1: 1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.先自己定义一个font.css文件,字体文件的路径引入 @font-face ...

pingfang css,前端项目，引入PingFang SC字体

pingfang css,前端项目，引入PingFang SC字体相关推荐

最新文章

热门文章