vue下怎么引入ttf字體文件

發布時間：2022-10-17 10:48:15 來源：億速云閱讀：603 作者：iii 欄目：開發技術

本文小編為大家詳細介紹“vue下怎么引入ttf字體文件”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue下怎么引入ttf字體文件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1.首先，在vue-cli中創建一個vue.js項目；

vue create project-name

2.vue.js項目創建好后，在項目中創建一個font.css文件，添加以下代碼；

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

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

3.font.css文件創建好后，在webpack.base.conf.js文件中進行以下配置；

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

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

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

讀到這里，這篇“vue下怎么引入ttf字體文件”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站