Introduce fonts
First create the fonts directory in the project, then put the ttf file into the directory, and then add the font file to the pubspec file, such as:
... flutter: fonts: - family: PingFang fonts: - asset: fonts/ assets: - assets/exit_icon.png
Here family is customized by us, corresponding to the font. Here each font can correspond to multiple ttf files, such as distinguishing bold:
flutter: fonts: - family: Raleway fonts: - asset: assets/fonts/ - asset: assets/fonts/ weight: 500 - asset: assets/fonts/ weight: 600 - family: AbrilFatface fonts: - asset: assets/fonts/abrilfatface/
- family is the name of the font, which you can use in the fontFamily property of TextStyle.
- asset is the path relative to the file. These files contain the outline of the glyph in the font. When building the application, these files are included in the application's asset package.
You can set the font thickness, tilt and other styles
- The weight attribute specifies the thickness of the font, and the value range is an integer hundreds (multiple of 100) between 100 and 900. These values correspond to FontWeight, which can be used for the TextStyle's fontWeight attribute
- style Specifies whether the font is tilted or normal, and the corresponding values are italic and normal. These values correspond to FontStyle. They can be used for TextStyle's fontStyleTextStyle property
After introducing fonts, it can be used in Text sytle.
Text( "test", style: TextStyle(fontFamily: "Rock Salt",), )
Global Fonts
If you want to set global fonts, you need to set them in the App, as follows:
MaterialApp( title: title, theme: ThemeData( primarySwatch: , visualDensity: , 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, untested by other platforms):
The setting in library is invalid
We encapsulate the basic functions into a library (gitsubmodule form, so it is not released). In fact, the BaseApp that hosts MaterialApp is also in the library, so we initially put the font file in the library, and then set up fontFamily in the MaterialApp of BaseApp.
However, after running, I found that the font has not changed at all. After compiling through flutter build web, I found that there is no font file in the file generated in the build directory.
The reason has not been found yet, but there is a solution. The simple solution is to put a copy of the font file in the main project, and add the font in the pubspec of the main project (the name is consistent with the library). Run this way, you will find that the fonts have changed, and the font file is also generated after build is compiled.
Fonts in TextSpan are not effective
TextSpan can be used to handle the need for mixing graphics and texts. For example, there is a picture tag in the front and the text is followed by text, but the second line of text also starts from the left end of the picture, that is, surround the picture. At this time, TextSpan + WidgetSpan is required to be used only.
However, in flutter web (not tested on other platforms), after setting the global font above, it was found that the font in TextSpan did not take effect, or the system font is still the system font.
This means that TextSpan is a little special. We know that in the source code of Text, the style actually did a merge operation, merged the default style (defaultTextStyle). However, in the TextSpan source code, I found that this step is not in operation, so the set global font does not work for it.
So where you use TextSpan, you must set the font separately if you need it.
This is the end of this article about the implementation of Flutter's global fonts. For more related Flutter global font content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!