微信小程序如何設(shè)置字體樣式

本文小編為大家詳細介紹“微信小程序如何設(shè)置字體樣式”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“微信小程序如何設(shè)置字體樣式”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

一.前言

我們的目標是做出以下效果。

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

view組件支持使用style、class屬性來設(shè)置組件的樣式。class引用的樣式類可以在index.wxss以及app.wxss中定義。在前者中定義的樣式，一般只能在該頁面內(nèi)使用；而在后者當中定義的樣式是全局樣式，可在項目的任何頁面中使用。

二.案例實現(xiàn)

1.編寫index.wxml代碼

代碼中使用了view組件的style和class屬性來設(shè)置字體樣式。

其中，style是直接在標簽內(nèi)部進行設(shè)置，而class需要在wxss文件中定義樣式類，然后在wxml中引用。（可以理解為這里編寫了一個函數(shù)，而函數(shù)的具體定義需要到另一個文件當中編寫）

.box和.title分別是用來設(shè)置邊框和標題樣式的，在app.wxss中定義，是全局樣式，可以在項目內(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、實線、銀灰色**/
}
 
.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;      /**字體加粗**/
}

三.代碼編譯

編寫完以上所有代碼后，點擊“編譯”或者按下快捷鍵ctrl+s，即可看到模擬期中的運行效果

 結(jié)尾ps：

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

讀到這里，這篇“微信小程序如何設(shè)置字體樣式”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。