介绍

你可以在你的Flutter应用程序中使用不同的字体。例如，您可能会使用您的设计人员创建的自定义字体，或者您可能会使用Google Fonts(需翻墙)）中的字体。

本页介绍如何为Flutter应用配置字体，并在渲染文本时使用它们。

使用字体

在Flutter应用程序中使用字体分两步完成。首先在pubspec.yaml中声明它们，以确保它们包含在应用程序中。然后通过TextStyle属性使用字体。

在asset中声明

要在应用中包含字体，请先在pubspec.yaml中声明它。然后将字体文件复制到您在pubspec.yaml中指定的位置。

  1. flutter:
  2.   fonts:
  3.     - family: Raleway
  4.       fonts:
  5.         - asset: assets/fonts/Raleway-Regular.ttf
  6.         - asset: assets/fonts/Raleway-Medium.ttf
  7.           weight: 500
  8.         - asset: assets/fonts/Raleway-SemiBold.ttf
  9.           weight: 600
  10.     - family: AbrilFatface
  11.       fonts:
  12.         - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf

使用字体

  1. // declare the text style
  2. const textStyle = const TextStyle(
  3.   fontFamily: 'Raleway',
  4. );
  6. // use the text style
  7. var buttonText = const Text(
  8.   "Use the font for this text",
  9.   style: textStyle,
  10. );

依赖包中的字体{#from-packages}

要使用依赖包中定义的字体，必须提供package参数。例如，假设上面的字体声明位于pubspec.yaml中声明的my_package包中。然后创建TextStyle的过程如下：

  1. const textStyle = const TextStyle(
  2.   fontFamily: 'Raleway',
  3.   package: 'my_package',
  4. );

如果包内部使用它定义的字体，则也应该在创建文本样式时指定package参数，如上例所示。

一个包也可以提供字体文件而不需要在pubspec.yaml中声明。 这些文件应该包的lib/文件夹中。字体文件不会自动绑定到应用程序中，应用程序可以在声明字体时有选择地使用这些字体。假设一个名为my_package的包中有一个：

  1. lib/fonts/Raleway-Medium.ttf

然后，应用程序可以声明一个字体，如下面的示例所示：

  1.  flutter:
  2.    fonts:
  3.      - family: Raleway
  4.        fonts:
  5.          - asset: assets/fonts/Raleway-Regular.ttf
  6.          - asset: packages/my_package/fonts/Raleway-Medium.ttf
  7.            weight: 500

这lib/是隐含的，所以它不应该包含在asset路径中。

在这种情况下，由于应用程序本地定义了字体，所以创建的TextStyle没有package参数：

  1. const textStyle = const TextStyle(
  2.   fontFamily: 'Raleway',
  3. );

使用Material Design字体图标

如果要使用Material Design字体图标，可以通过向pubspec.yaml文件添加属性uses-material-design: true来简单包含它。

  1. flutter:
  2.   # The following line ensures that the Material Icons font is
  3.   # included with your application, so that you can use the icons in
  4.   # the Icons class.
  5.   uses-material-design: true

pubspec.yaml 选项定义

family 是字体的名称, 你可以在TextStyle的 fontFamily 属性中使用.

asset 是相对于 pubspec.yaml 文件的路径.这些文件包含字体中字形的轮廓。在构建应用程序时，这些文件会包含在应用程序的asset包中。

可以给字体设置粗细、倾斜等样式

  • weight属性指定字体的粗细，取值范围是100到900之间的整百数(100的倍数). 这些值对应 FontWeight， 可以用于 TextStyle的fontWeight属性

TextStyle

如果一个 TextStyle 对象指定了一个没有确切字体文件的weight或style，那么引擎会为该字体使用一个通用的文件，并尝试为指定的weight和style推断一个轮廓。

例子

以下是在应用程序中声明和使用字体的示例。

iOS Android
Display of the fonts on ios. Display of the fonts on android.

在pubsec.yaml中声明字体。

  1. name: my_application
  2. description: A new Flutter project.
  4. dependencies:
  5.   flutter:
  6.     sdk: flutter
  8. flutter:
  9.   # Include the Material Design fonts.
  10.   uses-material-design: true
  12.   fonts:
  13.     - family: Rock Salt
  14.       fonts:
  15.         # https://fonts.google.com/specimen/Rock+Salt
  16.         - asset: fonts/RockSalt-Regular.ttf
  17.     - family: VT323
  18.       fonts:
  19.         # https://fonts.google.com/specimen/VT323
  20.         - asset: fonts/VT323-Regular.ttf
  21.     - family: Ewert
  22.       fonts:
  23.         # https://fonts.google.com/specimen/Ewert
  24.         - asset: fonts/Ewert-Regular.ttf

源码是：

  1. import 'package:flutter/material.dart';
  3. const String words1 = "Almost before we knew it, we had left the ground.";
  4. const String words2 = "A shining crescent far beneath the flying vessel.";
  5. const String words3 = "A red flair silhouetted the jagged edge of a wing.";
  6. const String words4 = "Mist enveloped the ship three hours out from port.";
  8. void main() {
  9.   runApp(new MyApp());
  10. }
  12. class MyApp extends StatelessWidget {
  13.   @override
  14.   Widget build(BuildContext context) {
  15.     return new MaterialApp(
  16.       title: 'Flutter Fonts',
  17.       theme: new ThemeData(
  18.         primarySwatch: Colors.blue,
  19.       ),
  20.       home: new FontsPage(),
  21.     );
  22.   }
  23. }
  25. class FontsPage extends StatefulWidget {
  26.   @override
  27.   _FontsPageState createState() => new _FontsPageState();
  28. }
  30. class _FontsPageState extends State<FontsPage> {
  31.   @override
  32.   Widget build(BuildContext context) {
  33.     // Rock Salt - https://fonts.google.com/specimen/Rock+Salt
  34.     var rockSaltContainer = new Container(
  35.       child: new Column(
  36.         children: <Widget>[
  37.           new Text(
  38.             "Rock Salt",
  39.           ),
  40.           new Text(
  41.             words2,
  42.             textAlign: TextAlign.center,
  43.             style: new TextStyle(
  44.               fontFamily: "Rock Salt",
  45.               fontSize: 17.0,
  46.             ),
  47.           ),
  48.         ],
  49.       ),
  50.       margin: const EdgeInsets.all(10.0),
  51.       padding: const EdgeInsets.all(10.0),
  52.       decoration: new BoxDecoration(
  53.         color: Colors.grey.shade200,
  54.         borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
  55.       ),
  56.     );
  58.     // VT323 - https://fonts.google.com/specimen/VT323
  59.     var v2t323Container = new Container(
  60.       child: new Column(
  61.         children: <Widget>[
  62.           new Text(
  63.             "VT323",
  64.           ),
  65.           new Text(
  66.             words3,
  67.             textAlign: TextAlign.center,
  68.             style: new TextStyle(
  69.               fontFamily: "VT323",
  70.               fontSize: 25.0,
  71.             ),
  72.           ),
  73.         ],
  74.       ),
  75.       margin: const EdgeInsets.all(10.0),
  76.       padding: const EdgeInsets.all(10.0),
  77.       decoration: new BoxDecoration(
  78.         color: Colors.grey.shade200,
  79.         borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
  80.       ),
  81.     );
  83.     // https://fonts.google.com/specimen/Ewert
  84.     var ewertContainer = new Container(
  85.       child: new Column(
  86.         children: <Widget>[
  87.           new Text(
  88.             "Ewert",
  89.           ),
  90.           new Text(
  91.             words4,
  92.             textAlign: TextAlign.center,
  93.             style: new TextStyle(
  94.               fontFamily: "Ewert",
  95.               fontSize: 25.0,
  96.             ),
  97.           ),
  98.         ],
  99.       ),
  100.       margin: const EdgeInsets.all(10.0),
  101.       padding: const EdgeInsets.all(10.0),
  102.       decoration: new BoxDecoration(
  103.         color: Colors.grey.shade200,
  104.         borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
  105.       ),
  106.     );
  108.     // Material Icons font - included with Material Design
  109.     String icons = "";
  111.     // https://material.io/icons/#ic_accessible
  112.     // accessible: &#xE914; or 0xE914 or E914
  113.     icons += "\u{E914}";
  115.     // https://material.io/icons/#ic_error
  116.     // error: &#xE000; or 0xE000 or E000
  117.     icons += "\u{E000}";
  119.     // https://material.io/icons/#ic_fingerprint
  120.     // fingerprint: &#xE90D; or 0xE90D or E90D
  121.     icons += "\u{E90D}";
  123.     // https://material.io/icons/#ic_camera
  124.     // camera: &#xE3AF; or 0xE3AF or E3AF
  125.     icons += "\u{E3AF}";
  127.     // https://material.io/icons/#ic_palette
  128.     // palette: &#xE40A; or 0xE40A or E40A
  129.     icons += "\u{E40A}";
  131.     // https://material.io/icons/#ic_tag_faces
  132.     // tag faces: &#xE420; or 0xE420 or E420
  133.     icons += "\u{E420}";
  135.     // https://material.io/icons/#ic_directions_bike
  136.     // directions bike: &#xE52F; or 0xE52F or E52F
  137.     icons += "\u{E52F}";
  139.     // https://material.io/icons/#ic_airline_seat_recline_extra
  140.     // airline seat recline extra: &#xE636; or 0xE636 or E636
  141.     icons += "\u{E636}";
  143.     // https://material.io/icons/#ic_beach_access
  144.     // beach access: &#xEB3E; or 0xEB3E or EB3E
  145.     icons += "\u{EB3E}";
  147.     // https://material.io/icons/#ic_public
  148.     // public: &#xE80B; or 0xE80B or E80B
  149.     icons += "\u{E80B}";
  151.     // https://material.io/icons/#ic_star
  152.     // star: &#xE838; or 0xE838 or E838
  153.     icons += "\u{E838}";
  155.     var materialIconsContainer = new Container(
  156.       child: new Column(
  157.         children: <Widget>[
  158.           new Text(
  159.             "Material Icons",
  160.           ),
  161.           new Text(
  162.             icons,
  163.             textAlign: TextAlign.center,
  164.             style: new TextStyle(
  165.               inherit: false,
  166.               fontFamily: "MaterialIcons",
  167.               color: Colors.black,
  168.               fontStyle: FontStyle.normal,
  169.               fontSize: 25.0,
  170.             ),
  171.           ),
  172.         ],
  173.       ),
  174.       margin: const EdgeInsets.all(10.0),
  175.       padding: const EdgeInsets.all(10.0),
  176.       decoration: new BoxDecoration(
  177.         color: Colors.grey.shade200,
  178.         borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
  179.       ),
  180.     );
  182.     return new Scaffold(
  183.       appBar: new AppBar(
  184.         title: new Text("Fonts"),
  185.       ),
  186.       body: new ListView(
  187.         children: <Widget>[
  188.           rockSaltContainer,
  189.           v2t323Container,
  190.           ewertContainer,
  191.           materialIconsContainer,
  192.         ],
  193.       ),
  194.     );
  195.   }
  196. }