如何在前端项目中引入外部字体并使用？

文章目录

一、下载字体
二、使用

文章转自掘金： https://juejin.cn/post/7063111159372578829

在前端开发中，不免遇到会有需要更换字体的需求，这时我们先要给需求方讲清楚更换字体一定要考虑到版权问题，要找有明确说明是免费使用的授权文档，不然一不小心就会成为背锅侠，这可百口莫辩了。我们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文件中写入如下代码：

@font-face
{
    font-family: 'openSans';
    src: url('../fonts/OpenSansCondensed-Light.ttf');
    font-weight: normal;  
    font-style: normal;  
}

@font-face
{
    font-family: 'fzfs';
    src: url('../fonts/FZFSJW.ttf');
    font-weight: normal;  
    font-style: normal; 
}

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

import './assets/style/font.less';

5、样式使用：

.bit-th-cn {
    font-size: 14px;
    font-family: 'fzfs';
    color: #555;
}

.bit-th-en {
    font-family: 'openSans';
    color: #555;
}