如何在React项目中引入字体文件并使用详解
前言
在做React项目的时候，发现UI设计给出的设计稿里，某些文字所用的字体，系统默认不支持。比如设计需要的这个字体：EmerlandRegular，即使在css里将文字字体设置为他们，实际效果也显示不出来。
<Typography
style={{
fontSize:'22px',
fontFamily:'EmerlandRegular',
textAlign:'center',
color:'#3A3A3A',
marginTop: '10px',
}}
>
This teacher is good
</Typography>
期待效果：
实际效果：
实际上是因为这个字体不在系统的预置字体库里，所以找不到，就显示了默认的字体样式。要想达到期待的字体效果，需要把字体文件引入项目才行。
下面讲下如何引入字体文件并使用
一、下载字体包
这一步就不多说了，字体包从网上找，或者让UI设计师提供给你。
下载好的字体包一般是个压缩包，打开后有多个字体文件，如图：
这么多字体文件，哪个是我们需要的呢，看文件名，分为两种，带italic的和不带的，显然带italic的就是斜体字文件，而不带italic的就是我们想要的正常字体文件。但是后缀又有otf, ttf, woff几种，选哪个呢，其实这几种都是文件格式有区别，显示出来一般是没什么区别的，就跟word文档也可以存为好几种文档后缀一样，可以随意选一种先看看。这里我们使用 Emerland.ttf文件。
二、将字体文件放到项目里
1.在项目public文件夹下新建一个fonts文件夹，用于存放字体，然后将字体文件复制到这个文件夹下。
2.在public下新建一个font.css，文件内容里加上对新引入的字体的定义：
@font-face {
font-family: EmerlandRegular;
src: url('./fonts/Emerland.ttf');
}
这就声明了一种新字体，字体名叫EmerlandRegular，字体文件的路径就是src指定的路径。
上面这两步如图：
3.修改index.html文件，添加这一行：
<link rel="stylesheet" href="%PUBLIC_URL%/font.css" rel="external nofollow" >
添加位置如图：
这样，就成功的把字体文件引入项目了。
三、使用新字体
因为我们在font.css里给新字体起的名叫EmerlandRegular，所以在使用的时候，就像以前那样，给需要的文字设置fontFamily为"EmerlandRegular"即可。
fontFamily:'EmerlandRegular'
运行即可看到字体效果已经成功显示了。
总结
到此这篇关于如何在React项目中引入字体文件并使用的文章就介绍到这了,更多相关React项目引入字体文件内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
原文出处：https://blog.csdn.net/fenggering/article/details/125023698
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误，本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂，把地图想成一个盒子容器，地图中心点想成盒子中心点；扎点在【地图中心点】不会动，当移动地图时，去获取【地图中心点】经纬度，设置某个位置的时候，将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程（安卓部分）为例，给大家分析 React Native 的启动流程，需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了js简单实现调整网页字体大小的方法,通过javascript动态修改页面元素样式实现调整网页字体的功能,非常简单实用,需要的朋友可以参考下...2016-07-29
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state，React 会在重复渲染时保留这个 state，接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧...2021-06-13
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-04-06
- 本文主要介绍了react为什么不推荐使用index作为key，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-22
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题，是小编给大家总结的一些react知识点，本文通过一个项目需求实例代码详解给大家介绍的非常详细，需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序，本文给大家介绍的非常详细，需要的朋友可以参考下...2021-08-14
- Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用,这篇文章主要给大家介绍了关于微信小程序引入Vant框架的相关资料,需要的朋友可以参考下...2021-06-08
- 本篇文章主要介绍了React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-10-15
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-07-27
- 这篇文章主要介绍了react自动化构建路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-23