欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項目中使用自定義字體樣式方式

 更新時間：2022年09月19日 09:33:12   作者：duyanke888  
這篇文章主要介紹了Vue項目中使用自定義字體樣式方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue使用自定義字體樣式

步驟一

拿到自定義字體包

首先要得到自定義字體包（后綴名為.ttf, .otf, .eot等格式的字體包），可自行下載也可以問UI要字體包。

步驟二

在項目文件夾中進行放置自定義字體包的配置

在項目assets文件夾下新建font文件夾，將拿到的字體包放在font文件夾中；

新建一個font.css文件

步驟三

font.css文件配置

在font.css文件中定義所用字體

@font-face {
? ? font-family: 'ZI DING YI'; /* 重命名字體名 */
? ? src: url('ZI DING YI.TTF');
? ? font-weight: normal;
? ? font-style: normal;
}

步驟四

在app.vue中引入font.css

<style lang="scss">
? @import './assets/font/font.css';
? #app {
? ? font-family: 'PingFang-RE';
? ? font-weight: 400;
? }
</style>

全局自定義字體,提高項目字體美化

我們在項目開發(fā)時.或多或少 會給項目 添加全局字體;

添加字體的最佳方案,請看 ?? ?? ?? 四步成功引入

1、創(chuàng)建font文件夾

在assets 靜態(tài)資源文件夾中,新建font 文件夾

//目錄結(jié)構(gòu)
├──node_modules
├──public
├──src
├?? ?├──api?
├?? ?├──assets ? ?//靜態(tài)資源
├ ? ??? ?├──images?
├ ? ??? ?├──font ? //存放 公共字體的文件夾
├ ? ??? ??? ?├──common ?//存放字體的文件夾
├ ? ??? ??? ??? ?├──weiruan.ttf
├ ? ??? ??? ??? ?├──changcheng.ttf
├ ? ??? ??? ??? ?├──songti.ttf
├ ? ??? ??? ??? ?└── ......
├ ? ??? ??? ?└──index.css
├ ? ??? ?└── css?
├?? ?├──components
├?? ?└── views
├ ......

2、創(chuàng)建index.css

在剛剛創(chuàng)建好的font 文件夾中新建index.css 存放字體樣式

?? ?/*公共字體的樣式 */
?? ?@font-face {
?? ? ?font-family: 'weiruan';
?? ? ?src:url('./weiruan.otf') format('otf'),?
?? ??? ? url('./changcheng.woff') format('woff'), /* Modern Browsers */
?? ? ? ? url('./songti.ttf') ?format('truetype'); /* Safari, Android, iOS */
?? ?}

3、全局注冊

在腳手架中找到main.js 文件，引入我們需要全局使用的 index.css 文件

//main.js
import './assets/font/index.css' //全局使用

4、頁面使用

在需要使用字體的頁面，引入全局字體

?? ?div {
?? ? ??? ?font-family: weiruan; //使用字體
? ?? ?}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論