使用自訂字體

雖然 Android 和 iOS 提供高品質的系統字型，設計師仍然希望支援自訂字型。您可能擁有設計師建立的自訂字型，或者從 Google Fonts 下載的字型。

字體（Typeface）是指包含特定風格字母的字形或形狀的集合。字型（Font）是該字體在給定粗細或變體的其中一種呈現方式。例如，Roboto 是一個字體，而 Roboto Bold 則是一個字型。

Flutter 允許您將自訂字型應用於整個應用程式或個別的 Widget。此指南會建立一個使用自訂字型的應用程式，其中包含以下步驟。

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

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

您對字型的選擇不應僅僅是偏好。請考慮哪些檔案格式適用於 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 之間的整數倍數。這些值對應於 FontWeight，並且可以在 fontWeight 屬性中使用，作為 TextStyle 物件。

在本指南中顯示的 pubspec.yaml 中，您將 RobotoMono-Bold 定義為字型系列的 700 粗細。若要使用您新增至應用程式的 RobotoMono-Bold 字型，請在 TextStyle Widget 中將 fontWeight 設定為 FontWeight.w700。

如果您沒有將 RobotoMono-Bold 新增至您的應用程式，Flutter 會嘗試讓字型看起來加粗。文字接著可能會顯得稍微深色一些。

您無法使用 weight 屬性來覆寫字型的粗細。您無法將 RobotoMono-Bold 設定為 700 以外的任何其他粗細。如果您設定 TextStyle(fontFamily: 'RobotoMono', fontWeight: FontWeight.w900)，則顯示的字型仍會呈現為 RobotoMono-Bold 看起來的粗細。

style 屬性會指定字型檔案中的字形顯示為 italic 或 normal。這些值對應於 FontStyle。您可以在 fontStyle 屬性中使用這些樣式，作為 TextStyle 物件。

在本指南中顯示的 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(),
);

若要深入瞭解主題，請查看 使用主題來共用色彩和字型樣式 指南。

若要將字型套用至特定 Widget（例如 Text Widget），請將 TextStyle 提供給 Widget。

對於本指南，請嘗試將 RobotoMono 字型套用至單個 Text Widget。使 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 應用程式應該會顯示以下畫面。

除非另有說明，本網站上的文件均反映 Flutter 的最新穩定版本。頁面最後更新時間為 2024-07-06。 檢視來源 或 回報問題。