当前位置: 首页 > news >正文

vue项目中引入字体包

问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步

一 下载对应的字体包文件,放置到我们的项目中

​ 比如我需要PingFangSC的系列字体,我先在vue项目中创建了一个文件夹fontFamily,然后把字体文件放到这个文件夹中

下载并放置字体包

二 生成一个css文件将字体包引入项目

​ 例如,我依旧在fontFamily中创建了一个font_f.css文件,在该文件引入我们刚刚放在fontFamily中的字体包。

使用css文件引入对应的字体文件

三 在main.js中全局引入css文件

全局引用

这里我整个项目都要用到这几个字体,所以全局引入了这几个字体,若是一个字体只有某个页面用到,完全可以按需引入,即把第二步的引入字体的代码放到对应vue的文件中引入。

使用的时候,直接使用对应的font-family值即可

例如,想显示为“苹方黑体-中黑”,如下所示:

image-20211123095540176

http://www.lryc.cn/news/16027.html

相关文章:

  • Linux 文件相关操作
  • 【计算机网络】应用题方法总结
  • Linux 浅谈之性能分析工具 perf
  • 代码随想录-Day7:四数相加、三数之和
  • jsp在线考试系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
  • 【总结】2023数学建模美赛!收官!
  • C# GDI+ winform绘图知识总结
  • 【研究空间复用及函数调用问题】
  • SQL常用查询语句
  • 【Python实战】一大波高颜值主播来袭:快看,某网站颜值排名,为了这个排名我可是大费周章啦,第一名不亏是你...(人脸检测+爬虫实战)
  • Linux进程学习【三】
  • Spring自动装配的底层逻辑
  • 华为OD机试 - 数组合并(C++) | 附带编码思路 【2023】
  • 在vue3+ts的项目中,如何解决vant组件自带表单校验不生效?
  • 华为OD机试真题Python实现【子序列长度】真题+解题思路+代码(20222023)
  • 【答疑现场】我一个搞嵌入式的,有必要学习Python吗?
  • MySQL存表报错问题 Incorrect string value
  • SAP ABAP DIALOG长文本编辑框
  • 电子技术——负反馈特性
  • 网站移动端性能优化方法
  • 2023年AI语音会议汇总
  • Mybatis持久层框架 | Mapper加载方式、目录结构解析
  • 九龙证券|创业板向未盈利企业敞开大门 考验投行估值定价能力
  • 「TCG 规范解读」第12章 TPM工作组 TCG身份验证研讨
  • Logstash:在 Logstash 管道中的定制的 Elasticsearch update by query
  • Spring Cloud Kubernetes环境下使用Jasypt
  • Kotlin-面向对象
  • 循环、函数、对象——js基础练习
  • 精确控制 AI 图像生成的破冰方案,ControlNet 和 T2I-Adapter
  • 让师生“不跑腿”,教育数据治理究竟有何魔力