前端开发项目中使用字体库

开发中有些项目要求使用固定的字体,这就需要项目中使用字体库。

首先需要下载字体库
在这里插入图片描述
将下载的字体文件放进项目中
在这里插入图片描述

在项目代码样式文件中定义字体

@font-face {
  font-family: "Tobias-SemiBold";
  src: url("./assets/font/Tobias-SemiBold.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Tobias-Regular";
  src: url("./assets/font/Tobias-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

运用字体

html, body, #root {
  height: 100%;
  font-family:  Tobias-Regular;
}

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

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

相关文章

Gogs安装和部署教程-centos上

0、什么是 Gogs? Gogs 是一款极易搭建的自助 Git 服务。 Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自助 Git 服务。使用 Go 语言开发使得 Gogs 能够通过独立的二进制分发,并且支持 Go 语言支持的 所有平台,包括 Linux、Mac OS X、Windo…

「题解」环形链表的约瑟夫问题

文章目录 🍉题目🍉解析🍌创建环形链表🍌释放指定节点🍌其他思路 🍉写在最后 🍉题目 🍉解析 题目的意思就是从环形链表的第一个节点开始数,数到第 m 的时候释放对应的节点…

CMake教程--QT项目使用CMake

CMake教程--QT项目使用CMake Chapter1 CMake教程--QT项目使用CMake1. Basic Cmake Based Project2. Executable VS Library3. Every module has its own CMakeList.txt in its folder3.1 不推荐的做法:3.2 推荐的做法 4. 强制以Debug, Release, RelWithDebInfo, Min…

Mac安装与配置eclipse

目录 一、安装Java:Mac环境配置(Java)----使用bash_profile进行配置(附下载地址) 二、下载和安装eclipse 1、进入eclipse的官网 (1)、点击“Download Packages ”​编辑 (2)、找到macOS选择符合自己电脑的框架选项…

人工智能基础_机器学习023_理解套索回归_认识L1正则---人工智能工作笔记0063

然后上一节我们说了L1,L2正则是为了提高,模型的泛化能力, 提高泛化能力,实际上就是把模型的公式的w,权重值,变小对吧. 然后我们这里首先看第一个L1正则,是怎么做到把w权重变小的 可以看到最上面是线性回归的损失函数,然后 L1可以看到,这个正则,就是在损失函数的基础上给损失…

轻松按需缩放图片像素——批量处理图片,满足不同需求!

在图片使用过程中,我们经常需要按照不同的要求调整图片的像素大小。如果一张一张地手动调整,不仅耗时而且容易出错。这款软件可以帮助您轻松实现批量处理图片,按需缩放图片像素,让您的图片管理更加高效、便捷! 第一步…

Vuex持久化插件

Vuex数据默认是存储在内存中的,当然我们也可以将它存储在Local Storage,也可以指定某些数据存储在Local Storage 这样我们就用到了Vuex持久化插件vuex-persistedstate 安装vuex-persistedstate插件 npm install vuex-persistedstate --save 案列&#x…

MPSO-WPA

MPSO-WPA算法 DCAP means ’ discretized Cauchy’s argument principle’ 辅助信息 作者未提供代码

数据结构线性表——带头双向循环链表

前言:小伙伴们好久不见啦,上篇文章我们一起学习了数据结构线性表其一的单链表,了解了单链表的不少好处,但是不可能有完美的数据结构,就算是单链表,也会有很多缺点。 那么今天这篇文章,我们就来…

node插件MongoDB(五)—— 库mongoose 的模块化(五)

文章目录 一、使用mongoose 模块化的原因二、准备工作2. 启动mongo.exe 和mongod.exe 两个程序连接数据库 三、基本模块的拆分1、基本逻辑2、代码3、代码图示说明 四、在index.js 中进一步的拆分1.拆分原因2.新建model文件夹存储文档的结构对象3.代码4.代码实际演示和注意点 一…

用volta管理不同项目node版本

1 什么是volta volta是一个node.js的版本管理工具,你的电脑上安装了很多个node版本,volta可以让你在不同的项目中使用不同版本的node.js,并且可以切换node.js版本 Volta会自动将安装的Node.js版本与该项目绑定,使得您在该项目中执行 node、np…

Linux centos系统中添加磁盘

为了学习与训练文件系统或磁盘的分区、格式化和挂载/卸载,我们需要为虚拟机添加磁盘。根据需要,可以添加多块不同大小的磁盘。具体操作讨论如下,供参考。 一、添加 1.开机前 有两个地方,可选择打开添加硬盘对话框 (1)双击左侧…

2024“点点点”测试员如何上岸测试开发岗?附完整学习路线

有很多人员会不断问自己,自己到底要不要学测试,或者要不要坚持做测试,测试的职业发展到底怎么样?如果你还在迷茫,在到处找各种大牛问类似的问题,我希望这篇文章,你看完能够结束你的这个烦恼&…

iPad系列将在2024年全面更新!

今年还会有新iPad发布吗?答案是否定的。因为早在前几天的季度电话会议上,苹果公司CEO蒂姆・库克就已经宣布,今年不会推出任何新的iPad产品。 这也意味着,今年将是苹果公司自2010年推出首款iPad设备以来,第一次没有发布…

模块化之CJS, AMD, UMD 和 ESM

[[toc]] 模块化优点 防止命名冲突代码复用高维护性CJS, AMD, UMD 和 ESM 历史 ES6之前,JS一直没有自己的模块体系后来社区出现了CommonJS和AMD,CommonJS 主要用于服务器(Node)AMD 主要用于浏览器ES6引入了ESM到此,JS终于有了自己的模块体系,基本上可以完全取代CJS和AMD…

Java基础-面向对象进阶-多态, 包, final, 权限修饰符,代码块

Java基础-面向对象进阶-多态, 包, final, 权限修饰符,代码块 多态多态的概述多态中调用成员的特点多态的优势和弊端多态练习 包final权限修饰符代码块来源Gitee地址 多态 多态的概述 多态: 对象的多种形态多态的前提 有继承/实现关系有父类引用指向子类对象有方法的重写 多态…

ScrollView 与 SliverPadding 的关系

基本页面布局 Scaffold 中有个 ListView&#xff0c;ListView 中有 100 个高 50 的 Container 用作辅助观看&#xff0c;ListView 中第三个元素是一个 GridView&#xff0c;GridView 的滑动效果被禁止。 class GiveView extends GetView<GiveController> {const GiveVi…

【Unity之UI编程】编写一个面板交互界面需要注意的细节

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

【Java】基于SpringBoot创建Web页面并热更新

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍基于SpringBoot创建Web页面并热更新。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下…

低价寄快递寄件微信小程序 实际商用版,对接了低价快递渠道,运营平台赚取差价,支持市面上全部主流快递

盈利模式 快递代下CPS就是用户通过线上的渠道&#xff08;快递小程序&#xff09;&#xff0c;线上下单寄快递来赚取差价&#xff0c;例如你的成本价是5元&#xff0c;你在后台比例设置里面设置 首重利润是1元&#xff0c;续重0.5元&#xff0c;用户下1kg的单页面显示的就是6元…