使用自定義字型

雖然 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
   

   content_copy

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

   $ cd /path/to/custom_fonts
   

   content_copy

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

   $ mkdir fonts
   

   content_copy

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

   $ cp ~/Downloads/*.ttf ./fonts
   

   content_copy

生成的資料夾結構應如下所示

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
   

   content_copy

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

   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
   

   content_copy

此 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 的整數倍表示，範圍在 100 到 900 之間。 這些值對應於 FontWeight 並且可以用於 fontWeight 屬性的 TextStyle 物件。

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

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

要將字型應用於特定的元件，例如 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
   

   content_copy

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
   

   content_copy

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

   $ vi lib/main.dart
   

   content_copy

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'),
           ),
         ),
       );
     }
   }
   

   content_copy

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