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';
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

zookeeper如何管理客户端与服务端之间的链接?(zookeeper sessions)

zookeeper客户端与服务端之间的链接用zookeeper session表示。 zookeeper session有三个状态: CONNECTING, ASSOCIATING, CONNECTED, CONNECTEDREADONLY, CLOSED, AUTH_FAILED, NOT_CONNECTED(start时的状态) 1、CONNECTING 。 表明客户…

开源大模型AI代理操作系统:像Windows一样,操控AI代理

去年,AutoGPT的出现让我们见识到了AI代理强大的自动化能力,并开创了一个全新的AI代理赛道。但在子任务调度、资源分配以及AI之间协作还有不少的难题。 因此,罗格斯大学的研究人员开源了AIOS,这是一种以大模型为核心的AI代理操作系…

UE5 C++ Interface接口

一.创建接口 声明Attack() 和 Calculatehealth()虚函数 UINTERFACE(MinimalAPI) class UMyInterface : public UInterface {GENERATED_BODY() };/*** */ class PRACTICEC_API IMyInterface {GENERATED_BODY()// Add interface functions to this class. This is the class tha…

C++ 静态库与动态库的生成和使用:基于 VS Studio 生成 newmat 矩阵库的静态库与动态库

文章目录 Part.I IntroductionChap.I 预备知识Chap.II 静态库与动态库区分 Part.II 静态库的生成与使用 (newmat)Chap.I 生成静态库Chap.II 使用静态库 Part.III 动态库的生成与使用 (newmat)Chap.I 生成动态库Chap.II 使用动态库 Part.IV 文件内容Chap.I test.cpp (静态库)Cha…

探索iPhone GPU架构:了解其硬件设计与特性

摘要 了解你的显卡对于在电脑上玩现代图形要求高的游戏非常重要。本文介绍了如何轻松查看你的显卡型号以及为什么显卡在玩电脑游戏时如此关键。 引言 随着电脑游戏的发展,现代游戏对硬件性能的要求越来越高。十年前发布的显卡已经无法满足当前游戏的需求。因此&…

鸿蒙分布式音乐播放-如何完成播放、暂停、上一曲、下一曲功能

介绍 本示例使用fileIo获取指定音频文件,并通过AudioPlayer完成了音乐的播放完成了基本的音乐播放、暂停、上一曲、下一曲功能;并使用DeviceManager完成了分布式设备列表的显示和分布式能力完成了音乐播放状态的跨设备分享。 本示例用到了与用户进行交…

《书生·浦语大模型全链路开源开放体系》学习笔记

书生浦语大模型全链路开源开放体系-学习笔记 大模型成为发展通用人工智能的重要途径专用模型通用大模型 书生大模型开源历程InternLM2回归语言建模的本质主要亮点性能全方位提升强大的内生计算能力 从模型到应用典型流程全链条开源开放体系数据数据集获取预训练微调XTuner 评测…

pymc,一个灵活的的 Python 概率编程库!

目录 前言 安装与配置 概率模型 贝叶斯推断 概率分布 蒙特卡罗采样 贝叶斯网络 实例分析 PyMC库的应用场景 1. 概率建模 2. 时间序列分析 3. 模式识别 总结 前言 大家好,今天为大家分享一个超强的 Python 库 - pymc Github地址:https://gith…

第六十二:flex布局踩过的坑

flex布局好久不用了,今天踩过的坑记载一下: display:flex,加上了justify-content: space-between;导致上边三个平分了但是下边两个在两边,如下图: 其实最简单的方法就是去掉justify-content: space-between&#xff0c…

文件夹无法打开?教你轻松应对数据恢复挑战

在日常办公和生活中,电脑中的文件夹承载着大量的文件和数据,是我们不可或缺的工作伙伴。然而,有时我们可能会遇到一个令人头疼的问题——文件夹无法打开。这不仅会阻碍我们的正常工作进度,还可能导致重要数据的丢失。那么&#xf…

界面控件DevExtreme JS ASP.NET Core 2024年度产品规划预览(一)

在本文中我们将介绍今年即将发布的v24.1附带的主要特性,这些特性既适用于DevExtreme JavaScript (Angular、React、Vue、jQuery),也适用于基于DevExtreme的ASP.NET MVC/Core控件。 注意:本文中列出的功能和特性说明官方当前/预计的发展计划&a…

厨房装修新趋势,6个必看设计。福州中宅装饰,福州装修

厨房是家庭中最重要的区域之一,因此装修设计非常重要。现在,人们更加注重厨房的功能性和美观性,因此新旧设计交替成为了一种趋势。 01. 以前:普通插座 后期因电器过多,插座数量不够,使用插线板不仅显得混…