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

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

3、打開font.css

這里注意兩個問題：
（1）URL里面必須是絕對路徑；
否則：

（2）如果使用使用絕對路徑，必須文件上傳到自己服務(wù)器的CDN
否則：

@font-face {font-family: 'HYLiLiangHeiJ';src: url('https://img.csgo.com.cn/csgo/ef/93/ef93dac6227d93600dc14bdafb6b72241563429818.ttf')format('truetype');font-weight: normal;font-style: normal; }

這里我使用了 CDN地址~

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

utils 是第三方庫函數(shù)，需要自己定義。如果使用CDN的話，options可以直接注釋掉

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

不引入utils 報錯：

5.App.vue引入字體

6、可在vue文件中使用字體

7.使用字體后效果

總結(jié)

以上是生活随笔為你收集整理的vue引入外部字体的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。