使用自定義字型
如何使用自定義字型。
雖然 Android 和 iOS 提供高質量的系統字型,但設計師希望支援自定義字型。 您可能擁有設計師設計的自定義字型,或者從 Google Fonts 下載的字型。
字型族是構成給定字母風格的字形或形狀的集合。 字型是字型族在給定粗細或變體中的一種表現形式。 Roboto 是一個字型族,Roboto Bold 是一個字型。
Flutter 允許您將自定義字型應用於整個應用程式或單個元件。 此配方建立一個使用自定義字型的應用程式,具體步驟如下。
- 選擇您的字型。
- 匯入字型檔案。
- 在 pubspec 中宣告字型。
- 將字型設定為預設字型。
- 在特定元件中使用字型。
您無需按步驟操作。 該指南在最後提供了完整的示例檔案。
選擇字型
#您對字型的選擇不僅僅是偏好。 考慮哪些檔案格式與 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 -
在
flutter宣告之後貼上以下 YAML 塊。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 的整數倍表示,範圍在 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 字型檔案。
更新 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 應用程式應顯示以下螢幕。