使用自定義字型

儘管 Android 和 iOS 提供了高質量的系統字型，但設計師仍希望支援自定義字型。你可能有一個設計師定製的字型，或者你可能從 Google Fonts 下載了一個字型。

一種字型是一個字元集的集合，或者說是一個給定字型的形狀集合。一個字型是該字型在給定字重或變體下的一種表示。Roboto 是一種字型，而 Roboto Bold 是一種字型。

Flutter 允許你將自定義字型應用於整個應用或單個小部件。此教程透過以下步驟建立一個使用自定義字型的應用。

1. 選擇你的字型。
2. 匯入字型檔案。
3. 在 pubspec 中宣告字型。
4. 將字型設定為預設字型。
5. 在特定小部件中使用字型。

你不需要按順序執行每個步驟。本指南在最後提供了完整的示例檔案。

你的字型選擇應該不僅僅是偏好。考慮哪些檔案格式適用於 Flutter，以及字型如何影響設計選項和應用效能。

Flutter 支援以下字型格式：

• OpenType 字型集合：.ttc
• TrueType 字型：.ttf
• OpenType 字型：.otf

Flutter 在桌面平臺不支援 Web Open Font Format 的字型，即 .woff 和 .woff2。

很少有來源能就字型檔案型別是什麼或哪種佔用空間更少達成一致。字型檔案型別之間的關鍵區別在於格式如何編碼檔案中的字形。大多數 TrueType 和 OpenType 字型檔案具有相似的功能，因為隨著格式和字型隨著時間的推移而改進，它們相互借鑑。

你應該使用哪種字型取決於以下考慮因素。

• 你的應用中字型需要多少變化？
• 你的應用中字型可以接受多少檔案大小？
• 你的應用需要支援多少種語言？

研究給定字型提供的選項，例如每個字型檔案中的多種字重或樣式，可變字型功能，多種字重對應的多個字型檔案的可用性，或每個字型多個寬度。

選擇符合應用設計需求的字型或字型家族。

要使用字型，請將其字型檔案匯入到你的 Flutter 專案中。

要匯入字型檔案，請執行以下步驟。

1. 如有必要，為了匹配本指南中的其餘步驟，請將你的 Flutter 應用名稱更改為 custom_fonts。

   mv /path/to/my_app /path/to/custom_fonts

2. 導航到 Flutter 專案的根目錄。

   cd /path/to/custom_fonts

3. 在 Flutter 專案的根目錄中建立一個 fonts 目錄。

   mkdir fonts

4. 將字型檔案移動或複製到 Flutter 專案根目錄下的 fonts 或 assets 資料夾中。

   cp ~/Downloads/*.ttf ./fonts

生成的資料夾結構應類似於以下內容：

custom_fonts/
|- fonts/
  |- Raleway-Regular.ttf
  |- Raleway-Italic.ttf
  |- RobotoMono-Regular.ttf
  |- RobotoMono-Bold.ttf

下載字型後，在 pubspec.yaml 檔案中包含字型定義。此字型定義還指定了應使用哪個字型檔案來渲染應用中給定的字重或樣式。

要將字型檔案新增到你的 Flutter 應用中，請完成以下步驟。

1. 開啟 Flutter 專案根目錄中的 pubspec.yaml 檔案。

   vi pubspec.yaml

2. 將以下 YAML 塊貼上到 flutter 宣告之後。

   yaml

     fonts:
       - family: Raleway
         fonts:
           - asset: fonts/Raleway-Regular.ttf
           - asset: fonts/Raleway-Italic.ttf
             style: italic
       - family: RobotoMono
         fonts:
           - asset: fonts/RobotoMono-Regular.ttf
           - asset: fonts/RobotoMono-Bold.ttf
             weight: 700

此 pubspec.yaml 檔案將 Raleway 字型家族的斜體樣式定義為 Raleway-Italic.ttf 字型檔案。當你設定 style: TextStyle(fontStyle: FontStyle.italic) 時，Flutter 會將 Raleway-Regular 替換為 Raleway-Italic。

family 值設定字型的名稱。你在 fontFamily 屬性中使用了 TextStyle 物件的這個名稱。

asset 的值是 pubspec.yaml 檔案到字型檔案的相對路徑。這些檔案包含字型中字形的輪廓。在構建應用時，Flutter 會將這些檔案包含在應用的資源包中。

不同的字型以不同的方式實現字型檔案。如果你需要具有各種字重和樣式的字型，請選擇並匯入代表該多樣性的字型檔案。

當你匯入不包含多種字型或可變字型功能的字型檔案時，請勿使用 style 或 weight 屬性來調整它們的顯示方式。如果你在常規字型檔案上使用這些屬性，Flutter 會嘗試模擬外觀。視覺結果將與使用正確的字型檔案大相徑庭。

當你宣告哪些字型檔案表示字型的樣式或字重時，你可以應用 style 或 weight 屬性。

weight 屬性將檔案中輪廓的字重指定為 100 到 900 之間的 100 的整數倍。這些值對應於 FontWeight，並且可以在 TextStyle 物件的 fontWeight 屬性中使用。

在本指南中顯示的 pubspec.yaml 中，你將 RobotoMono-Bold 定義為字型家族的 700 字重。要使用你新增到應用中的 RobotoMono-Bold 字型，請在你的 TextStyle 小部件中將 fontWeight 設定為 FontWeight.w700。

如果你沒有將 RobotoMono-Bold 新增到你的應用中，Flutter 會嘗試讓字型看起來粗體。文字可能會顯得有些暗。

你不能使用 weight 屬性來覆蓋字型的字重。你不能將 RobotoMono-Bold 設定為除 700 以外的任何其他字重。如果你設定 TextStyle(fontFamily: 'RobotoMono', fontWeight: FontWeight.w900)，顯示的字型仍然會渲染成 RobotoMono-Bold 的粗體外觀。

style 屬性指定字型檔案中的字形顯示為 italic（斜體）或 normal（正常）。這些值對應於 FontStyle。你可以在 TextStyle 物件的 fontStyle 屬性中使用這些樣式。

在本指南中顯示的 pubspec.yaml 中，你將 Raleway-Italic 定義為 italic 樣式。要使用你新增到應用中的 Raleway-Italic 字型，請設定 style: TextStyle(fontStyle: FontStyle.italic)。Flutter 在渲染時會將 Raleway-Regular 替換為 Raleway-Italic。

如果你沒有將 Raleway-Italic 新增到你的應用中，Flutter 會嘗試讓字型看起來傾斜。文字可能會顯得向右傾斜。

你不能使用 style 屬性來覆蓋字型的字形。如果你設定 TextStyle(fontFamily: 'Raleway', fontStyle: FontStyle.normal)，顯示的字型仍然會渲染為斜體。斜體字型的 regular 樣式就是斜體。

要將字型應用於文字，你可以在應用的 theme 中將字型設定為應用的預設字型。

要設定預設字型，請在應用的 theme 中設定 fontFamily 屬性。將 fontFamily 值與 pubspec.yaml 檔案中宣告的 family 名稱匹配。

結果將類似於以下程式碼。

return MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'Raleway'),
  home: const MyHomePage(),
);

要了解有關主題的更多資訊，請檢視 使用主題共享顏色和字型樣式 教程。

要將字型應用於特定的小部件，例如 Text 小部件，請向該小部件提供一個 TextStyle。

對於本指南，嘗試將 RobotoMono 字型應用於單個 Text 小部件。將 fontFamily 值與 pubspec.yaml 檔案中宣告的 family 名稱匹配。

結果將類似於以下程式碼。

child: Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
),

從 Google Fonts 下載 Raleway 和 RobotoMono 字型檔案。

1. 開啟 Flutter 專案根目錄中的 pubspec.yaml 檔案。

   vi pubspec.yaml

2. 將其內容替換為以下 YAML。

   yaml

   name: custom_fonts
   description: An example of how to use custom fonts with Flutter
   
   dependencies:
     flutter:
       sdk: flutter
   
   dev_dependencies:
     flutter_test:
       sdk: flutter
   
   flutter:
     fonts:
       - family: Raleway
         fonts:
           - asset: fonts/Raleway-Regular.ttf
           - asset: fonts/Raleway-Italic.ttf
             style: italic
       - family: RobotoMono
         fonts:
           - asset: fonts/RobotoMono-Regular.ttf
           - asset: fonts/RobotoMono-Bold.ttf
             weight: 700
     uses-material-design: true

1. 開啟 Flutter 專案 lib/ 目錄中的 main.dart 檔案。

   vi lib/main.dart

2. 將其內容替換為以下 Dart 程式碼。

   dart

   import 'package:flutter/material.dart';
   
   void main() => runApp(const MyApp());
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Custom Fonts',
         // Set Raleway as the default app font.
         theme: ThemeData(fontFamily: 'Raleway'),
         home: const MyHomePage(),
       );
     }
   }
   
   class MyHomePage extends StatelessWidget {
     const MyHomePage({super.key});
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         // The AppBar uses the app-default Raleway font.
         appBar: AppBar(title: const Text('Custom Fonts')),
         body: const Center(
           // This Text widget uses the RobotoMono font.
           child: Text(
             'Roboto Mono sample',
             style: TextStyle(fontFamily: 'RobotoMono'),
           ),
         ),
       );
     }
   }

生成的 Flutter 應用應顯示以下螢幕。