React和vue等前端html页面引入自定义字体文件,更改页面字体样式

news2024/9/28 1:20:26

font-family中列出的是几乎适用于所有计算机的网络安全字体,如:Arial/Helvetica/Georgia/Times New Roman等。但是如果想要一些特别的字体,可以从外部网站中找到并下载,然后在代码中引入。网页自带的字体没有很多,有时候想使用我们自己的字体文件去修改网页字体效果,就可以使用这种方法。需要提前准备自己的字体文件。

以下是一些获取字体的网站:

  1. fontsquirrel.com
  2. fonts.com
  3. my fonts.com

首先需要在网站上挑选合适的字体并下载到本地,这里我选用了一种很火的免费字体:opensans,在fontsquirrel.com中找到并下载。

将下载好的otf或者WOFF和WOFF2格式的字体文件导入项目中,并打开附带的stylesheet.css,这里定义了注册字体文件的规则。将这个文件中的内容复制到项目css文件的顶部(放顶部是因为先注册才能使用字体)并将URL改成字体文件的相对路径。

@font-face {
    font-family: Hado;
    src: url('../assets//my.otf');
    font-weight: normal;
    font-style: normal;
}

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Hado;
}

然后将这个css文件引入到html页面中就可以了:这是引入后的效果

 

 

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

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

相关文章

2023年中国钢木装甲门产量、销量及市场规模分析[图]

钢木装甲门是一种结合了钢质和木材的复合材料门,其结构由钢质外壳和内部木质框架组成。钢木装甲门通常具有钢质外壳的坚固性和安全性,以及内部木质框架的美观和装饰性。 钢木装甲门行业分类 资料来源:共研产业咨询(共研网&#x…

【Java 进阶篇】CSS 属性

当你学习CSS时,了解CSS属性是非常重要的,因为这些属性控制了网页上元素的外观和布局。本文将详细介绍一些常见的CSS属性,包括文本属性、盒子模型属性、背景和边框属性、定位属性等。我们还将为每个属性提供示例代码,以便你更好地理…

MP逻辑删除

一、什么是逻辑删除 MybatisPlus中逻辑删除通俗说为了在数据库中保留数据,但是又不想进行其他一些sql语句时有他(刚刚通过逻辑删除了的)的存在。就是在数据库中添加一字段,通过数值内容来说明那些是指删除了的即可 二、逻辑删除…

智能筛选超时物流订单的技巧详细揭秘

现如今,电子商务的快速发展使得快递成为了我们日常生活中不可或缺的一部分。然而,随着快递量的增加,快递查询的问题也开始变得棘手起来。有时候,我们会遇到快递超时的情况,而这时候我们需要一种快捷的方式来查询快递的…

今年的秋招面试,确实有点难。

不可否认的是,今年秋招确实有点难 从今年的形势来看,好的 offer 都掌握在少数人的手里,想要秋招找到理想的工作,要么学历好,要么技术功底很扎实,这两样都不占的话,就业压力就会比较大。 如何从…

电机保护器究竟该怎么选择

随着我国重工业以及电气和各行各业的发展,电动机保护器似乎成为行业精英口中最常讨论的话题!施耐德EOCR自然也是充当着不可磨灭的地位!成为电机保护器品牌中选择率最高的产品! 在谈到有关电动机保护器的问题时,先给大家说一下什么…

低代码开发那些事儿

长期以来,常规软件开发是一项艰苦而详尽的工作。开发人员编写代表指令和数据的单行代码。他们将代码组织成功能例程和模块,这些例程和模块提供了软件的功能。 这种方法需要在应用程序开发范围内对各个方面的技术都有详细的知识:开发语言&…

Java异常到底是个啥——一次异常引发的思考

一、前言 最近在一次写代码的时候,出现了一个低级错误,但凡对异常有些了解,也不至于写出这样的代码: try {//不应该直接在try语句块中抛异常,catch直接获取后,相当于异常没抛出去throw new ThirdPlatform…

Layui合计自定义列

需求:第四列通过计算:27除以220 正常的汇总,增加这个属性就行 特殊的列,需要特殊处理 获取合计行:$(".layui-table-total div.layui-table-cell"); 获取某列的值:$($(".layui-table-total …

你真的懂Java的继承吗?你知道什么时候用继承吗?设计继承是为了什么?

目录 1. 封装的意义是什么? 2. 为什么需要继承? 3. 继承是什么?如何使用? 4. 继承的好处是什么? 5. 设计继承需要注意什么? 6. 继承的特点 7. 子类到底继承了父类的哪些内容 7.1 继承内容 7.2 虚方…

企业安全生产隐患排查治理系统

安全生产隐患排查治理系统,实现对重大危险源企业、安全隐患信息的登记、审查、评估、分类、统计、分析和处理。系统涵盖了安全隐患排查整治工作的各项基本内容,能对隐患排查整治信息及时、有效地进行跟踪、整改,并将统计数据及时上报&#xf…

一键报警全网通4G可视对讲终端4G 有线双网络可视对讲终端

一键报警全网通4G可视对讲终端 4G 有线双网络可视对讲终端 产品简介: 一键求助对讲广播终端是用于平安城市、公交车站,公交车,高速收费站,景区,公园,工厂,养老院,银行、医院、学校…

腾讯云我的世界mc服务器配置选择(价格值得)

腾讯云服务器开Minecraft我的世界服务器配置怎么选择?10人以内玩2核4G就够用了,腾讯云开我的世界服务器选择轻量应用服务器就够了,轻量CPU采用至强白金处理器,大型整合包一般1.12版本的,轻量2核4G配置都差不多的&#…

面试必考精华版Leetcode547. 省份数量

题目&#xff1a; 代码&#xff08;首刷看解析&#xff09;&#xff1a; class Solution { public:void dfs(vector<vector<int>>& isConnected,vector<int>& isVis,int i){int n isConnected.size();for(int j0;j<n;j){if(isConnected[i][j]1 …

深度学习基础知识 学习率调度器的用法解析

深度学习基础知识 学习率调度器的用法解析 1、自定义学习率调度器**&#xff1a;**torch.optim.lr_scheduler.LambdaLR2、正儿八经的模型搭建流程以及学习率调度器的使用设置 1、自定义学习率调度器**&#xff1a;**torch.optim.lr_scheduler.LambdaLR 实验代码&#xff1a; i…

安装Docker(Linux:CentOS)

大家好我是苏麟今安装一下Docker. 安装Docker Docker 分为 CE 和 EE 两大版本。CE 即社区版&#xff08;免费&#xff0c;支持周期 7 个月&#xff09;&#xff0c;EE 即企业版&#xff0c;强调安全&#xff0c;付费使用&#xff0c;支持周期 24 个月。 Docker CE 分为 stab…

抖音seo源码矩阵系统--源码源头技术开发

抖音SEO源码矩阵系统是一款基于源码源头技术开发的全新系统。它通过优化抖音的搜索引擎优化(SEO)机制&#xff0c;帮助用户提升抖音视频的曝光量和搜索排名&#xff0c;从而增加视频的流量和观众数量。系统提供了一系列强大的功能&#xff0c;包括关键词研究、标题优化、标签管…

PlantUML 绘图

官网 https://plantuml.com/zh/ 示例 绘制时序图 USB 枚举过程 PlantUML 源码 startuml host <-- device : device insert host note right : step 1 host -> device : get speed, reset, speed check note right : step 2 host -> device …

Android性能优化,有关内存抖动与解决方案

一、内存抖动 1.内存抖动的危害 由于垃圾回收机制老年代里面的标记清理算法&#xff0c;大有大量对象创建并快速销毁后&#xff0c;会在内存里面留下大量的内存碎片&#xff0c;这时如果有大对象需要申请内存时&#xff0c;就会产生OOM。 2.如何查看程序是否有内存抖动现象 …

小白网络安全学习手册—黑客

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…