在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字

一、需求分析

在我们写前端页面的时候，大部分时候是不需要用到第三方字体的，但如果是面向C端的页面，比如宣传页，就有可能会引入第三方字体，主要还是看UI设计师咋想了，此时我们可以通过让UI将特殊字体切成图（最简单的解决方案）来解决，但是这样很麻烦，而且不方便调整样式。那么我们就可以使用第二种方案了：让UI导出字体文件(.ttf / .TTF)，然后我们以第三方字体的形式来进行引入。

二、解决方案

1、在项目的assets文件夹下创建一个fonts的文件夹

不是必须在这个文件夹下，名字也不是非得叫 fonts ，只不过是我个人认为放在这个位置比较合适。因为assets本来就是一个存放静态资源的文件夹，把 fonts 放在很合理。

2、将UI给的字体文件放到该目录下

字体文件应该都是以 .ttf / .TTF 结尾的文件，将它复制进 fonts 文件夹。

3、在 fonts 文件夹中新建一个fonts.css 文件

该文件用来引入字体，除了.css 文件，.less 、.sass 也都可以。

4、在 fonts.css 文件中引入字体，并定义字体名称

font-family 表示使用字体时的名称，src 表示字体文件的位置。

5、在项目中使用第三方字体，分为以下两种情况：

① 部分文件使用，可单独进行引用

如果仅仅是在少数几个文件中需要用到第三方字体，那我们可以对应的页面文件中直接进行引用：
先在style中，通过import 将fonts.css引入页面中，然后就可在页面中通过fonts.css中定义的字体名称来使用对应的第三方字体。此方法在Vue.js 和 Nuxt.js 项目中通用。

② 全局进行引用

Nuxt.js 项目中：
在 nuxt.config.js 文件中的 css 模块中 进行引用，之后就可以在项目中的所有页面中进行使用了：

Vue.js 项目中（待验证）：
可以在main.js中全局引入：

也可以在 APP.vue的style 中全局引入：