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

vue项目中引入字体包

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

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

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

下载并放置字体包

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

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

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

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

全局引用

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

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

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

image-20211123095540176

相关文章:

vue项目中引入字体包

问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步 一 下载对应的字体包文件,放置到我们的项目中 ​ 比如我需要PingFangSC的系列字体&#…...

Linux 文件相关操作

文件相关操作 编辑文件 命令: vi 文件名 然后输入i进入编辑模式 编辑完成后输入esc退出编辑 输入:wq保存即便目录下没有这个文件,也可以想使用vi 文件名进行编辑,保存退出后会创建这个文件 查看文件内容 命令: cat 文件名复…...

【计算机网络】应用题方法总结

0.前言本篇博客主要记录自己在学习到的部分解决计算机网络应用题方法,主要参考视频如下:计算机网络期末复习 应用题_哔哩哔哩_bilibili【计算机网络】子网划分题型总结_哔哩哔哩_bilibili循环冗余码step 1:确定冗余码长度。多项式最高位即为冗…...

Linux 浅谈之性能分析工具 perf

Linux 浅谈之性能分析工具 perf HELLO,各位博友好,我是阿呆 🙈🙈🙈 这里是 Linux 浅谈系列,收录在操作系统专栏中 😜😜😜 本系列将记录一些阿呆个人整理的 OS 相关知识…...

代码随想录-Day7:四数相加、三数之和

454. 四数相加 II 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0示例 1&#xff1a; 输入&#xff1…...

jsp在线考试系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 jsp 在线考试系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5 开发&#xff0c;数据库为Mysql&#xff0c;使用j…...

【总结】2023数学建模美赛!收官!

今年的美赛时间是2.17-2.21&#xff0c;这学期疫情放开了之后管的没那么严了&#xff0c;我们小组就都提前一天到学校了&#xff0c;全力准备17号的比赛。 时间流程 刚拿到6个题的时候&#xff0c;我们三个人一人看两个题&#xff0c;每个人从两个题中再选出来一个自己觉得有…...

C# GDI+ winform绘图知识总结

一、Graphics GDI是GDI&#xff08;Windows Graphics Device Interface&#xff09;的后继者&#xff0c;它是.NET Framework为操作图形提供的应用程序编程接口&#xff0c;主要用在窗体上绘制各种图形图像&#xff0c;可以用于绘制各种数据图像、数学仿真等。 Graphics类是G…...

【研究空间复用及函数调用问题】

本篇总结函数调用过程会存在的一些奇怪现象&#xff0c;空间复用问题&#xff0c;其实本质上涉及函数调用的底层原理&#xff0c;理解函数栈帧的创建和销毁这样的问题直接迎刃而解。1.空间复用问题案例1案例22.函数调用过程不清晰问题案例33.总结1.空间复用问题 案例1 我们先…...

SQL常用查询语句

SELECT语句用于查询数据库中的内容 目录 1 查询指定表的所有内容 2 显示所有行的指定列 3 显示指定行的指定列 4 对查询结果进行排序 4.1 按照单一字段排序 4.2 多重排序 5 查询数据总数 5.1 查询一共有多少行 5.2 统计符合条件的有多少行 6 给查询出来的…...

【Python实战】一大波高颜值主播来袭:快看,某网站颜值排名,为了这个排名我可是大费周章啦,第一名不亏是你...(人脸检测+爬虫实战)

导语 民间一直有个传闻......「听说某站的小哥哥小姐姐颜值都很高哦&#xff01;」 &#xff08;不是颜值高才能加入&#xff0c;是优秀的人恰好颜值高&#xff09; 所有文章完整的素材源码都在&#x1f447;&#x1f447; 粉丝白嫖源码福利&#xff0c;请移步至CSDN社区或文末…...

Linux进程学习【三】

✨个人主页&#xff1a; Yohifo &#x1f389;所属专栏&#xff1a; Linux学习之旅 &#x1f38a;每篇一句&#xff1a; 图片来源 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 Perseverance is not a long race; it is many short races one after another…...

Spring自动装配的底层逻辑

Spring是如何自动装配Bean的&#xff1f;看源码一些自己的理解&#xff0c;如有错漏&#xff0c;请指正 使用Spring之前我们要先去web.xml中设置一下Spring的配置文件&#xff0c;在Spring的配置文件中&#xff0c;是通过component-scan扫描器去扫描base-package底下所有的类装…...

华为OD机试 - 数组合并(C++) | 附带编码思路 【2023】

刷算法题之前必看 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址:https://blog.csdn.net/hihell/category_12199283.html 华为OD详细说明:https://dream.blog.csdn.net/article/details/128980730 华为OD机试题…...

在vue3+ts的项目中,如何解决vant组件自带表单校验不生效?

问题描述&#xff1a; 点击发送验证码后&#xff0c;为了让逻辑更加严谨&#xff0c;使用了vant组件自带的表单校验&#xff0c;进行二次校验&#xff0c;防止验证码发送成功后&#xff0c;登录手机号被二次修改&#xff0c;但根据官网描述cv之后不生效&#xff0c;甚至连获取…...

华为OD机试真题Python实现【子序列长度】真题+解题思路+代码(20222023)

子序列长度 题目 有 N 个正整数组成的一个序列 给定一个整数sum 求长度最长的的连续子序列使他们的和等于sum 返回次子序列的长度 如果没有满足要求的序列 返回-1 🔥🔥🔥🔥🔥👉👉👉👉👉👉 华为OD机试(Python)真题目录汇总 ## 输入 两行输入 第一行…...

【答疑现场】我一个搞嵌入式的,有必要学习Python吗?

【答疑现场】我一个搞嵌入式的&#xff0c;有必要学习Python吗&#xff1f; 文章目录1 写在前面2 一个结论3 Python在嵌入式领域能干啥事4 Python是用来干大事的5 友情推荐6 福利活动大家好&#xff0c;我是架构师李肯&#xff0c;一个专注于嵌入式物联网系统架构设计的攻城狮。…...

MySQL存表报错问题 Incorrect string value

MySQL存表报错问题 Incorrect string value 问题 Incorrect string value: ‘\xF0\xA8\xA5\xA5\xE5\xAD…’ for column ‘xxxxxxx’ at row 1 意思是错误的字符&#xff0c;常出现在添加中文字符的时候。这个问题的产生原因主要是因为一些特色中文字符或者Emoji表情占4个字…...

SAP ABAP DIALOG长文本编辑框

1. 在SCREEN100 中创建一个定制控制(容器)&#xff0c;命名为PP *&---------------------------------------------------------------------* *& Report ZTEST_TEXT *& *&---------------------------------------------------------------------* *& *…...

电子技术——负反馈特性

电子技术——负反馈特性 本节我们进一步深入介绍负反馈特性。 增益脱敏性 假设 β\betaβ 是一个常数。考虑下面的微分方程&#xff1a; dAfdA(1Aβ)2dA_f \frac{dA}{(1 A\beta)^2} dAf​(1Aβ)2dA​ 将上式除以 AfA1AβA_f \frac{A}{1A\beta}Af​1AβA​ 得到&#xff1…...

丹青幻境部署案例:高校数字艺术实验室低成本GPU算力复用方案

丹青幻境部署案例&#xff1a;高校数字艺术实验室低成本GPU算力复用方案 1. 项目背景与挑战 很多高校的数字艺术、动画设计或新媒体专业&#xff0c;都面临一个共同的难题&#xff1a;教学和创作需要强大的AI绘图能力&#xff0c;但专门采购一批高性能GPU服务器&#xff0c;预…...

Carla仿真实战:3种高效定位车辆生成点的方法(附代码示例)

Carla仿真实战&#xff1a;3种高效定位车辆生成点的方法&#xff08;附代码示例&#xff09; 在自动驾驶仿真开发中&#xff0c;精确控制车辆生成位置是构建测试场景的基础需求。许多开发者在使用Carla时都遇到过车辆"乱跑"的问题——明明指定了坐标&#xff0c;生成…...

PolSARPro软件安装全攻略:从下载到处理Sentinel-1A数据的保姆级教程

PolSARPro软件安装全攻略&#xff1a;从下载到处理Sentinel-1A数据的保姆级教程 在遥感数据处理领域&#xff0c;PolSARPro无疑是一颗璀璨的明珠。这款由法国雷恩第一大学开发的极化合成孔径雷达处理软件&#xff0c;已经成为科研人员和学生处理Sentinel-1A等卫星数据的首选工具…...

Java 开发 日志技术

1.概述为什么要在程序中记录日志呢&#xff1f;便于追踪应用程序中的数据信息、程序的执行过程。便于对应用程序的性能进行优化。便于应用程序出现问题之后&#xff0c;排查问题&#xff0c;解决问题。便于监控系统的运行状态。2.日志框架JUL&#xff1a;这是JavaSE平台提供的官…...

零配置部署Wan2.2-I2V-A14B:RTX4090D优化镜像实战,快速生成高质量视频

零配置部署Wan2.2-I2V-A14B&#xff1a;RTX4090D优化镜像实战&#xff0c;快速生成高质量视频 1. 开箱即用的视频生成解决方案 想象一下&#xff0c;你只需要一条简单的文本描述&#xff0c;就能在几分钟内生成一段高清视频——夕阳下的海浪拍打着沙滩&#xff0c;海鸥在低空…...

为什么企业还在用有漏洞的Weblogic?CVE-2019-2725背后的升级困境与临时解决方案

企业级Weblogic漏洞管理&#xff1a;CVE-2019-2725的实战应对策略 当安全团队第37次在周报中标注"Weblogic CVE-2019-2725漏洞亟待修复"时&#xff0c;某金融企业的CTO看着测试环境里崩溃的支付网关系统&#xff0c;默默将升级计划表又往后推了一周。这不是个案——据…...

遥感影像裁剪避坑指南:如何用ENVI5.3的Subset功能精准提取县区数据(含背景值设置技巧)

遥感影像裁剪避坑指南&#xff1a;ENVI5.3 Subset功能深度解析与实战技巧 当你在处理县域尺度的遥感影像分析时&#xff0c;是否遇到过裁剪后图像边缘出现黑边、数据丢失或坐标错位的问题&#xff1f;这些看似简单的操作细节&#xff0c;往往成为影响后续分析精度的关键因素。本…...

VisionPro多模板匹配实战:CogPMAlignMultiTool从入门到精通(附完整代码)

VisionPro多模板匹配实战&#xff1a;CogPMAlignMultiTool从入门到精通 在工业视觉检测领域&#xff0c;多模板匹配技术正成为复杂场景下的关键解决方案。当单一模板无法覆盖产品多变的形态时&#xff0c;CogPMAlignMultiTool展现出强大的适应性。本文将带您深入掌握这一工具的…...

别再让蜂鸣器只会‘哔哔’叫了!用STM32F103的PWM和电容,DIY你的家电提示音库(附超级玛丽彩蛋)

用STM32F103打造专业级家电提示音库&#xff1a;从单调蜂鸣到沉浸式音效的进阶指南 1. 为什么传统蜂鸣器音效总让人皱眉&#xff1f; 每次听到微波炉完成加热时刺耳的"嘀——"声&#xff0c;或是洗衣机结束运转时机械的"哔哔"提示&#xff0c;总让人有种想…...

Blender Python API实战:AI辅助3D建模自动化脚本开发

1. 为什么需要AI辅助Blender脚本开发 第一次打开Blender时&#xff0c;相信很多人都会被它复杂的界面吓到。密密麻麻的菜单栏、数不清的快捷键、各种专业术语...作为一个从Maya转战Blender的老3D设计师&#xff0c;我完全理解这种挫败感。但后来发现&#xff0c;Blender最强大的…...