一.前言

本篇文章將介紹在設(shè)計(jì)微信小程序時，利用style和class兩種方式來設(shè)置字體樣式的方法。

我們的目標(biāo)是做出以下效果。

在實(shí)現(xiàn)上圖效果之前，首先要掌握一些基本知識。

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中引用。（可以理解為這里編寫了一個函數(shù)，而函數(shù)的具體定義需要到另一個文件當(dāng)中編寫）

.box和.title分別是用來設(shè)置邊框和標(biāo)題樣式的，在app.wxss中定義，是全局樣式，可以在項(xiàng)目內(nèi)任何wxml文件中使用。

font-style和font-size是用來設(shè)置字體樣式屬性的。常用字體樣式屬性還有：

以下是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;           /**居中對齊**/
  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：

在使用style和class屬性來設(shè)置組件樣式的時候，要具體情況具體分析。靜態(tài)的樣式一般寫到class中，動態(tài)的樣式一般寫到style中。這樣做的目的是提高不同情況下代碼的編輯性以及提高渲染速度。

下一次我們將學(xué)習(xí)代碼的文本樣式設(shè)置。

總結(jié)

到此這篇關(guān)于微信小程序開發(fā)指南之字體樣式設(shè)置的文章就介紹到這了,更多相關(guān)微信小程序字體樣式設(shè)置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論