vue中引入第三方字體文件的方法示例

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

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

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

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

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

或者https://www.jb51.net/fonts/點擊此鏈接，進行字體下載

2.將字體文件引入

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

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

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

在App.vue中的style里引入

<style lang="less" rel="stylesheet/less">
 @import "./common/font/font.css";
</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進行開發(fā)的時候，在引用字體圖標遇到字體無法加載的問題：

報以下錯誤

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

修改字體圖標的css中引入字體文件的路徑

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

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

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

新聞標題：vue中引入第三方字體文件的方法示例
網(wǎng)頁地址：http://www.muchs.cn/article24/gehije.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈、做網(wǎng)站、虛擬主機、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)