vue怎么引入ttf字體文件

發(fā)布時(shí)間：2022-04-21 16:15:10 來源：億速云閱讀：526 作者：iii 欄目：大數(shù)據(jù)

這篇文章主要介紹了vue怎么引入ttf字體文件的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue怎么引入ttf字體文件文章都會(huì)有所收獲，下面我們一起來看看吧。

具體步驟如下：

1.首先，在vue-cli中創(chuàng)建一個(gè)vue.js項(xiàng)目；

vue create project-name

2.vue.js項(xiàng)目創(chuàng)建好后，在項(xiàng)目中創(chuàng)建一個(gè)font.css文件，添加以下代碼；

@font-face {
font-family: 'FZCYJ'; //重命名字體名

src: url('FZCYJ.ttf'); //引入字體
font-weight: normal;
font-style: normal;
}

3.font.css文件創(chuàng)建好后，在webpack.base.conf.js文件中進(jìn)行以下配置；

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

4.最后，webpack.base.conf.js文件配置好后，在項(xiàng)目中使用@import方法即可引入ttf字體文件；

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

關(guān)于“vue怎么引入ttf字體文件”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue怎么引入ttf字體文件”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

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

猜你喜歡