目錄
一.前言
二.案例實(shí)現(xiàn)
1.編寫index.wxml代碼
2.編寫app.wxss文件代碼代碼
3.編寫index.wxss文件代碼
三.代碼編譯
一.前言
本篇文章將介紹在設(shè)計(jì)微信小程序時(shí)，利用style和class兩種方式來設(shè)置字體樣式的方法。
我們的目標(biāo)是做出以下效果。
在實(shí)現(xiàn)上圖效果之前，首先要掌握一些基本知識(shí)。
view組件支持使用style、class屬性來設(shè)置組件的樣式。class引用的樣式類可以在index.wxss以及app.wxss中定義。在前者中定義的樣式，一般只能在該頁面內(nèi)使用；而在后者當(dāng)中定義的樣式是全局樣式，可在項(xiàng)目的任何頁面中使用。
二.案例實(shí)現(xiàn)
1.編寫index.wxml代碼
代碼中使用了view組件的style和class屬性來設(shè)置字體樣式。
其中，style是直接在標(biāo)簽內(nèi)部進(jìn)行設(shè)置，而class需要在wxss文件中定義樣式類，然后在wxml中引用。（可以理解為這里編寫了一個(gè)函數(shù)，而函數(shù)的具體定義需要到另一個(gè)文件當(dāng)中編寫）
.box和.title分別是用來設(shè)置邊框和標(biāo)題樣式的，在app.wxss中定義，是全局樣式，可以在項(xiàng)目?jī)?nèi)任何wxml文件中使用。
font-style和font-size是用來設(shè)置字體樣式屬性的。常用字體樣式屬性還有：
| 屬性 | 含義 | 屬性值舉例 |
| font-family | 字體類型 | serif，cursive，隸書，宋體... |
| font-size | 字體大小 | 6px/rpx/cm，large，small... |
| font-style | 字體傾斜 | italic，normal，oblique... |
| font-weight | 字體粗細(xì) | bold，bolder，lighteer... |
以下是index.wxml文件
<!--index.wxml-->
<view class='box'>
<view class='title'>字體樣式設(shè)置</view>
<view style='font-family: "隸書";font-size: 30px;'>
<view>利用style設(shè)置字體樣式</view>
<view>字體:隸書,30像素</view>
</view>
============================
<view class='fontStyle'>
<view>利用class設(shè)置字體樣式： </view>
<view>字體：Cursive、25像素、傾斜、加粗</view>
</view>
</view>2.編寫app.wxss文件代碼代碼
在app.wxss中，我們將定義.box和.title兩種全局樣式
/**app.wxss**/
.box{/**定義用于設(shè)置邊框的樣式**/
margin:20rpx; /**外邊距**/
padding: 20rpx; /**內(nèi)邊距**/
border: 1px solid silver; /**邊框1px、實(shí)線、銀灰色**/
}
.title{
font-size: 25px; /**字體大小**/
text-align: center; /**居中對(duì)齊**/
margin-bottom: 15px; /**下邊距**/
color: red; /**紅色**/
}3.編寫index.wxss文件代碼
我們將在該文件中定義.fontStyle樣式類，該樣式類只能在index.wxml中被使用。
.fontStyle{
font-family: Cursive; /**字體類型**/
font-size: 25px; /**字體大小**/
font-style: italic; /**字體傾斜**/
font-weight: bold; /**字體加粗**/
}三.代碼編譯
編寫完以上所有代碼后，點(diǎn)擊“編譯”或者按下快捷鍵ctrl+s，即可看到模擬期中的運(yùn)行效果
?結(jié)尾ps：文章來源：http://www.zghlxwxcb.cn/news/detail-782782.html
在使用style和class屬性來設(shè)置組件樣式的時(shí)候，要具體情況具體分析。靜態(tài)的樣式一般寫到class中，動(dòng)態(tài)的樣式一般寫到style中。這樣做的目的是提高不同情況下代碼的編輯性以及提高渲染速度。文章來源地址http://www.zghlxwxcb.cn/news/detail-782782.html
到了這里，關(guān)于【微信小程序開發(fā)】字體樣式設(shè)置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
