vue项目中引入字体包

news2024/10/7 12:19:32

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

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

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

下载并放置字体包

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

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

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

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

全局引用

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

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

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

image-20211123095540176

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/365941.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

交叉编译 cJSON

交叉编译 cJSON 概述 JSON 是一种轻量级数据交换格式。它可以表示数据、字符串、有序的值序列以及名称/值对的集合。 cJSON 是 ANSI C 中超轻量级的 JSON 解析器。cJSON 旨在成为您可以完成任务的最简单的解析器。它是一个 C 文件和一个头文件。作为一个库,cJSON…

VR全景+汽车,打造汽车销售新模式

在国内汽车市场竞争越来越激烈的背景下,传统汽车、混动汽车、新能源汽车等各类汽车市场正在不断壮大,汽车行业企业必须抓住机遇、迎接挑战,而营销引流则是关键步骤之一。未来,汽车行业的营销方式将更加高效数字化,采用…

Python学习-----lambda式匿名函数

目录 前言: 1.什么是lambda函数 2.使用示例 (1)示例1:与def对比 (2)示例2:与三目运算符 (3)示例3:lambda作为参数传入其他函数 (4&#xff…

linux环境中编译exosip2和osip2库

1 前言 在开发GB/T 28181信令服务或网关时,要使用SIP协议栈。其中一种熟悉的开源库就是exosiposip了。在windows环境中编译eXosip2和osip2比较简便;在linux中,默认方式下编译这2个库,也比较方便。如果要指定库的安装目录&#xf…

网安入门必备的12个kali Linux工具

kali Linux工具帮你评估 Web 服务器的安全性,并帮助你执行黑客渗透测试。 注意:这里不是所提及的所有工具都是开源的。 1. Nmap Nmap ( 网络映射器 )是一款用于 网络发现 和 安全审计 的 网络安全 工具. 主机发现,端口扫描,版本…

mars3d基于vue3.0的widget使用

mars3d在vue3.0生态上开发了两个gis相关开源项目 mars3d-vue-example 和 mars3d-vue-project,在这两个项目中widget都是非常重要的一个模块。通过widget可以在复杂的场景下非常清晰的管理功能模块之间的互斥关系,管理内存,完成不同的功能模块…

ZBC通证月内已翻倍,Nautilus Chain 上线前夕的“开门红”

近日,Zebec Protocol生态通证ZBC迎来了大涨,据悉该通证月内最高涨幅接近了100%,为一众投资者、社区用户、Zepoch节点等带来了可观的回报,并为生态发展注入了十足的信心。我们看到,Zebec Protocol生态在近期宣布了“销毁…

D1s RDC2022纪念版开发板开箱评测及点屏教程

作者new_bee 本文转自:https://bbs.aw-ol.com/topic/3005/ 目录 芯片介绍开发板介绍RT-Smart用户态系统编译使用感想引用 1. 芯片介绍 RISC-V架构由于其精简和开源的特性,得到业界的认可,近几年可谓相当热门。操作系统方面有RT-Thread&am…

Kubernetes 如何通过ingress-nginx实现应用灰度发布?

在日常的工作中,我们会经常对应用进行发版升级,在互联网公司尤为频繁,主要是为了满足快速的业务发展。我们经常用到的发布方式有滚动更新、蓝绿发布、灰度发布。滚动更新:依次进行新旧替换,直到旧的全部被替换为止。蓝…

FATFS函数浅谈 看完学会FATSFS,建议收藏

目录 一、注册工作区域 二、打开文件夹 三、读取文件夹 四、打开\新建一个文件 五、读取文件 六、写文件 七、移动文件指针 八、截断文件 九、刷新缓存消息 十、新建文件夹 十一、删除文件或文件夹 十二、重命名\移动文件或文件夹 十三、获取文件信息 十四、改变…

KNN算法及Python实现

0 建议学时 2学时 1 KNN算法 1.1 KNN原理 KNN:K Nearest Neighbors,即K个最近的邻居; 预测一个新值xxx,根据距离最近的K个点的类别来判断xxx属于哪一类。 算法核心要点: K值的选取非常重要; 距离公式…

山东大学电磁场与电磁波期末试题

文章目录一、电磁场的基本规律二、静态电磁场及其边值问题的解三、分离变量法四、均匀平面波的反射与透射五、时变电磁场与均匀平面波在无界空间中的传播六、导行电磁波七、电磁辐射往年真题回忆复习建议一、电磁场的基本规律 设在 x<0x<0x<0 处为真空&#xff0c;x&…

LeetCode分类刷题----回溯算法

回溯1.回溯问题77.组合216.组合总和|||17.电话号码的字母组合39.组合总和40.组合总和||131.分割回文串93.复原IP地址78.子集90.子集||491.递增子序列46.全排列47.全排列||51.N皇后37.解数独1.回溯问题 77.组合 思路&#xff1a; 回溯的本质是用一棵树来描述&#xff0c;用pat…

Gitee码云 操作

1&#xff1a;Git团队协作机制1.1&#xff1a;团队内协作1.2&#xff1a;跨团队协作2&#xff1a;Gitee码云 操作码云网址&#xff1a; https://githee.com/2.1&#xff1a;创建远程仓库2.2&#xff1a;远程仓库操作命令名称作用git remote -v查看当前所有远程地址别名git remo…

Java缓存面试题——Redis应用

文章目录1、为什么要使用Redis做缓存&#xff1f;2、为什么Redis单线程模型效率也能那么高&#xff1f;3、Redis6.0为什么要引入多线程呢&#xff1f;4、Redis常见数据结构以及使用场景字符串&#xff08;String&#xff09;哈希(Hash)列表&#xff08;list&#xff09;集合&am…

【机器学习】马尔可夫链与隐马尔可夫模型(HMM)

1.马尔可夫链(Markov Chain) 马尔可夫链&#xff08;Markov chain&#xff09;&#xff0c;又称离散时间马尔可夫链&#xff08;discrete-time Markov chain&#xff09;&#xff0c;因俄国数学家安德烈马尔可夫&#xff08;A.A.Markov&#xff09;得名。描述的是状态空间中经过…

Win11系统user profile service服务登录失败解决方法

Win11系统user profile service服务登录失败解决方法分享。有用户在使用电脑的时候遇到了一些问题&#xff0c;系统的user profile service服务无法登录了。出现这个问题可能是系统文件损坏&#xff0c;或者中了病毒。接下来我们一起来看看如何解决这个问题的操作方法分享吧。 …

【unity细节】基于unity子对象(如相机)为什么无法进行z轴的拖拽移动和z轴自动归位的问题

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 收录于专栏&#xff1a;unity细节和bug ⭐基于unity子对象为什么无法进行z轴的拖拽移动和z轴自动归位⭐ 文章目录⭐基于u…

学习系统编程No.5【虚拟地址空间】

引言: 北京时间&#xff1a;2023/2/22&#xff0c;离补考期末考试还有5天&#xff0c;不慌&#xff0c;刚午觉睡醒&#xff0c;闹钟2点20&#xff0c;拖到2点50&#xff0c;是近以来&#xff0c;唯一一次有一种睡不醒的感觉&#xff0c;但是现在却没有精神&#xff0c;因为听了…

【Spring Cloud Alibaba】007-Nacos 配置*

【Spring Cloud Alibaba】007-Nacos 配置* 文章目录【Spring Cloud Alibaba】007-Nacos 配置*一、概述1、概述2、对比 spring cloud config二、基本使用1、在管理界面新建配置2、启动权限3、 搭建 nacos-config 服务第一步&#xff1a;引入依赖第二步&#xff1a;修改 yaml 配置…