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

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.hqwc.cn/news/130715.html

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

相关文章

设计模式 - 状态模式

目录 一. 前言 二. 实现 一. 前言 状态模式(State Pattern):它主要用来解决对象在多种状态转换时,需要对外输出不同的行为的问题。状态和行为是一一对应的,状态之间可以相互转换。当一个对象的内在状态改变时&#x…

c#学习系列相关之多线程(三)----invoke和begininvoke

一、invoke和BeginInvoke的作用 invoke和begininvoke方法的初衷是为了解决在某个非某个控件创建的线程中刷新该控件可能会引发异常的问题。说的可能比较拗口,举个例子:主线程中存在一个文本控件,在一个子线程中要改变该文本的值,此…

Helm upgrade 时 no matches for kind “xxxx“ in version “xxxx“ 问题处理

1. 问题 kubernetes 升过级,但是 helm release 旧版本中有新版本 api 弃用的 version。 在 helm upgrade 时就出现类似如下版本不匹配的错误,导致 helm upgrade 失败。 当然 helm uninstall 再重新安装可能可以跳过这个问题(只要 charts 不再…

点云处理开发测试题目 完整解决方案

点云处理开发测试题目 文件夹中有一个场景的三块点云数据,单位mm。是一个桌子上放了一个纸箱,纸箱上有四个圆孔。需要做的内容是: 1. 绘制出最小外接立方体,得到纸箱的长宽高值。注意高度计算是纸箱平面到桌子平面的距离。 2. 计算出纸箱上的四个圆的圆心坐标和半径,对圆…

【论文阅读】面向抽取和理解基于Transformer的自动作文评分模型的隐式评价标准(实验结果部分)

方法 结果 在这一部分,我们展示对于每个模型比较的聚合的统计分析当涉及到计算特征和独立的特征组(表格1),抽取功能组和对齐重要功能组(表格2),并且最后,我们提供从模型比较&#x…

vue js 实现页面在浏览器全屏切换

需求&#xff1a; 在浏览器中点击按钮实现页面的全屏与非全屏的切换。 如图&#xff1a; 全屏前&#xff1a; 全屏后&#xff1a; 具体实现代码如下&#xff1a; html&#xff1a; <template><div class"development-history" id"echarts-wrap&quo…

制作电商页面(Html)

任务 制作一个电商页面&#xff0c;要求所卖物品清晰&#xff0c;页面色调清晰&#xff0c;要有主页和详情页。 网站所买物品&#xff1a;书籍 色调&#xff1a;#FF2400 橙红色 代码 主页HTML代码&#xff1a; <html><head><meta charset"utf-8"…

ElasticSearch 学习8 :ik分词器的扩展,及java调用ik分词器的analyzer

1.前言&#xff1a; 上篇已经说过ik的集成&#xff0c;这篇说下ik的实际使用 2.2、IK分词器测试 IK提供了两个分词算法ik_smart 和 ik_max_word ik_smart&#xff1a;为最少切分ik_max_word&#xff1a;为最细粒度划分。 2.2.1、最小切分示例 #分词器测试ik_smart POST _…

Linux系统编程(2)

手动文件锁定 #include <stdio.h> void flockfile(FILE* stream);void funlockfile(FILE* stream);//非阻塞函数 int ftrylockfile(FILE* stream); 不会锁定流的操作 #define _GNU_SOURCE #include <stdio.h>int fgetc_unlocked(FILE* stream); char *fgets_unl…

有哪些值得推荐的Java 练手项目?

大家好&#xff0c;我是 jonssonyan 我是一名 Java 后端程序员&#xff0c;偶尔也会写一写前端&#xff0c;主要的技术栈是 JavaSpringBootMySQLRedisVue.js&#xff0c;基于我学过的技术认真的对每个分享的项目进行鉴别&#xff0c;今天就和大家分享我曾经用来学习的开源项目…

代码随想录Day15 二叉树 LeetCodeT513 找树左下角的值 T112路径总和 T106 从中序和后序遍历构造二叉树

以上思路来自于:代码随想录 (programmercarl.com) LeetCode T513 找树左下角的值 题目思路: 本题思路:这题我们使用递归法和迭代法解决问题 注意:左下角的值不一定就是一直向左遍历的叶子结点的值,首先可以确定是最后一行的第一个叶子结点的值,也就是最大深度的叶子结点的值 定…

图像上传功能实现

一、后端 文件存放在images.path路径下 package com.like.common;import jakarta.servlet.ServletOutputStream; import jakarta.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annot…