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

最新推荐文章于 2024-07-03 23:56:01 发布
最新推荐文章于 2024-07-03 23:56:01 发布
阅读量800 收藏
点赞数
分类专栏： vue.js css 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiubinxu/article/details/136535077
版权
vue.js 同时被 2 个专栏收录
22 篇文章 10 订阅 ¥9.90 ¥99.00
订阅专栏 超级会员免费看
css
6 篇文章 0 订阅
订阅专栏

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

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

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

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

@font-face {
   
  font-family: 'PingFangSC-Light';
  font-style: normal;
了解本专栏 订阅专栏 解锁全文 超级会员免费看
xuxb000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
PingFang SC 字体
maolianshuai的专栏
11-14 3314
项目中设计师使用了大量的平方字体，做个笔记，方便日后查看 1、获取平方字体代码 NSString *fontfamilyname = @"PingFang SC"; //[UIFont familyNames] CGFloat y = 64; for (NSString *fontName in [UIFont fontNamesForFamilyName:fontfamilyname]) { UIFont *font = [UIFont fontWit
vue3使用pingfang字体
IU
03-13 1338
自行百度.下载完解压后会得到如图所示的ttf文件，将文件拷贝到项目src/static文件夹下。
前端项目，引入PingFang SC字体
weixin_30553777的博客
08-06 9951
在仿苹果官网"垃圾桶"时， 设计出的UI使用PingFang SC 字体，在网上查了很久，特记录。如果你有更好的方法，欢迎评论留言~ 实现原理，使用@font-face将字体下载在用户电脑中，然后font-family使用字体。 关于font-face链接 css: @font-face { font-family: 'myFont'; src: ...
前端页面，引入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
02-20
PingFang Bold.ttf；PingFang Light.ttf； PingFang 简粗.ttf ；PingFang 简体.ttf； PingFang 简细.ttf ；PingFang-SC-Regular.otf； PingFang-SC-Semibold.ttf
iOS-PingFangSC字体
热门推荐
ZFJ_张福杰
11-25 5万+
1.iOS9.0以后系统自带了平方字体PingFangSC，但是在iOS9.0以前，是没有平方字体PingFangSC的，如果我们想用平方字体，在iOS9.0以上是好的，但是在低于9.0的系统上是找不到这个字体的，例如： UIFont *font = [UIFont fontWithName:@"PingFangSC-Regular" size:18]; 2.我们得到的
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项目引入字体.ttf的方法
12-09
1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 ...以上这篇vue项目引入字
vue wps插件引入到前端项目js
06-30
将WPS插件引入Vue.js项目，首先需要确保项目环境已经准备就绪，包括Node.js、Vue CLI（Vue命令行工具）以及相关依赖库。步骤如下： 1. **安装Vue CLI**：如果尚未安装，可以通过命令行运行`npm install -g @vue/cli...
解决vue 项目引入字体图标报错、不显示等问题
12-02
解决方法为：把字体引入方式改为绝对路径 2、不报错，但是不显示图标字体，出现方框 原因可能有两种： ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的...
vue项目前端埋点的实现
10-17
在Vue项目中实现前端埋点是一项关键任务，用于收集用户行为数据，以便分析用户交互、优化用户体验和制定营销策略。本文将深入探讨两种常见的前端埋点技术：命令式埋点和声明式埋点，并结合Vue的自定义指令和路由拦截...
ios swift5 设置PingFangSC字体
baidu_40537062的博客
01-14 2544
文章目录1.代码2.在storyboard中的设置3.字体类型（style）的中英文对照参考博客 1.代码 UIFont(name: "PingFangSC-Semibold", size: 16) //精选动态label lazy var headLabel:UILabel = { let attributedString = NSAttributedString(string: "精选动态", attributes: [NSAttributedString.Key.font
pingfangsc字体_2020-iOS GUI-字体规范
weixin_39588911的博客
12-01 2449
在IOS 最初的设计中，在输出原型图和交互稿中，就会运用到字体，比如字体的大小和类型。下面的内容主要分为2部分：实战 AND 理论001-实战：看了就能用上在iOS的中文设计中：标题的字体大小是34px, 用的是 苹方/Pingfang SC 字体。具体可以看下图的一些规律。这些规律具有普遍性（下面有标题是加粗的字号,regular/Semi-Bold）。但是也存在特殊性的场合，标题的字体大小远远...
pingfang css,前端项目，引入PingFang SC字体
weixin_36027833的博客
08-03 1887
在仿苹果官网"垃圾桶"时， 设计出的UI使用PingFang SC 字体，在网上查了很久，特记录。如果你有更好的方法，欢迎评论留言~实现原理，[emailprotected]，然后font-family使用字体。css:@font-face {font-family: ‘myFont‘;src: url(‘/assets/font/PingFangSC-Light.ttf‘); //你的资源目录...
css中引入自定义字体PingFang-SC-Regular
Amumu168的博客
06-14 1万+
网页中想使用自定义的字体PingFang-SC-Regular，需要在css中引入 @font-face { font-family: 'PingFang-SC-Regular'; src:url('../fonts/PingFang-SC-Regular.eot'); src:url('../fonts/PingFang-SC-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/PingFang
PING FANG 苹方 字体压缩
PaPablame的博客
01-04 956
在我们开发的时候为了页面美观会引入一些字体，但是这些字体包体积有很大，就会造成页面加载很慢的问题，例如下图，加载一个字体就用了18s，这样给用户造成了很不好的体验，所以我们就需要把字体给压缩了，一般字体的格式有woff ,woff2。第三步：输入命令进行压缩 PINGFANG_SC_REGULAR_1.TTF（需要压缩的文件名），sc_unicode.txt（字体编码列表文件）这样我们就得到一个woff2格式的字体了，最后看看下面这张图的效果，差不多把原来10M大小的文件压缩为了800多kb。
Vuex 核心揭秘：打造高效前端状态库
最新发布
a3098448071的博客
07-03 1143
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
前端vue项目引入echart通过接口获取数据
12-07
前端vue项目引入echart，可以通过以下步骤来通过接口获取数据： 第一步，安装echart库和vue-echarts库。 在命令行中运行以下命令来安装echart和vue-echarts库： ```shell npm install echarts vue-echarts ``` 第二步，引入echart和vue-echarts库。 在vue项目的入口文件（通常是main.js）中引入echart和vue-echarts库： ```javascript import Vue from 'vue' import ECharts from 'vue-echarts' import 'echarts' Vue.component('v-chart', ECharts) ``` 第三步，在组件中使用vue-echarts来展示图表。在需要展示图表的vue组件中，通过调用echart的接口获取数据，并将数据传入到vue-echarts中进行渲染： ```javascript <template> <v-chart :options="chartOptions" /> </template> <script> export default { data() { return { chartOptions: {} } }, methods: { fetchData() { // 通过接口获取数据 // 这里可以使用axios或者其他网络请求库来调用接口获取数据 // 假设获取到的数据为responseData let responseData = { /* 获取到的数据 */ } // 将数据传入echart的options中 this.chartOptions = { // 这里根据echart的配置要求，将responseData中的数据传入到options中 } } }, mounted() { // 在组件挂载后调用fetchData方法来获取数据并渲染图表 this.fetchData() } } </script> ``` 通过以上步骤，我们可以在vue项目中引入echart，并通过接口获取数据来展示图表。这样就可以实现在前端vue项目中使用echart来展示动态数据的图表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值