Flutter 設置全局字體的實現
引入字體
首先在項目中創建fonts目錄,然後將將ttf文件放到該目錄下,然後在pubspec文件中添加該字體文件,如:
... flutter: fonts: - family: PingFang fonts: - asset: fonts/PingFang-Regular.ttf assets: - assets/exit_icon.png
這裡family是我們自定義的,對應該字體,這裡每個字體可以對應多個ttf文件,比如區分加粗:
flutter: fonts: - family: Raleway fonts: - asset: assets/fonts/Raleway-Regular.ttf - asset: assets/fonts/Raleway-Medium.ttf weight: 500 - asset: assets/fonts/Raleway-SemiBold.ttf weight: 600 - family: AbrilFatface fonts: - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf
- family 是字體的名稱, 你可以在TextStyle的 fontFamily 屬性中使用.
- asset 是相對於 pubspec.yaml 文件的路徑.這些文件包含字體中字形的輪廓。在構建應用程序時,這些文件會包含在應用程序的asset包中。
可以給字體設置粗細、傾斜等樣式
- weight屬性指定字體的粗細,取值范圍是100到900之間的整百數(100的倍數). 這些值對應 FontWeight, 可以用於 TextStyle的fontWeight屬性
- style 指定字體是傾斜還是正常,對應的值為italic和 normal. 這些值對應 FontStyle 可以用於TextStyle的 fontStyle TextStyle 屬性
引入字體後可以在Text的sytle中使用即可
Text( "test", style: TextStyle(fontFamily: "Rock Salt",), )
全局字體
想設置全局字體,則需要在App中設置,如下:
MaterialApp( title: title, theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.comfortable, fontFamily: "PingFang", textTheme: TextTheme( ... ) ), ... );
這樣全局字體都變成瞭我們設定的字體。
問題
但是這裡有兩個小問題(flutter web,其他平臺未測):
library中設置失效
我們將基礎功能封裝到一個library(gitsubmodule形式,所以沒有發佈)中,其實承載MaterialApp的BaseApp也在library中,所以最開始將字體文件放在瞭library中,然後在BaseApp的MaterialApp中設置瞭fontFamily。
但是運行發現字體根本沒變化,通過flutter build web編譯後發現在build目錄下生成的文件中沒有這個字體文件。
目前未找到原因,不過有解決方法,簡單的解決方法就是在主工程中也放一份該字體文件,同時在主工程的pubspec中也添加該字體(名稱與library中保持一致)。這樣運行就會發現字體都變過來瞭,build編譯後也生成瞭該字體文件。
TextSpan中字體未生效
TextSpan可以用來處理圖文混合的需求。比如前面一個圖片標簽,後面是文字,但是文字第二行還要從圖片最左端開始,即環繞圖片,這種時候就需要TextSpan+WidgetSpan配合隻用即可。
但是在flutter web中(其他平臺未測),通過上面設置全局字體後,發現TextSpan中的字體並未生效,還是系統字體。
說明TextSpan稍微特殊一些,我們知道Text的源碼中style實際上做瞭一步merge操作,merge瞭默認的style(defaultTextStyle)。但是在TextSpan的源碼中,發現並沒有這一步操作,所以設置的全局字體對它不起作用。
所以使用TextSpan的地方如果需要則必須單獨設置字體。
到此這篇關於Flutter 設置全局字體的實現的文章就介紹到這瞭,更多相關Flutter 全局字體內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- flutter項目引入iconfont阿裡巴巴圖標
- Flutter 如何設置App的主色調與字體
- MaterialApp Flutter 應用全局配置與主題管理詳解
- Flutter基本組件Basics Widget學習
- Android集成Flutter