Flutter 自(zì)定義字體

介紹

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

本頁介紹如何爲Flutter應用(yòng)配置字體，并在渲染文(wén)本時(shí)使用(yòng)它們。

使用(yòng)字體

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

在asset中聲明(míng)

要在應用(yòng)中包含字體，請(qǐng)先在pubspec.yaml中聲明(míng)它。然後将字體文(wén)件複制到(dào)您在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

使用(yòng)字體

// 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òng)依賴包中定義的字體，必須提供package參數。例如，假設上(shàng)面的字體聲明(míng)位于pubspec.yaml中聲明(míng)的my_package包中。然後創建TextStyle的過程如下(xià)：

const textStyle = const TextStyle(

fontFamily: 'Raleway',

package: 'my_package',

);

如果包内部使用(yòng)它定義的字體，則也(yě)應該在創建文(wén)本樣式時(shí)指定package參數，如上(shàng)例所示。

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

lib/fonts/Raleway-Medium.ttf

然後，應用(yòng)程序可以聲明(míng)一個字體，如下(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à)，由于應用(yòng)程序本地定義了(le)字體，所以創建的TextStyle沒有package參數：

const textStyle = const TextStyle(

fontFamily: 'Raleway',

);

使用(yòng)Material Design字體圖标

如果要使用(yòng)Material Design字體圖标，可以通過向pubspec.yaml文(wén)件添加屬性uses-material-design: true來(lái)簡單包含它。

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 是字體的名稱, 你(nǐ)可以在TextStyle的 fontFamily 屬性中使用(yòng).

asset 是相對(duì)于 pubspec.yaml 文(wén)件的路徑.這(zhè)些(xiē)文(wén)件包含字體中字形的輪廓。在構建應用(yòng)程序時(shí)，這(zhè)些(xiē)文(wén)件會(huì)包含在應用(yòng)程序的asset包中。

可以給字體設置粗細、傾斜等樣式

weight屬性指定字體的粗細，取值範圍是100到(dào)900之間的整百數(100的倍數). 這(zhè)些(xiē)值對(duì)應 FontWeight， 可以用(yòng)于 TextStyle的fontWeight屬性

style 指定字體是傾斜還是正常，對(duì)應的值爲italic和(hé) normal. 這(zhè)些(xiē)值對(duì)應 FontStyle 可以用(yòng)于TextStyle的 fontStyle TextStyle 屬性

TextStyle

如果一個 TextStyle 對(duì)象指定了(le)一個沒有确切字體文(wén)件的weight或style，那麽引擎會(huì)爲該字體使用(yòng)一個通用(yòng)的文(wén)件，并嘗試爲指定的weight和(hé)style推斷一個輪廓。