Vue · font引入外部字体

方法一：

1、下载所需要的字体，.ttf格式（测试字体）
2、 src下新建css文件，文件夹中包含以下文件

font.css

  @font-face {
    font-family: 'Gen2';
    src: url('./GenJyuuGothicMonospaceHeavy2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
  }

3、引入字体
App.vue

<style>
@import "./assets/font/font.css";
#app div {
  font-family: 'Gen2';
}
</style>

也可以通过main.js引入

import './assets/font/font.css'

方法二：static引入

1、下载所需要的字体，.ttf格式放在static下（测试字体）
2、 引入字体
App.vue

<style>
@font-face {
  font-family: "Gen2";
  src: url("/static/font/GenJyuuGothicMonospaceHeavy2.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
}
#app div {
  font-family: 'Gen2';
}
</style>

注意：
1、配置webpack.base.conf.js 文件
如果使用CDN的话，options可以注释掉

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

2、static里的URL必须是绝对路径，也可以上传到自己服务器的CDN