「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

原来打算在春节期间薅一波掘金的更文挑战羊毛，准备了3篇文章计划冲一下更文时间第一的福利的，但是最终还是没有成功。原因不是忘记了加更文挑战活动链接，就是在等时间的过程中不小心就点到发布按钮，又或者是去打麻将忘记了更文，导致3篇文章都没有薅到羊毛。今天是上班第一天，状态还没有找回，那就摸鱼写一篇文章再冲一冲这个福利，毕竟新年礼盒还是挺香的。

今天打算来说一下如何在Vue和React项目中引入外部字体并实现UI设计稿效果。

需求其实很简单：就是根据UI选取的字体引入项目并使用，实现设计图效果。

看图就知道：label是使用的方正仿宋，英文使用的是Open Sans Condensed Light，其实在我们的页面使用了三种字体，只是由于不能截全部图，所以不能体现，页面常规字体使用的就是微软雅黑。

需求就是如此，一句话就是在项目中如何引入外部字体并使用。

在前端开发中，不免遇到会有需要更换字体的需求，这时我们先要给需求方讲清楚更换字体一定要考虑到版权问题，要找有明确说明是免费使用的授权文档，不然一不小心就会成为背锅侠，这可百口莫辩了。我们UI选取的两个字体都是他去找了相关的授权使用书，证明是免费商业可用，我们才给他使用的，没有授权书我们可不能稀里糊涂的更换字体，这个一定要注意，谨记！

既然版权的问题UI解决了，那我们就不能再去推脱了。那如何在项目中引入外部字体并使用呢？其实很简单，不管项目是Vue还是React，都是一样的，具体做法参考如下：

下载字体最好交给UI去做，因为样式效果是他设计的，自然字体文件也因由他解决，最好使用UI下载好的字体文件，我们只需要告诉UI我们需要.ttf或.otf的字体文件即可，至于其它琐事就麻烦他给你解决完善。如果你非要自己去下载字体文件，那推荐你使用下载字体-http://xiazaiziti.com/网站查找字体并下载。

当所有问题都完美解决之后，就轮到我们出手了。

1、首先我们在assets文件夹中创建fonts文件夹，将下载好的字体放入fonts文件夹中：

2、在assets文件夹中创建style文件夹（我们把重置网页样式，覆盖样式或通用样式都放在style文件夹下），新建一个font.less文件：

3、在font.less文件中写入如下代码：

4、然后在main.js(Vue)或index.tsx(React)中引入：

5、样式使用：

好了，这里就把如何在项目引入外部字体并使用的方法和需要注意的点说完了，其实实现过程很简单，就只需要按照上述步骤一步步来就能完美搞定，所以若以后遇见这样的需求dunk不必紧张，很简单的。

这是2022开工的第一篇文章，年前参与的2022首次参加更文挑战活动还是陆陆续续写了有10篇文章，算是给2022的更文开了一个好头吧，希望后续自己能坚持下来，继续把项目中遇到的更多问题分享出来，让大家一起共勉，加油💪👏。

伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注在走呗^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。