vue項目引入字體.ttf的方法

更新時間：2018年09月28日 09:46:42 作者：lilongwei4321

今天小編就為大家分享一篇vue項目引入字體.ttf的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

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

vue 引入字體.ttf

3、打開font.css

@font-face { 
 font-family: 'FZCYJ'; //重命名字體名
 src: url('FZCYJ.ttf'); //引入字體
 font-weight: normal; 
 font-style: normal; 
}

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

vue 引入字體.ttf

5、App.vue引入字體

vue 引入字體.ttf

6、可在body中設置字體

body{
 font-family: FZCYJ;
}

以上這篇vue項目引入字體.ttf的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue結合el-upload實現騰訊云視頻上傳功能
這篇文章主要介紹了vue結合el-upload實現騰訊云視頻上傳功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
Vue異步組件使用詳解
這篇文章主要為大家詳細介紹了Vue異步組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
Vue CLI2升級至Vue CLI3的方法步驟
這篇文章主要介紹了Vue CLI2升級至Vue CLI3的方法步驟,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
基于Vue.js與WordPress Rest API構建單頁應用詳解
這篇文章主要介紹了基于Vue.js與WordPress Rest API構建單頁應用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09
vue中下拉框組件的封裝方式
這篇文章主要介紹了vue中下拉框組件的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue實現3D環(huán)形圖效果
這篇文章主要為大家詳細介紹了vue實現3D環(huán)形圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue渲染過程淺析
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
vue微信分享出來的鏈接點開是首頁問題的解決方法
這篇文章主要為大家詳細介紹了vue微信分享出來的鏈接點開是首頁問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
Vue3+Vite4項目進行性能優(yōu)化的配置方案
這篇文章主要為大家詳細介紹了Vue3如何結合Vite4對項目進行性能優(yōu)化的相關配置,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2025-04-04
淺談Vue單頁面做SEO的四種方案
Vue SPA單頁面應用對SEO不友好，當然也有相應的解決方案，通過查找資料，大概有以下4種方法，本文就詳細的介紹一下
2021-10-10