快捷導(dǎo)航

微信小程序開(kāi)發(fā)指南之字體樣式設(shè)置

更新時(shí)間：2023年03月01日 10:44:54 作者：碼者阿銘

在小程序開(kāi)發(fā)中經(jīng)常需要我們自定義字體樣式,下面這篇文章主要給大家介紹了關(guān)于微信小程序開(kāi)發(fā)指南之字體樣式設(shè)置的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

一.前言

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

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

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

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

二.案例實(shí)現(xiàn)

1.編寫(xiě)index.wxml代碼

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

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

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

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

屬性	含義	屬性值舉例
font-family	字體類型	serif，cursive，隸書(shū)，宋體...
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: "隸書(shū)";font-size: 30px;'>
    <view>利用style設(shè)置字體樣式</view>
    <view>字體:隸書(shū),30像素</view>
  </view>
  ============================
  <view class='fontStyle'>
    <view>利用class設(shè)置字體樣式： </view>
    <view>字體：Cursive、25像素、傾斜、加粗</view>
  </view>
</view>

2.編寫(xiě)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.編寫(xiě)index.wxss文件代碼

我們將在該文件中定義.fontStyle樣式類，該樣式類只能在index.wxml中被使用。

.fontStyle{
  font-family: Cursive;   /**字體類型**/
  font-size: 25px;        /**字體大小**/
  font-style: italic;     /**字體傾斜**/
  font-weight: bold;      /**字體加粗**/
}