一、基本概念

在 Uniapp 開發中，我們經常需要對文字內容樣式進行調整，包括字體、顏色、大小等。其中，字體是指文字所採用的樣式或字形，可分為系統字體和自訂字體。系統字體是預設在系統中已經存在的字體，如果只是對字體的大小和顏色有需求，可以直接採用系統字體；而自訂字體則是指需要自行建立或引用的字體，用於特定場景下。

在Uniapp中，字體可以透過兩個方式設定：

使用css樣式表進行設定
透過全域設定進行設定

接下來，我們將詳細介紹這兩種方式。

二、透過css設定

透過css進行設定字體，需要在樣式表中加入對應的程式碼。程式碼範例如下:

text {
  font-family: 'PingFang SC', 'Helvetica Neue', monospace;
  font-size: 16px;
  font-weight: bold;
}

登入後複製

透過上述樣式程式碼，文字將採用「PingFang SC」字體，16px的字號以及粗體顯示。其中，「PingFang SC」是一種系統字體，如果在系統中不存在該字體，那麼將會影響到對應文字的顯示效果。

除了系統字體之外，我們還可以使用自訂字體。自訂字體的引用方式有很多種，這裡我們介紹一個比較常用的方法：透過外鏈進行引用。

@font-face {
  font-family: 'MyFont';
  src: url('http://www.example.com/fonts/MyFont.ttf');
}

text {
  font-family: 'MyFont';
  font-size: 16px;
  font-weight: bold;
}

登入後複製

其中，我們在樣式表中透過@font-face 規則，指定了一個名為「MyFont」的自訂字體，其引用路徑為'http://www.example.com/fonts /MyFont.ttf'。接著，在需要使用該字體的位置，我們只需要將 font-family 設定為該字體的名稱即可。

除了font-family之外，我們還可以透過 font-size、font-weight 等屬性來設定字體的大小和粗細程度等。

三、透過全域設定進行設定

除了使用css進行字體設定之外，Uniapp也提供了全域設定的方式。透過全域配置，我們不需要在每個相關頁面中進行樣式設置，從而減少程式碼的冗餘。

{
  "app-plus": {
    "nvue": {
      "fontsize": "20px",
      "fontfamily": "PingFang SC"
    }
  }
}

登入後複製

在全域設定中，我們透過app-plus -> nvue -> fontsize 和 app-plus -> nvue -> fontfamily 兩個屬性來設定字體的大小和樣式。其中，fontsize屬性用於設定字體大小，fontfamily屬性則用於設定字體的名稱。當我們在相關元件中，不需要進行具體的樣式設定即可使用相關字體。