Flutter使用自定義字型

使用自定義字型

盡管 Android 和 iOS 已經提供了一套高品質系統字型，然而通常設計師還是會要求使用自定義字型。例如，你可能需要使用設計師提供的自定義字型，或者從 阿裡巴巴字型庫下載下傳的字型。

這裡還有另一個關于使用自定義字型的教程，如果你想要在多項目中重用一份字型的情況下，請參考 ​​将字型導出到 package​​。

Flutter 可以很友善的使用自定義字型，不僅能夠将其用于整個應用裡，還可以用在某個單獨的 widget 中。請參照下面的步驟使用自定義字型：

步驟

1. 導入字型檔案
2. 在​

   ​pubspec.yaml​

   ​ 中聲明字型
3. 設定預設字型
4. 将字型用于特定 widget

1. 導入字型檔案

要使用字型，你需要将字型檔案導入到項目中。常見的做法是将字型檔案放在項目根目錄下的 ​

​fonts​

​ 或者 ​

​assets​

​ 檔案夾中。

例如，如果你想要在項目中導入 Raleway 和 Roboto Mono 字型，檔案夾結構會像下面這樣：

awesome_app/
  fonts/
         

已支援的字型格式

Flutter 支援以下的字型格式：

• ​

  ​.ttc​

  ​
• ​

  ​.ttf​

  ​
• ​

  ​.otf​

  ​

2. 在 ​

​pubspec.yaml​

​ 中聲明字型

現在你已經有一個字型可以使用，接下來則需要告訴 Flutter 它在哪。你可以在 ​

​pubspec.yaml​

​ 中像下面這樣聲明：

*content_copy*

fonts:
    - family: Alibaba
      fonts:
        - asset: fonts/Alibaba-PuHuiTi-Regular.ttf
        - asset: fonts/Alibaba-PuHuiTi-Medium.ttf
          style: italic      

​

​pubspec.yaml​

​ 選項的定義

​

​family​

​ 屬性決定了字型的名稱，你将會在 ​​TextStyle​​ 屬性中用到。

​

​asset​

​ 是字型檔案對于 ​

​pubspec.yaml​

​ 檔案的相對路徑。這些檔案包含了字型中字形的輪廓。建構應用時，這些檔案将會被包含在應用程式的資源包中。

單個字型可以引用多個不同輪廓字重及風格的檔案：

• ​

  ​weight​

  ​ 屬性指定了檔案中字型輪廓的字重為 100 的整數倍，并且範圍在 100 和 900 之間。這些值對應​​FontWeight​​ 屬性上使用。例如，如果你想使用上面定義的​

  ​RobotoMono-Bold​

  ​ 字型，你可以在​

  ​TextStyle​

  ​ 中将​

  ​fontWeight​

  ​ 設定為​

  ​FontWeight.w700​

  ​。

需要注意的是，定義 ​

​weight​

​ 屬性不會覆寫字型的實際粗細。你無法使用 ​

​FontWeight.w100​

​ 通路 ​

​RobotoMono-Bold​

​，即使其 ​

​weight​

​ 設定為了 100。

• ​

  ​style​

  ​ 屬性指定檔案中字型的輪廓是否為​

  ​italic​

  ​ 或​

  ​normal​

  ​。這些值對應​​FontStyle​​ 屬性上使用。例如，如果你想使用上面定義的​

  ​Raleway-Italic​

  ​ 字型，你可以在​

  ​TextStyle​

  ​ 中将​

  ​fontStyle​

  ​ 設定為​

  ​FontStyle.italic​

  ​。

需要注意的是，定義 ​

​style​

​ 屬性不會更改字型的實際樣式；你無法使用 ​

​FontStyle.normal​

​ 通路 ​

​Raleway-Italic，即使其 ​

​style` 設定為了 normal。

3. 設定預設字型

關于如何應用這些字型，你有兩種選擇：将其設為預設字型，或者僅在某些特定 widget 中使用。

如果你想要設為預設字型，請将 ​

​fontFamily​

​ 設為應用（全局）​

​theme​

​ 的屬性的一部分。提供的 ​

​fontFamily​

​ 的值必須與 ​

​pubspec.yaml​

​ 中聲明的名稱相比對。

return MaterialApp(
 
  theme: ThemeData(fontFamily: 'Alibaba'),
  home: const MyHomePage(),
);      

有關主題的更多資訊，請參閱文檔： ​​使用 Themes 統一顔色和字型風格​​。

4. 将字型用于特定 Widget

如果你希望在特定 Widget（例如 ​

​Text​

​ Widget）中使用該字型，可以通過 ​​TextStyle​​ 中進行指定。

在這個例子中，我們将在一個 ​

​Text​

​ Widget 上使用 RobotoMono 字型。同樣的，這裡的 fontFamily 的值必須與 pubspec.yaml 中聲明的值相比對。

child: Text(
  'Alibaba sample',
  style: TextStyle(fontFamily: 'Alibaba'),
),      

字型樣式

參考文檔