溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue項(xiàng)目中的tff出現(xiàn)報(bào)錯(cuò)怎么解決

發(fā)布時(shí)間：2020-10-26 17:00:10 來源：億速云 閱讀：120 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)Vue項(xiàng)目中的tff出現(xiàn)報(bào)錯(cuò)怎么解決，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

在webpack.config.js中的模塊配置中加如下的配置規(guī)則：

{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"}

const path = require('path');
const htmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); 
 
module.exports = {
  entry: path.join(__dirname,'./src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new htmlWebpackplugin({ //創(chuàng)建一個(gè)在內(nèi)存中生成的html頁(yè)面的插件
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    }),
    new VueLoaderPlugin()
  ],
  module: { //這個(gè)節(jié)點(diǎn)用于配置所有的第三方模塊加載器
    rules: [
      {test: /\.css$/, use:['style-loader','css-loader']},//配置處理.css文件的第三方處理規(guī)則
      {test: /\.less$/, use: ["style-loader",'css-loader','less-loader']},
      {test: /\.scss$/, use: ["style-loader",'css-loader','sass-loader']},
      {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"},
      {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"},
      {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
      {test: /\.vue$/, use: 'vue-loader'}
    ]
  }
};

補(bǔ)充知識(shí)：vue項(xiàng)目引入字體.ttf的操作步驟

1、下載所需要的字體，.ttf格式本文以（FZCYJ.ttf 為例）

2、在src下新建common文件，文件夾中包含以下文件

Vue項(xiàng)目中的tff出現(xiàn)報(bào)錯(cuò)怎么解決

3、打開font.css

@font-face { 
 font-family: 'FZCYJ'; //重命名字體名
 src: url('FZCYJ.ttf'); //引入字體
 font-weight: normal; 
 font-style: normal; 
}

4、配置webpack.base.conf.js 文件

Vue項(xiàng)目中的tff出現(xiàn)報(bào)錯(cuò)怎么解決

5、App.vue引入字體

Vue項(xiàng)目中的tff出現(xiàn)報(bào)錯(cuò)怎么解決

6、可在body中設(shè)置字體

body{
 font-family: FZCYJ;
}

上述就是小編為大家分享的Vue項(xiàng)目中的tff出現(xiàn)報(bào)錯(cuò)怎么解決了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手