当前位置: 首页 > news >正文

在React项目中引入字体文件并使用

一、背景

设计稿里某些文字所用的字体,系统默认不支持。
比如设计需要的这个字体:EmerlandRegular,即使在css里将文字字体设置为他们,实际效果也显示不出来。

二、现象及原因

1、样式

在这里插入图片描述

2、期待效果

在这里插入图片描述

3、实际效果

在这里插入图片描述
实际上是因为这个字体不在系统的预置字体库里,所以找不到,就显示了默认的字体样式。

三、解决办法

法1

在电脑C:\Windows\Fonts下,将所需要的 .ttf 文件拷贝进去即可。

法2、

法1的方法固然可行,但是这样就造成了每当换一台设备访问网站时,字体都是缺失的,那么如何在项目中使用该字体呢
1、在项目public文件夹下新建一个fonts文件夹,用于存放字体,然后将字体 .ttf 文件复制到这个文件夹下
2、在public下新建一个font.css,文件内容里加上对新引入的字体的定义

@font-face {  font-family: YouSheBiaoTiHei;  src: url('./fonts/YouSheBiaoTiHei-2.ttf');}

这就声明了一种新字体,字体名叫YouSheBiaoTiHei,字体文件的路径就是src指定的路径。
在这里插入图片描述
3、修改public/index.html文件,在head中添加这一行:

<link rel="stylesheet" href="./font.css" rel="external nofollow" >

这样,就成功的把字体文件引入项目了。
4、使用
因为我们在font.css里给新字体起的名叫YouSheBiaoTiHei,所以在使用的时候,就像以前那样,给需要的文字设置fontFamily为"YouSheBiaoTiHei"即可。

fontFamily:'YouSheBiaoTiHei'

运行即可看到字体效果已经成功显示了。
在这里插入图片描述

相关文章:

在React项目中引入字体文件并使用

一、背景 设计稿里某些文字所用的字体&#xff0c;系统默认不支持。 比如设计需要的这个字体&#xff1a;EmerlandRegular&#xff0c;即使在css里将文字字体设置为他们&#xff0c;实际效果也显示不出来。 二、现象及原因 1、样式 2、期待效果 3、实际效果 实际上是因为这个…...

STM32 CubeMX按键点灯

本文代码使用 HAL 库。 文章目录前言一、按键原理图二、CubeMX 创建工程三、代码讲解&#xff1a;1. GPIO的输入HAL库函数&#xff1a;2. 消抖&#xff1a;3. 详细代码四&#xff0c;实验现象&#xff1a;总结前言 我们继续讲解 stm32 f103&#xff0c;这篇文章将详细 为大家讲…...

2023链动2+1模式到底是什么?带你了解核心规则

2023链动21模式到底是什么&#xff1f;带你了解核心规则 2023-02-24 梦龙 大家好&#xff0c;我是你们熟悉而又陌生的好朋友梦龙&#xff0c;一个创业期的年轻人 传统的直销模式产品低价高卖&#xff0c;消费者难以接受。虽然直销省去了传统流通渠道的中间环节&#xff0c;但…...

【Java面试八股文宝典之基础篇】备战2023 查缺补漏 你越早准备 越早成功!!!——Day14

大家好&#xff0c;我是陶然同学&#xff0c;软件工程大三今年实习。认识我的朋友们知道&#xff0c;我是科班出身&#xff0c;学的还行&#xff0c;但是对面试掌握不够&#xff0c;所以我将用这100多天更新Java面试题&#x1f643;&#x1f643;。 不敢苟同&#xff0c;相信大…...

K8S篇-搭建kubenetes集群

安装环境 这里使用pve虚拟机搭建三台centos机器&#xff0c;搭建过程参考: Centos篇-Centos Minimal安装 此次安装硬件配置 CPU&#xff1a;2C 内存&#xff1a;2G 存储&#xff1a;64G 环境说明 操作系统&#xff1a;Centos 7.9 内核版本&#xff1a;6.2.0-1.el7.elrepo…...

文本生成图像简述4——扩散模型、自回归模型、生成对抗网络的对比调研

基于近年来图像处理和语言理解方面的技术突破&#xff0c;融合图像和文本处理的多模态任务获得了广泛的关注并取得了显著成功。 文本生成图像&#xff08;text-to-image&#xff09;是图像和文本处理的多模态任务的一项子任务&#xff0c;其根据给定文本生成符合描述的真实图像…...

财务共享建设,为什么需要电子影像系统?

某集团作为投资性集团公司&#xff0c;业务遍布全国20多个省市&#xff0c;控股公司200余家&#xff0c;业务范围涉及火电、供热、风电、天然气天然气、水务、铁路、港口、酒店、地产等20多个细分行业。 伴随着集团企业的快速发展&#xff0c;某集团在管理中面临“点多、面广、…...

「RISC-V Arch」SBI 规范解读(下)

第六章 定时器扩展&#xff08;EID #0x54494D45"TIME"&#xff09; 这个定时器扩展取代了遗留定时器扩展&#xff08;EID #0x00&#xff09;&#xff0c;并遵循 v0.2 中定义的调用规约。 6.1 函数&#xff1a;设置定时器&#xff08;FID #0&#xff09; struct sbi…...

Android framework socketpair

简述 在Linux中&#xff0c;socketpair函数可以用于创建一对相互连接的、通信域为AF_UNIX的套接字&#xff0c;其中一个套接字可用于读取&#xff0c;另一个套接字可用于写入。可以使用这对套接字在同一进程内进行进程间通信&#xff08;IPC&#xff09;。 以下是使用socketp…...

腾讯在海外游戏和短视频广告领域的新增长机会

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 腾讯(00700)的收入在过去几个季度一直在下降&#xff0c;部分原因是由于新冠疫情导致的经济放缓以及中国监管机构对大型科技公司的监管收紧导致游戏行业萎缩造成的。 然而&#xff0c;猛兽财经认为&#xff0c;这些不利因素…...

查找该学号学生的成绩。

从键盘输入某班学生某门课的成绩&#xff08;每班人数最多不超过40人&#xff09;&#xff0c;当输入为负值时&#xff0c;表示输入结束&#xff0c;试编程从键盘任意输入一个学号&#xff0c;查找该学号学生的成绩。**输入格式要求&#xff1a;"%ld"(学号) "%l…...

为Webpack5项目引入Buffer Polyfill

前言 最近在公司的一个项目中使用到了Webpack5&#xff0c; 然而在使用某个npm包的时候&#xff0c;出现了Buffer is not defined 这个问题&#xff0c;原因很明显了&#xff0c;因为浏览器运行时没有Buffer这个API&#xff0c;所以需要为浏览器引入Buffer Polyfill. Webpack5…...

【人工智能 AI 】您可以使用机器人流程自动化 (RPA) 实现自动化的 10 个业务流程:Robotic Process Automation (RPA)

摘:人类劳动正在被机器(例如在工业中)或计算机程序(适用于所有行业)所取代。 目录 10 processes you can robotise in your company您可以在公司中实现自动化的 10 个流程 Human employees or robotic workers?人类员工还是机器人工人? Robots take over headhunting…...

VMware ESXi 8.0b - 领先的裸机 Hypervisor (Dell HPE Custom Image update)

本站发布 Dell 和 HPE 定制版 ESXi 8.0b 镜像 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-esxi-8/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;www.sysin.org 产品简介 VMware ESXi&#xff1a;专门构建的裸机 Hyper…...

Java:SpringBoot 整合Spring-Retry实现错误重试

SpringBoot 整合Spring-Retry可以实现错误重试 目录引入依赖开启spring-retry使用重试注解Retryable 注解Backoff 注解测试参考引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactI…...

MyBatis学习笔记(二) —— 搭建MyBatis项目

2、搭建MyBatis 2.1、开发环境 IDE&#xff1a;idea 2019.2 构建工具&#xff1a;maven 3.5.4 MySQL版本&#xff1a;MySQL 8 MyBatis版本&#xff1a;MyBatis 3.5.7 MySQL不同版本的注意事项 1、驱动类 driver-class-name MySQL 5版本使用jdbc5驱动&#xff0c;驱动类使用…...

linux服务器上Docker中安装jenkins

前言 Jenkins是开源CI&CD软件领导者&#xff0c; 提供超过1000个插件来支持构建、部署、自动化&#xff0c; 满足任何项目的需要。 本文主要提供通过docker安装jenkins镜像&#xff0c;并配置nginx反向代理页面配置和使用。通过jenkins完成项目的自动部署。 我在安装之前…...

自考都有哪些科目?怎么搭配报考?

第一次自考科目搭配 先报理论课&#xff0c;熟悉学习和考试套路 参考搭配模式&#xff1a; 一、全报考公共课 公共课难度较低&#xff0c;通过率高&#xff0c;复习起来比较轻松。对于不确定考什么专业&#xff0c;后期想换专业的同学&#xff0c;考过公共课&#xff0c…...

HIVE --- 高级查询

目录 CTE和嵌套查询 嵌套查询 关联查询&#xff08;join&#xff09; MapJoin MapJoin操作在Map端完成 开启MapJoin操作 MAPJOIN不支持的操作 union 数据交换&#xff08;import/export&#xff09; 数据排序 order by sort by distribute by cluster by CTE和嵌…...

【手撕源码】vue2.x双向数据绑定原理

&#x1f431; 个人主页&#xff1a;不叫猫先生 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab;系列专栏&#xff1a;vue3从入门…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...