[JavaScript知识库]VUE引用外部字体tff及常见bug解决方案

1. 引用字体步骤

1.1 web.base.conf.js 文件需要有解析tff文件的规则，在module:{ rules:{}}中插入代码

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

1.2 在src下新增字体文件

?1.3 font.css文件

@font-face {
  font-family: 'Mistral'; /* //字体名 */
  /* src: url('font/MISTRAL.ttf') format('truetype'); /* //引入字体 */
  src: url-loader('font/MISTRAL.ttf');
  font-weight: normal;
  font-style: normal;
}

?1.4 App.vue 中引用字体文件

<style>

@import './common/font/font.css';

</style>

注：或者无需新建font.css，直接在style中引用字体

1.5 在需要改变字体的地方增加字体即可

font-family: 'Mistral';

注：方法一完全加载CSS文件后才可正常显示字体，在此之前仍显示默认字体，故需等待一段时间。

2. 常见bug解决方案

2.1 字体文件后缀大小写不匹配

webpack.base.conf.js 解析ttf文件区分大小写，需要修改字体后缀为小写；

2.2 web.base.conf.js 无CSS 规则

error in ./node_modules/_element-ui@2.15.2@element-ui/lib/theme-chalk/index.css

webpack.base.conf.js 不能解析css文件，需自己增加规则；

      {
        test:/\.css$/,
        loader:'css-loader!style-loader',
        exclude: /node_modules/
      }

2.3 引用方式需匹配
根据webpack.base.conf.js 解析ttf文件的option确认引用源文件的方式url / url-loader