在用vue來寫一官網(wǎng)的時候，想引入外部字體文件，畢竟總感覺他自己的字體有點(diǎn)難看，在這里記錄下

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了宣恩免費(fèi)建站歡迎大家使用！

1.先下載字體文件所需的.ttf文件

我這里想引入的是華文行楷字體

百度后下載了一個3M多的ttf文件

或者h(yuǎn)ttps://www.jb51.net/fonts/點(diǎn)擊此鏈接，進(jìn)行字體下載

2.將字體文件引入

自己定義一個文件夾，放入下載好的.ttf文件

先自己定義一個font.css文件，將下載好的字體文件的路徑引入

@font-face {
 font-family: "華文行楷";
 src: url('stxingka.ttf');
 font-weight: normal;
 font-style: normal;
}

在App.vue中的style里引入

在webpack的配置文件里要加上解析.ttf文件的規(guī)則

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

使用的話，就按照原本的字體名稱，如我下的是華文行楷，就直接用華文行楷就可以了

在用vue + webpack進(jìn)行開發(fā)的時候，在引用字體圖標(biāo)遇到字體無法加載的問題：

報以下錯誤

搞了好久沒搞定，最后才找到解決方法（還是沒有找到原因）

修改字體圖標(biāo)的css中引入字體文件的路徑

以前的---->>修改后：

最后改成絕對路徑就好了，但是原因還沒搞懂

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。