在工程的static文件中新建fonts文件夹并将下载好的web字体文件夹以字体名称为名放入fonts文件夹下，目录结构如下图：

本文使用的这个炒鸡丑的英文字体为AhsanCalligraphyRegular，字体文件一般包含eot/woff/ttf/svg四种文件类型；Because 不同浏览器识别的字体格式不同，故需要四种文件类型

然后直接上代码

vue工程中App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 引入外部字体，不同浏览器识别的字体格式不同，故需要四种文件类型 */
@font-face {
  font-family: 'AhsanCalligraphyRegular';   /*字体名称*/
  src: url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.eot');
  src: url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
       url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.woff') format('woff'),  /* Modern Browsers */
       url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.ttf') format('truetype'),  /* Safari, Android, iOS */
       url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.svg#AhsanCalligraphyRegular') format('svg');  /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}
</style>

Helloword.vue 中就可以直接调用字体了

<div class="hello">
    <h1 style="font-family: 'AhsanCalligraphyRegular'">Gyosho Test English</h1>
  </div>

启动web服务，npm run dev 这样就可以看到这个炒鸡丑的字体了，就下面的最后一行

英文字体只有26个英文字母，但是中文大约有8万,而常用的也有3500字，所以中文字体裤是比较大的，何况还需要四种格式，所以在web加载的时候很耗费网络资源，字体文件太大，加载慢，怎么办呢？要是我们只加载我们用到的字体就好了，蹬蹬蹬瞪··· ···
我们来学习一个神器： font-spider（github地址：https://github.com/aui/font-spider）

这玩意的作用

1. 压缩字体：智能删除没有被使用的字形数据，大幅度减少字体体积
2. 生成字体：只用一个ttf格式，即可有 woff2、woff、eot、svg
   字体格式生成 使用方式见官网： http://font-spider.org/

若是使用了gulp，就直接用相应的构建工具gulp-font-spider（https://github.com/aui/gulp-font-spider）

目前还没有用到vue-cli中如何结合字体压缩，后续用到了继续分享，谢谢！