Vue项目中引入外部字体文件

1、导入字体文件( .ttf格式)

1.下载相应的字体文件,或者找ui设计师要一份。一般字体文件使用 .ttf 格式的即可。
将准备好的字体文件,放在项目中,文件目录示例如下:

在这里插入图片描述

2.创建一个font.css文件用于定义这个字体包的名字
在这里插入图片描述

@font-face {
    font-family: "Open-Sans";
    src: url('./Open-Sans-2.ttf');
    font-weight: normal;
    font-style: normal;
}

3. 然后在main.js中将这个css文件引入(全局使用) ,

// 在 main.js 中引入字体包
import '@/assets/fontFamily/font.css'

(也可以单页面引用 (单页面使用噢))

4.在需要的地方使用即可:

.container {
    min-height: 100%;
    color: #fff;
    font-family: 'Open-Sans';
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

zookeeper快速入门四:在java客户端中操作zookeeper

系列文章&#xff1a; zookeeper快速入门一&#xff1a;zookeeper安装与启动-CSDN博客 zookeeper快速入门二&#xff1a;zookeeper基本概念-CSDN博客 zookeeper快速入门三&#xff1a;zookeeper的基本操作 先启动zookeeper服务端。 在maven引入zookeeper依赖。 <depende…

C++项目——集群聊天服务器项目(十三)客户端登录、注册、退出业务

截止到上节&#xff0c;我们已将服务器端主要代码介绍完毕&#xff0c;由于不可能一直手动输入信息&#xff0c;所以我们还需编写客户端代码&#xff0c;进行双向通信。 客户端不要求高并发&#xff0c;因此我们这里不使用muduo网络库的TcpClient类编写&#xff0c;仅采用C自带…

ComplexHeatmap绘图:注释、图例、热图基础(自备)

目录 基础介绍 Heatmap绘图基础参数 数据 作图参数 Heatmap Annotations&#xff08;注释&#xff09; 基础注释设置 简单注释测试 anno_points散点注释 anno_lines连线注释 anno_barplot条形图 anno_boxplot箱线图 anno_histogram直方图 热图组合 基础组合 进行…

使用idea一次性删除java文件中所有的注释内容 /* */

将.class文件转成.java文件后&#xff0c;.java文件每行都会生成注释/* */&#xff0c;下面是通过idea的替换功能&#xff0c;使用正则表达式删除注释/* */。 我使用MacBook&#xff0c;commandR打开替换查找替换界面&#xff0c;第一步选中 .* &#xff0c;第二步在…

虚拟机与开发板之间互传文件、文件夹

1.配置桥接模式实现外网访问 1.1设置 VMnet0 要桥接的网卡 打开【编辑】-【虚拟网络编辑器】 选择【更改设置】 选择【VMnet0】&#xff0c;选择桥接到宿主机上的哪个网卡。 通过打开安装虚拟机的宿主机的【网络适配器】&#xff0c;可以查看网卡名称。 1.2虚拟机配置桥接模式…

Idea2023创建Servlet项目

① Java EE 只是一个抽象的规范&#xff0c;具体实现称为应用服务器。 ② Java EE 只需要两个包 jsp-api.jar 和 servlet-api.jar&#xff0c;而这两个包是没有官方版本的。也就是说&#xff0c;Java 没有提供这两个包&#xff0c;只提供了一个规范。那么这两个包是谁提供的…

Java23种常见设计模式汇总

七大原则网站地址&#xff1a;设计模式7大原则&#xff0b;类图关系-CSDN博客 创建型设计模式&#xff1a;创建型设计模式合集-CSDN博客 七大结构型设计模式&#xff1a;7大结构型设计模式-CSDN博客 11种行为型设计模式&#xff1a; 11种行为型模式&#xff08;上&#xff0…

Xmind安装在指定目录

场景&#xff1a; Xmind安装默认是安装C盘。 问题描述 一般用户都习惯将软件安装在其他盘&#xff0c;但是Xmind不支持安装的时候指定磁盘或目录。 解决方案&#xff1a; 1、在D盘创建一个文件夹&#xff0c;用于安装Xmind&#xff0c;比如创建一个D:\Program Files (x86)…

MyBatis动态SQL--if 标签

mybatis动态sql对我们来说是非常常见的&#xff0c;比如在下面这样一个场景中&#xff0c; 我们需要多条件查询&#xff0c;但是查询的条件又不是固定的&#xff0c;是可以动态改变的&#xff0c;那我们就需要用到动态sql去完成。 动态SQL之 if 标签 接下来我们介绍第一个动态…

【Java代码审计】S2-045 远程代码执行漏洞分析复现

【Java代码审计】S2-045 远程代码执行漏洞分析复现 1.漏洞原理2.靶场复现 1.漏洞原理 官方对该漏洞的描述是这样的&#xff1a;Struts2 默认处理 multipart 上传报文的解析器为 Jakarta 插件&#xff08;org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest类&a…

基于opencv的SVM算法的车牌识别系统设计与实现

基于opencv的SVM算法的车牌识别系统设计与实现 车牌识别技术是智能交通系统中的一项关键技术&#xff0c;它能够自动识别车辆的车牌号码。本文将详细介绍如何使用Python编程语言结合OpenCV库和SVM算法来实现车牌识别系统。 系统架构 车牌识别系统主要包括以下几个模块&…

外贸建站:WordPress搭建外贸独立站零基础自建站完整教程(2024)

对于做外贸来说&#xff0c;拥有自己的外贸独立网站真的非常重要。在外贸领域&#xff0c;如今各平台竞争激烈&#xff0c;规则多&#xff0c;成本高&#xff0c;价格战、政策变化快&#xff0c;还存在封店风险等等因素。在这种情况下&#xff0c;拥有外贸独立站就能很好规避上…

JavaSE:抽象类和接口

目录 一、前言 二、抽象类 &#xff08;一&#xff09;抽象类概念 &#xff08;二&#xff09;使用抽象类的注意事项 &#xff08;三&#xff09;抽象类的作用 三、接口 &#xff08;一&#xff09;接口概念 &#xff08;二&#xff09;接口语法规则 &#xff08;三&a…

八口快速以太网交换机芯片方案分享/JL5110

以太网交换机(switch)是一种网络设备&#xff0c;用于在局域网中连接多个计算机和其他网络设备。它可以实现多个端口之间的同时传输&#xff0c;并根据MAC地址进行帧过滤和转发。交换机通过自学习的方式&#xff0c;将MAC地址与相应的接口关联起来&#xff0c;以便将数据帧准确…

Termius for Mac v8.4.0激活版下载

Termius for Mac是一款功能强大的多协议远程管理软件&#xff0c;专为开发人员、系统管理员和网络专业人士设计。它支持多种远程连接协议&#xff0c;如SSH、Telnet、RDP、VNC和RFB等&#xff0c;使得用户可以轻松连接到不同类型的远程服务器和设备。 软件下载&#xff1a;Term…

湖北兴发MES和用友NCC单据接口对接

湖北兴发MES和用友NCC单据接口对接 对接系统用友NCC 用友NCCloud&#xff0c;为客户提供面向大型企业集团、制造业、消费品、建筑、房地产、金融保险等14个行业大类&#xff0c;68个细分行业&#xff0c;涵盖数字营销、智能制造、财务共享、数字采购等18大解决方案&#xff0c;…

为什么要用能量回馈式负载

能量回馈式负载是一种能够将电能转化为其他形式能量的装置&#xff0c;同时还能将其他形式的能量转化为电能。这种负载在许多应用中具有重要的意义&#xff0c;因为它可以提高能源利用效率&#xff0c;减少能源浪费&#xff0c;降低环境污染&#xff0c;提高系统的稳定性和可靠…

Python3.10 - 列表的常用方法

01 列表的切片 lst [a, b, 1, 2, [c1, 1]]# 01 列表的切片 lst1 lst[0:2] # 从0开始切到1(顾头不顾尾), 切得长度超过1时, 切出来为list类型 print(lst1, type(lst1))lst2 lst[0] # 从中切某个元素时, 切出来的类型即元素本身, 以下同理 print(lst2, type(lst2))lst3 ls…

“由于找不到opencv_world3413.dll,无法继续执行代码”的解决方法

问题 在Windows系统中&#xff0c;编译完涉及到opencv的项目后&#xff0c;提示&#xff0c; 由于找不到opencv_world3413.dll&#xff0c;无法继续执行代码 解决方法 在编译好的opencv的bin文件内&#xff08;如&#xff1a;D:\code\vs2017\opencv\build\x64\vc15\bin&…

Spring Boot 学习(2)——HelloWorld

HelloWorld&#xff01;全宇宙码农的第一个&#xff08;行&#xff09;程序&#xff08;代码&#xff09;。 1、创建项目 打开idea&#xff0c;新建一个maven项目。 1&#xff09;选择项目sdk&#xff08;本例是1.8&#xff09; 2&#xff09;输入GroupId&#xff08;co…