如何在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项目引入字体文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了初学React,如何规范的在react中请求数据,主要介绍了使用axios进行简单的数据获取,加入状态变量,优化交互体验,自定义hook进行数据获取和使用useReducer改造请求,本文主要适合于刚接触React的初学者以及不知道如何规范的在React中获取数据的人2023-09-09
在 React 里,ref 就像是一个神奇的小助手,能让你直接去访问 DOM 元素或者组件实例,下面就跟随小编一起来学习一下具体的使用方法吧2025-03-03
这篇文章主要介绍了详解使用WebPack搭建React开发环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了react实现Radio组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
解决React报错Cannot find namespace context
这篇文章主要为大家介绍了React报错Cannot find namespace context分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了React八大常见错误及其解决方案,并通过代码示例介绍的非常详细,对大家学习react有一定的帮助,感兴趣的朋友可以参考下2024-03-03
这篇文章主要为大家介绍了ReactNative集成个推消息推送过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
React从react-router路由上做登陆验证控制的方法
本篇文章主要介绍了React从react-router路由上做登陆验证控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了webpack构建react多页面应用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
路由是React项目中相当重要的概念，对于功能较为复杂的网页来说，必然会涉及到不同功能间的页面跳转，本篇文章将对React官方维护的路由库React-Router-Dom的使用和常用组件进行讲解，同时对路由组件传递param参数的方式进行讲解，希望对各位读者有所参考2022-08-08
最新评论