VUE引入本地字体图标步骤.md

1. 在项目目录static中新建文件夹fonts。

2. 将本地的字体文件(一般为.ttf、.otf格式)粘贴到fonts目录中。

3. 在公共样式目录下(如src/assets/css目录)创建font.css文件

4. 在font.css文件中将字体汇总：

@font-face {
    font-family: "SourceHanSansCN-Normal";
    src: url('/static/字体/思源黑体/SourceHanSansCN-Normal.otf');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "SourceHanSansCN-Bold";
    src: url('/static/字体/思源黑体/SourceHanSansCN-Bold.otf');
    font-weight: normal;
    font-style: normal;
  }@font-face {
    font-family: "SourceHanSansCN-Regular";
    src: url('/static/字体/思源黑体/SourceHanSansCN-Regular.otf');
    font-weight: normal;
    font-style: normal;

5.在App.vue文件的style标签中导入字体css：
@import "../src/assets/css/font.css";

6.在build文件夹中配置webpack.base.conf.js文件(有的话就不用配置了)：

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