引入字體

首先在項目中創建fonts目錄，然后將將ttf文件放到該目錄下，然后在pubspec文件中添加該字體文件，如：

... flutter:fonts:- family: PingFangfonts:- asset: fonts/PingFang-Regular.ttfassets:- assets/exit_icon.png

這里family是我們自定義的，對應該字體，這里每個字體可以對應多個ttf文件，比如區分加粗：

flutter:fonts:- family: Ralewayfonts:- asset: assets/fonts/Raleway-Regular.ttf- asset: assets/fonts/Raleway-Medium.ttfweight: 500- asset: assets/fonts/Raleway-SemiBold.ttfweight: 600- family: AbrilFatfacefonts:- 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的地方如果需要則必須單獨設置字體。

關注公眾號：BennuCTech，獲取更多干貨！

總結

以上是生活随笔為你收集整理的Flutter入门：设置全局字体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。