網站首頁 編程語言 正文
引入字體
首先在項目中創建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的地方如果需要則必須單獨設置字體。
原文鏈接:https://juejin.cn/post/7064049226556112933
相關推薦
- 2022-06-29 Android實用小技巧之利用Lifecycle寫出更好維護的代碼_Android
- 2022-07-22 jQuery實現點擊顯示密碼框密碼
- 2022-04-23 arguments獲取當前所在函數
- 2022-10-30 C語言算法練習之數組元素排序_C 語言
- 2022-04-16 Python3如何將源目錄中的圖片用MD5命名并可以設定目標目錄_python
- 2022-03-17 c++實現一個簡易的網絡緩沖區的實踐_C 語言
- 2022-06-16 Beego中ORM操作各類數據庫連接方式詳細示例_Golang
- 2023-07-02 Pandas數據查詢的集中實現方法_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支