import font
First create the fonts directory in the project, then put the ttf file in this directory, and then add the font file in the pubspec file, such as:
...
flutter:
fonts:
- family: PingFang
fonts:
- asset: fonts/PingFang-Regular.ttf
assets:
- assets/exit_icon.pngHere family is our custom, corresponding to the font, where each font can correspond to multiple ttf files, such as distinguishing bold:
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 is the name of the font, which you can use in the fontFamily property of TextStyle.
- asset is a path relative to the pubspec.yaml file. These files contain the outlines of the glyphs in the font. When the application is built, these files are included in the application's asset package.
You can set the font weight, italic and other styles
- The weight property specifies the thickness of the font, and the value range is an integer between 100 and 900 (multiples of 100). These values correspond to FontWeight, which can be used in the fontWeight property of TextStyle
- style specifies whether the font is italic or normal, and the corresponding values are italic and normal. These values correspond to the fontStyle TextStyle property of FontStyle that can be used in TextStyle
After the font is introduced, it can be used in the sytle of Text
Text(
"test",
style: TextStyle(fontFamily: "Rock Salt",),
)global font
If you want to set the global font, you need to set it in the App, as follows:
MaterialApp(
title: title,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.comfortable,
fontFamily: "PingFang",
textTheme: TextTheme(
...
)
),
...
);In this way, the global font becomes the font we set.
question
But there are two small problems here (flutter web, not tested on other platforms):
The settings in the library are invalid
We encapsulate the basic functions into a library (gitsubmodule form, so it is not released). In fact, the BaseApp that hosts the MaterialApp is also in the library, so the font files are initially placed in the library, and then the fontFamily is set in the MaterialApp of the BaseApp.
However, it is found that the font has not changed at all. After compiling through flutter build web, it is found that the font file does not exist in the files generated in the build directory.
The reason has not been found, but there is a solution. The simple solution is to also put a copy of the font file in the main project, and also add the font in the pubspec of the main project (the name is the same as that in the library). In this way, you will find that the fonts have changed, and the font file will also be generated after the build is compiled.
The font in TextSpan does not take effect
TextSpan can be used to handle the needs of image and text mixing. For example, the previous image label is followed by text, but the second line of text must start from the leftmost end of the image, that is, surround the image. In this case, the combination of TextSpan+WidgetSpan is required.
But in flutter web (other platforms are not tested), after setting the global font above, it is found that the font in TextSpan does not take effect, it is still the system font.
Explain that TextSpan is a little special. We know that the style in the source code of Text actually does a merge operation, and merges the default style (defaultTextStyle), as follows:
Widget build(BuildContext context) {
final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);
TextStyle effectiveTextStyle = style;
if (style == null || style.inherit)
effectiveTextStyle = defaultTextStyle.style.merge(style);
...
}
It can be seen that at the beginning, the defaultTextStyle was merge d with the style we set for this Text alone, and then the style was set, so as long as this property is not overridden in the program, it will always work. So whether it is a global style or a style set separately for Text, it will take effect as long as there is no conflict.
But in the source code of TextSpan, it is found that there is no such operation, so the global font set has no effect on it.
So where TextSpan is used, the font must be set separately if needed.