一、需求分析
在我们写前端页面的时候，大部分时候是不需要用到第三方字体的，但如果是面向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 中全局引入：
版权声明：本文为weixin_45092437原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。