引入字體

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

...
flutter:
? fonts:
? ? - family: PingFang
? ? ? fonts:
? ? ? ? - asset: fonts/PingFang-Regular.ttf

? assets:
? ? - assets/exit_icon.png

這里family是我們自定義的，對(duì)應(yīng)該字體，這里每個(gè)字體可以對(duì)應(yīng)多個(gè)ttf文件，比如區(qū)分加粗：

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 是相對(duì)于 pubspec.yaml 文件的路徑.這些文件包含字體中字形的輪廓。在構(gòu)建應(yīng)用程序時(shí)，這些文件會(huì)包含在應(yīng)用程序的asset包中。

可以給字體設(shè)置粗細(xì)、傾斜等樣式

• weight屬性指定字體的粗細(xì)，取值范圍是100到900之間的整百數(shù)(100的倍數(shù)). 這些值對(duì)應(yīng) FontWeight， 可以用于 TextStyle的fontWeight屬性
• style 指定字體是傾斜還是正常，對(duì)應(yīng)的值為italic和 normal. 這些值對(duì)應(yīng) FontStyle 可以用于TextStyle的 fontStyle TextStyle 屬性

引入字體后可以在Text的sytle中使用即可

Text(
? ? "test",
? ? style: TextStyle(fontFamily: "Rock Salt",),
)

全局字體

想設(shè)置全局字體，則需要在App中設(shè)置，如下：

MaterialApp(
? title: title,
? theme: ThemeData(
? ? primarySwatch: Colors.blue,
? ? visualDensity: VisualDensity.comfortable,
? ? fontFamily: "PingFang",
? ? textTheme: TextTheme(
? ? ? ...
? ? )
? ),
? ...
);

這樣全局字體都變成了我們?cè)O(shè)定的字體。

問題

但是這里有兩個(gè)小問題（flutter web，其他平臺(tái)未測）：

library中設(shè)置失效

我們將基礎(chǔ)功能封裝到一個(gè)library（gitsubmodule形式，所以沒有發(fā)布）中，其實(shí)承載MaterialApp的BaseApp也在library中，所以最開始將字體文件放在了library中，然后在BaseApp的MaterialApp中設(shè)置了fontFamily。
但是運(yùn)行發(fā)現(xiàn)字體根本沒變化，通過flutter build web編譯后發(fā)現(xiàn)在build目錄下生成的文件中沒有這個(gè)字體文件。
目前未找到原因，不過有解決方法，簡單的解決方法就是在主工程中也放一份該字體文件，同時(shí)在主工程的pubspec中也添加該字體（名稱與library中保持一致）。這樣運(yùn)行就會(huì)發(fā)現(xiàn)字體都變過來了，build編譯后也生成了該字體文件。

TextSpan中字體未生效

TextSpan可以用來處理圖文混合的需求。比如前面一個(gè)圖片標(biāo)簽，后面是文字，但是文字第二行還要從圖片最左端開始，即環(huán)繞圖片，這種時(shí)候就需要TextSpan+WidgetSpan配合只用即可。
但是在flutter web中（其他平臺(tái)未測），通過上面設(shè)置全局字體后，發(fā)現(xiàn)TextSpan中的字體并未生效，還是系統(tǒng)字體。
說明TextSpan稍微特殊一些，我們知道Text的源碼中style實(shí)際上做了一步merge操作，merge了默認(rèn)的style（defaultTextStyle）。但是在TextSpan的源碼中，發(fā)現(xiàn)并沒有這一步操作，所以設(shè)置的全局字體對(duì)它不起作用。
所以使用TextSpan的地方如果需要?jiǎng)t必須單獨(dú)設(shè)置字體。

到此這篇關(guān)于Flutter 設(shè)置全局字體的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Flutter 全局字體內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論