前言

雪雪妹妹今天又有问题啦！她说有时候系统内置的字体库并不满足我们前端开发的需求，当需要使用一些外部字体库的时候，我们要怎么将这些字体引入到项目中并进行使用呢？
那么鸽鸽的这篇文章将教会你如何在vue项目中引入外部字体库。

字体文件放置

在前端代码路径下创建fonts文件夹，并将下载好的字体文件放在该文件夹下：

结构就是：

  • fonts
    • NewYork.otf

配置font.css

在fonts文件夹下创建font.css文件，并在其中写入如下代码，进行字体库声明： 

/* Quicksand字体 可免费商用*/@font-face {
  font-family:"Quicksand-Light-6";
  src:url('Quicksand/Quicksand-Light-6.otf');
  font-weight: normal;
  font-style: normal;}/* NewYork字体 可免费商用*/@font-face {
  font-family:"NewYork";
  src:url('NewYork.otf');
  font-weight: normal;
  font-style: normal;}

其中：
● font-family就是在代码中引用字体时所用的名称
● url就是你的字体相对于fonts文件夹的存放路径
在main.js文件中引入font.css文件 

import '@/assets/theme/fonts/font.css'

在代码中使用字体

✍结尾