前端vue项目，引入PingFang SC字体

最新推荐文章于 2025-04-14 10:38:51 发布
最新推荐文章于 2025-04-14 10:38:51 发布
阅读量2.1k 收藏
点赞数 2
分类专栏： vue.js css 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiubinxu/article/details/136535077
版权
本文详细介绍了如何在Vue项目中引入PingFang SC字体，包括从指定链接下载字体、放置字体文件到项目目录、创建并引用scss文件，以及在组件中正确使用字体。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一，首先需要先获取PingFang SC字体，如果你有 请直接跳到第二步

链接：https://pan.baidu.com/s/1nkmV59kT_hvjK4yPJn1cJA
提取码：n0s1

二，将下载好的PingFang SC字体，放在项目的和样式一起的文件下，如下图

在这里插入图片描述
然后再创建一个fonts.scss文件（引入的时候注意路径是否正确）

@font-face {
   
  font-family: 'PingFangSC-Light
了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端项目，引入苹方字体
linpenghui958的博客
08-16 3万+
UI用的IMac，设计图默认使用的字体为 pingFangSC-Regular 与UI协商后，决定在项目里引入本地的字体库 以达到与设计图同样的效果 首先下载font字体库 这里下载的是ttf文件（并不完全兼容所有浏览器） 里面有重复的，均为下载试用的 在font.css中 @font-face { font-family: 'pin
PingFang SC 字体
maolianshuai的专栏
11-14 3737
项目中设计师使用了大量的平方字体，做个笔记，方便日后查看 1、获取平方字体代码 NSString *fontfamilyname = @"PingFang SC"; //[UIFont familyNames] CGFloat y = 64; for (NSString *fontName in [UIFont fontNamesForFamilyName:fontfamilyname]) { UIFont *font = [UIFont fontWit
前端页面，引入PingFang SC（苹方简）字体
热门推荐
qq_40603010的博客
08-25 2万+
实现方法就是在style里面输入@font-face来进行定义字体类型和名字。 @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; } 苹方提供了六个字重，fon
PingFangSC字体资源下载：一键获取Mac系统专属字体
gitblog_06742的博客
04-14 1154
PingFangSC字体资源下载：一键获取Mac系统专属字体 【下载地址】PingFangSC字体资源下载 这是一个专门为Mac用户提供的PingFangSC字体资源下载项目，包含了三种常用字体格式：PingFangSC-Medium、PingFangSC-Regular和PingFang-SC-Thin。这些字体设计简...
Vue引入新下载字体
weixin_42164004的博客
07-22 890
1、将新下载字体放入文件夹中 2、新建一个scss样式文件，引入字体 @font-face { font-family: 'PingFangSC-Light'; src: url('../assets/Fonts/PingFangSC-Light.ttf'); } 3、在main.js文件中全局引入scss文件 import '@/style/common.scss' ...
vue字体样式引用
m0_62280750的博客
03-26 304
【代码】vue字体样式引用。
PingFangSC字体压缩版(woff2)
06-22
提供了四个字重的压缩版，font-family 定义如下： 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 细体 font-family: PingFangSC-Light, sans-serif; 苹方-简 中黑体 font-family: PingFangSC-Medium, sans-serif; 。。。
提升前端项目视觉体验：Vue项目引入PingFang SC字体指南
gitblog_06532的博客
09-20 738
提升前端项目视觉体验：Vue项目引入PingFang SC字体指南 前端vue项目引入PingFangSC字体 项目地址: https://gitcode.com/Resource-Bundle-Collection/0b7e5...
PingFang SC 苹方字体安装
weixin_45781624的博客
12-06 1220
figma 设计
PingFangSC 字体资源下载
最新发布
gitblog_06784的博客
04-14 694
PingFangSC 字体资源下载 【下载地址】PingFangSC字体资源下载 这是一个专门为Mac用户提供的PingFangSC字体资源下载项目，包含了三种常用字体格式：PingFangSC-Medium、PingFangSC-Regular和PingFang-SC-Thin。这些字体设计简洁现代，非常适合用于各类设...
PingFangSC
04-01
PingFangSC
PingFang SC Regular.zip
08-20
PingFang SC Regular各种样式的字体，包括eot、otf、svg、ttf、woff等格式
前端PingFangSC, PingFang SC引入
02-18
### 如何在前端项目中引入和使用 PingFang SC 字体 #### 准备工作 为了能够在前端项目中成功引入并使用 PingFang SC 字体，需先获取字体文件。可以从特定资源库下载包含所需字体文件的压缩包[^1]。 #### 解压与...
为项目加入PingFang SC第三方字体，并使用
01-16
#### 在Web前端Vue.js项目中引入PingFang SC字体 针对基于Vue框架构建的网页端工程而言，要实现相同目的，则应按照如下方式操作：先获取到目标字体文件；随后创建一个专门用于存储样式表单的SCSS/SASS文档(`fonts....
前端Vue项目——初始化及导航栏
infotw的博客
06-24 9959
正文 一、项目初始化 　　创建webpack模板项目如下所示： MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone...
vue3 引入自定义字体文件 比如 PingFangSC
const_TLJ的博客
03-11 359
【代码】vue3 引入自定义字体文件 比如 PingFangSC。
PingFangSC 多版本字体文件下载：设计师的福音
gitblog_09702的博客
10-28 1108
PingFangSC 多版本字体文件下载：设计师的福音 【下载地址】PingFangSC多版本字体文件下载 PingFangSC 多版本字体文件下载本仓库提供了 PingFangSC 字体的多版本下载，包括 eot、woff2、woff 和 ttf 格式 ...
ttf格式字体怎么在前端引入
10-31
要在前端HTML中引入`.ttf`格式的TrueType字体，你需要遵循这些步骤[^1]: 1. **定义字体名称**: ```css @font-face { font-family: 'YourCustomFont'; // 替换为你的字体名称 src: url('/assets/font/your-font.ttf') format('truetype'); } ``` 这里假设字体文件位于项目根目录下的`/assets/font`子目录下。 2. **链接到CSS**: 在你的CSS文件中，将上述`@font-face`规则包含进去，这样浏览器就能知道如何访问并应用新定义的字体。 3. **在HTML中使用字体**: 使用`font-family`属性指定刚刚定义的字体，如果浏览器支持并且找到了该字体： ```html <p style="font-family: YourCustomFont;">这段文字会使用自定义字体</p> ``` 记得替换`YourCustomFont`为你的实际字体名称，以及`url`中的路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值