在做React项目的时候，发现UI设计给出的设计稿里，某些文字所用的字体，系统默认不支持。比如设计需要的这个字体：EmerlandRegular，即使在css里将文字字体设置为他们，实际效果也显示不出来。

            <Typographystyle={{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">

添加位置如图：

这样，就成功的把字体文件引入项目了。

三、使用新字体

因为我们在font.css里给新字体起的名叫EmerlandRegular，所以在使用的时候，就像以前那样，给需要的文字设置fontFamily为"EmerlandRegular"即可。

fontFamily:'EmerlandRegular'

运行即可看到字体效果已经成功显示了。

在React项目中引入字体文件并使用相关推荐

前端项目中引入字体文件并使用
首先是下载所需的字体文件,将文件存放在自定义的静态资源目录. 然后在需要引入页面的style模块加入如下代码直接在需要的地方引用text_class样式就可以啦
css引入本地字体文件,关于css中引入字体文件
关于css中引入字体文件 css样式代码: @font-face { font-family: Lovelo-Black;//定义font的名字 src: url(font/Lovelo Black. ...
React项目中引入图片
React项目中引入图片一.场景描述二.import 三.require 一.场景描述当我们在react项目中使用img标签时,活着style中使用背景图片时,直接使用相对路径会无法引入图片. ...
react项目中引入百度地图
项目目录如下: 在此index.html中加入如下代码即可: <!DOCTYPE html> <html lang="en"><head>< ...
vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...
vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门在vue项目引入stylus css预处理器,可以让我们的c ...
vue 引入外部less_Vue项目中引入外部文件的方法（css、js、less）
这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less. ...
如何在项目中引入字体库（如阿里巴巴普惠体）
1.先找到你需要的字体下载下来,然后解压. 比如:阿里巴巴普惠体,下载地址https://done.alibabadesign.com/puhuiti2.0 2.解压之后得到安装包,电脑需要安装的可以 ...
vue中引入字体文件
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件我这里想引入的是华文行楷字体百度后下载了一个3M多的ttf文件 2 ...
styl类型文件css,vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门在vue项目引入stylus css预处理器,可以让我们的c ...

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

一、下载字体包。

二、将字体文件放到项目里

三、使用新字体

在React项目中引入字体文件并使用相关推荐

最新文章

热门文章