使用自訂字體
雖然 Android 和 iOS 提供高品質的系統字型,設計師仍然希望支援自訂字型。您可能擁有設計師建立的自訂字型,或者從 Google Fonts 下載的字型。
字體(Typeface)是指包含特定風格字母的字形或形狀的集合。字型(Font)是該字體在給定粗細或變體的其中一種呈現方式。例如,Roboto 是一個字體,而 Roboto Bold 則是一個字型。
Flutter 允許您將自訂字型應用於整個應用程式或個別的 Widget。此指南會建立一個使用自訂字型的應用程式,其中包含以下步驟。
- 選擇您的字型。
- 匯入字型檔案。
- 在 pubspec 中宣告字型。
- 將字型設定為預設值。
- 在特定 Widget 中使用字型。
您不需要按照順序執行每個步驟。本指南在最後提供了完整的範例檔案。
選擇字體
#您對字型的選擇不應僅僅是偏好。請考慮哪些檔案格式適用於 Flutter,以及字型如何影響設計選項和應用程式效能。
選擇支援的字型格式
#Flutter 支援以下字型格式
- OpenType 字型集合:
.ttc
- TrueType 字型:
.ttf
- OpenType 字型:
.otf
Flutter 在桌面平台上不支援 Web Open Font Format 字型 .woff
和 .woff2
。
根據特定優勢選擇字型
#關於字型檔案類型是什麼或哪個佔用較少空間,很少有來源達成共識。字型檔案類型之間的關鍵差異在於格式如何編碼檔案中的字形。大多數 TrueType 和 OpenType 字型檔案都具有相似的功能,因為隨著格式和字型隨著時間的推移而改進,它們彼此借鑑。
您應該使用哪種字型取決於以下考量。
- 您在應用程式中需要多少字型變化?
- 您的應用程式可以接受字型使用多少檔案大小?
- 您需要在應用程式中支援多少種語言?
研究給定字型提供的選項,例如每個字型檔案多種粗細或樣式、可變字型功能、多種字重可用的多個字型檔案,或者每個字型多個寬度。
選擇符合應用程式設計需求的字體或字型系列。
匯入字體檔案
#若要使用字型,請將其字型檔案匯入您的 Flutter 專案。
若要匯入字型檔案,請執行以下步驟。
如有必要,為了與本指南中的其餘步驟相符,請將您的 Flutter 應用程式名稱變更為
custom_fonts
。mv /path/to/my_app /path/to/custom_fonts
導覽至您的 Flutter 專案根目錄。
cd /path/to/custom_fonts
在您的 Flutter 專案根目錄建立一個
fonts
目錄。mkdir fonts
將字型檔案移動或複製到您的 Flutter 專案根目錄的
fonts
或assets
資料夾中。cp ~/Downloads/*.ttf ./fonts
產生的資料夾結構應類似於以下內容
custom_fonts/
|- fonts/
|- Raleway-Regular.ttf
|- Raleway-Italic.ttf
|- RobotoMono-Regular.ttf
|- RobotoMono-Bold.ttf
在 pubspec.yaml 檔案中宣告字體
#在您下載字型之後,請在 pubspec.yaml
檔案中包含字型定義。此字型定義還會指定應使用哪個字型檔案來呈現應用程式中的指定粗細或樣式。
在 pubspec.yaml
檔案中定義字型
#若要將字型檔案新增至您的 Flutter 應用程式,請完成以下步驟。
在您的 Flutter 專案根目錄開啟
pubspec.yaml
檔案。vi pubspec.yaml
將以下 YAML 區塊貼在
flutter
宣告之後。yamlfonts: - 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 字型檔案。
更新 pubspec.yaml
檔案
#在您的 Flutter 專案根目錄開啟
pubspec.yaml
檔案。vi pubspec.yaml
將其內容替換為下列 YAML。
yamlname: 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
使用此 main.dart
檔案
#在您的 Flutter 專案的
lib/
目錄中開啟main.dart
檔案。vi lib/main.dart
將其內容替換為下列 Dart 程式碼。
dartimport '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。 檢視來源 或 回報問題。