Flutter 自(zì)定義字體

介紹

你可(kě)以在你的Flutter應用程序中使用不同的字體。例如(rú)，您可(kě)能(néng)會使用您的設計人(rén)員(yuán)創建的自(zì)定義字體，或者您可(kě)能(néng)會使用Google Fonts(需翻牆)）中的字體。

本頁介紹如(rú)何為(wèi)Flutter應用配置字體，并在渲染文本時(shí)使用它們。

使用字體

在Flutter應用程序中使用字體分兩步完成。首先在pubspec.yaml中聲明(míng)它們，以确保它們包含在應用程序中。然後通(tōng)過TextStyle屬性使用字體。

在asset中聲明(míng)

要(yào)在應用中包含字體，請(qǐng)先在pubspec.yaml中聲明(míng)它。然後将字體文件複制到您在pubspec.yaml中指定的位置。

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

使用字體

// declare the text style

const textStyle = const TextStyle(

fontFamily: 'Raleway',

);

// use the text style

var buttonText = const Text(

"Use the font for this text",

style: textStyle,

);

依賴包中的字體{#from-packages}

要(yào)使用依賴包中定義的字體，必須提供package參數(shù)。例如(rú)，假設上(shàng)面的字體聲明(míng)位于pubspec.yaml中聲明(míng)的my_package包中。然後創建TextStyle的過程如(rú)下(xià)：

const textStyle = const TextStyle(

fontFamily: 'Raleway',

package: 'my_package',

);

如(rú)果包內(nèi)部使用它定義的字體，則也應該在創建文本樣式時(shí)指定package參數(shù)，如(rú)上(shàng)例所示。

一(yī)個包也可(kě)以提供字體文件而不需要(yào)在pubspec.yaml中聲明(míng)。 這(zhè)些文件應該包的lib/文件夾中。字體文件不會自(zì)動綁定到應用程序中，應用程序可(kě)以在聲明(míng)字體時(shí)有選擇地(dì)使用這(zhè)些字體。假設一(yī)個名為(wèi)my_package的包中有一(yī)個：

lib/fonts/Raleway-Medium.ttf

然後，應用程序可(kě)以聲明(míng)一(yī)個字體，如(rú)下(xià)面的示例所示：

flutter:

fonts:

- family: Raleway

fonts:

- asset: assets/fonts/Raleway-Regular.ttf

- asset: packages/my_package/fonts/Raleway-Medium.ttf

weight: 500

這(zhè)lib/是隐含的，所以它不應該包含在asset路徑中。

在這(zhè)種情況下(xià)，由于應用程序本地(dì)定義了(le)字體，所以創建的TextStyle沒有package參數(shù)：

const textStyle = const TextStyle(

fontFamily: 'Raleway',

);

使用Material Design字體圖标

如(rú)果要(yào)使用Material Design字體圖标，可(kě)以通(tōng)過向pubspec.yaml文件添加屬性uses-material-design: true來簡單包含它。

flutter:

# The following line ensures that the Material Icons font is

# included with your application, so that you can use the icons in

# the Icons class.

uses-material-design: true

pubspec.yaml 選項定義

family 是字體的名稱, 你可(kě)以在TextStyle的 fontFamily 屬性中使用.

asset 是相對于 pubspec.yaml 文件的路徑.這(zhè)些文件包含字體中字形的輪廓。在構建應用程序時(shí)，這(zhè)些文件會包含在應用程序的asset包中。

可(kě)以給字體設置粗細、傾斜等樣式

weight屬性指定字體的粗細，取值範圍是100到900之間(jiān)的整百數(shù)(100的倍數(shù)). 這(zhè)些值對應 FontWeight， 可(kě)以用于 TextStyle的fontWeight屬性

style 指定字體是傾斜還是正常，對應的值為(wèi)italic和(hé) normal. 這(zhè)些值對應 FontStyle 可(kě)以用于TextStyle的 fontStyle TextStyle 屬性

TextStyle

如(rú)果一(yī)個 TextStyle 對象指定了(le)一(yī)個沒有确切字體文件的weight或style，那(nà)麽引擎會為(wèi)該字體使用一(yī)個通(tōng)用的文件，并嘗試為(wèi)指定的weight和(hé)style推斷一(yī)個輪廓。