vue 字体引入

1、把字体文件.ttf放到assets文件夹下的 fonts文件夹。

2、在assets文件夹下创建一个styles文件夹，之后也可以用于存放一些公共的样式文件。再新建一个 font.css 文件，引入字体。

@font-face {
  font-family: Snickles;
  src: url('../fonts/Snickles-webfont.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Ronda;
  src: url('../fonts/RondaITCbyBT-Roman.otf');
  font-weight: normal;
  font-style: normal;
}

3、在项目中（main.js）引入刚刚加载进来的字体

import '@/assets/styles/font.css'

4、cli2中，在webpack.base.conf.js 文件添加以下代码配置。在cli3中则不用配置，可以直接使用。 cli2:

{// 对字体资源文件使用url-loader
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // hash:7 代表 7 位数的 hash       
    }
}

5、使用

.class{
    font-family:"Ronda";
}