前端项目如何引入字体包? 引入字体包不起效果？

因为设计师用的是IMac电脑，设计图默认使用的字体为 pingFangSC-Regular，这就需要我们做开发的引入苹方字体包以达到和设计图一致的视觉效果，（引入其他字体包同理）

先上个苹方字体包下载链接： https://pan.baidu.com/s/1xI4A7MO3u-P2qQbvS8pu0w 提取码：gqwi

首先先演示下如何引入字体包

1、下载好字体包之后，在项目中新建一个font文件夹，将字体包复制放入

、

2、在css文件夹下新建一个font.css 文件，并引入字体

@font-face {font-family: "pingFangSC-Regular";src: url("../font/PingFang Regular_0.ttf");font-weight: normal;font-style: normal;
}

3、在html页面中引入font.css

4、完成以上步骤，我们就已经引入了本地字体库了，我们在css文件里就可以设置字体 font-family 为所引入的字体

网上的很多文章的写法都是如上图所示的写法，但是有些人可能会发现，字体并没有如预期般设为苹方字体，那你可以改成如下所示：

ps：苹方字体简介

苹方分为简体的：苹方-简（PingFang SC）， 繁体：苹方-繁（PingFang TC） ，苹方-港（PingFang HK）
苹方提供了六个字重：
苹方 简体（PingFang SC）：
苹方-简 常规体
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;苹方-繁（PingFang TC） ：
font-family: PingFangTC-Regular, sans-serif;
font-family: PingFangTC-Ultralight, sans-serif;
font-family: PingFangTC-Light, sans-serif;
font-family: PingFangTC-Thin, sans-serif;
font-family: PingFangTC-Medium, sans-serif;
font-family: PingFangTC-Semibold, sans-serif;苹方-港（PingFang HK） ：
font-family: PingFangHK-Regular, sans-serif;
font-family: PingFangHK-Ultralight, sans-serif;
font-family: PingFangHK-Light, sans-serif;
font-family: PingFangHK-Thin, sans-serif;
font-family: PingFangHK-Medium, sans-serif;
font-family: PingFangHK-Semibold, sans-serif;

全文为个人学习的记录，有些为个人理解，若有不恰当之处，欢迎指正！

前端项目如何引入字体包? 引入字体包不起效果？相关推荐

rust react tauri app 现有前端项目打包(windows)
现有前端项目打包环境配置 nodejs及相应包管理器(npm或yarn) rust 开发环境 WebView2 安装下载地址https://developer.microsoft.com/en-u ...
在前端项目里引入字体
前言最近做可视化看板产品经理觉得默认字体丑,那么只能在项目里引入一下字体了. 注: vue项目项目里使用的是scss,对于css和less 没有进行测试实现分享一个下载ppt.字体的网址:第一 ...
.ttf字体文件引入vue项目及使用
出自文章:.ttf字体文件引入vue项目及使用 UED要求使用非系统自带字体 1.在项目的assets文件夹中创建fonts文件夹,将下载好的.ttf字体文件放进去,并创建font.css文件 2.在 ...
Vue项目引入自定义字体 tinymce自定义字体的使用
字体也不是随便就能使用的,如果是有版权的字并且进行了大规模商用,很有可能面临着一大笔的赔偿金,所以公司会购买一些字体的使用权,所以在日常做项目时会经常使用到自定义字体引入的问题.我遇到的是Vue项目的 ...
使用 IcoMoon 生成字体图标，并在微前端项目中使用
目录 1. IcoMoon 使用步骤 1.1 进入 IcoMoon 新建图集 1.2 选择并生成字体图标 1.3 使用字体图标文件 2. 微前端中实现换肤的一种思路 2.1 使用 CSS 变量 2.2 ...
IDEA搭建Maven Web（SSM）项目（二）——jar包引入、jetty服务器配置和ssm配置
第二篇:jetty服务器插件配置,ssm所需基本jar包引入,ssm相关文件配置 1. 配置jetty服务器插件打开已默认创建的pom.xml文件,其中已经自动引入了一些jar和maven插件,我们 ...
CSS day1 |选择器字体文本引入方式
目录 1 css简介 1.1 html局限性 1.2 CSS-网页的美容师 1.3 css语法规范 1.4 css代码风格 2 CSS选择器 2.1 css选择器的作用 2.2 标签选择器 2.3 类 ...
php如何导入字体样式,css怎么引入外部字体？css 字体样式设置的方法（实例）...
在浏览器显示中,页面上不同的字体样式,不仅提升了页面的美观度,也提升了用户的浏览交互性.那么这些不同的字体样式是怎么用css设置的?本章就给大家带来css如何引入外部字体?css 字体样式设置的方法( ...
uni-app中如何引入阿里iconfont图标字体(详细教程)
最近的项目中用到了iconfont字体,虽然之前已经用过很多次了,但是一直没有认真的整理过,所以这次就整理一下吧. 进入iconfont首页,在这里可以选择自己想要在项目中添加的iconfont图片字 ...
axios 使用步骤很简单，首先在前端项目中，引入 axios：
2019独角兽企业重金招聘Python工程师标准>>> 前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources ...

前端项目如何引入字体包? 引入字体包不起效果？

前端项目如何引入字体包? 引入字体包不起效果？相关推荐

最新文章

热门文章