We have covered a lot of interesting information about fonts on Flutter in our previous installtions of Default Text and Fonts on Flutter and the “cold” knowledge of fonts on Flutter. This article will continue with a property of Text on Flutter: FontFeature, in fact, may have more to do with the front-end or design than Flutter.

I believe this article is absolutely what you can see about FlutterFontFeatureOne of the few relevant sources.

What is FontFeature? Font feature-Settings is a parameter used to specify the shape of the word in a font.

The figure below shows the contrast rendering effect of FRAC score and TNUM table numbers. This effect can achieve special rendering without increasing font library. In addition, Feature also means Feature, so it can also be understood as font Feature.

We know that Flutter uses the Roboto font by default on Android and SF font on iOS. However, there are many types of The Roboto font. For example, if you look up the System/Fonts directory on your phone, You’ll find a lot of typefaces with the word Roboto in stock.

So a font library like Roboto is a large font set, and different font weights correspond to different TTFS. For example, Roboto does not support font weights of 600 by default:

Therefore, if we set w400-W700 weight, it is obvious that 500 and 600 in the middle are the same thickness, so when setting the weight or designing the UI, we need to consider whether the weight on different platforms supports the desired effect.

Going back to FontFeature, how many features does Roboto support by default? The answer is 26, their codes are shown below, and their effects after operation are also shown in the figure below. In terms of daily use, these 26 features basically meet most requirements of development.

“C2sc” “CCMP” “DLIG” “Dnom” “FRAC” “LIGa” “Lnum” “LOCL” “NUMR” “onum” “Pnum” “salt” “SMCP” “SS01” “SS02” “Ss03”, “SS04”, “SS05”, “SS06”, “SS07”, “TNUM”, “UNIC”, “CPSP”, “kern”, “mark”, “MKMK”

SF Pro on iOS supports 39 Features by default. Their encoding is shown below, and the running effect is shown below, showing that SF Pro supports more Features.

C2sc “, “CALT”, “case”, “CCMP”, “CV01”, “CV02”, “CV03”, “CV04”, “CV05”, “cv06”, “CV07”, “CV08”, “CV09”, “CV10”, “dnom”, “Frac”, “LIGA”, “LOCL”, “NUMR”, “PNUM”, “SMCP”, “SS01”, “SS02”, “SS03”, “SS05”, “SS06”, “SS07”, “SS08”, “SS09”, “SS12”, “Ss13”, “SS14”, “SS15”, “SS16”, “SS17”, “subs”, “SUps”, “tnum”, “kern”

As you can see, not all fonts support the same Features, such as SUPS superscript display and subs subscript display on iOS, but Roboto on Android does not support Features, and many third-party fonts actually do not support Features.

There are limitations on the Web as well, for example, SWSH (font) does not support browsers by default, FWID and NLCK do not support Safari, etc.

Interestingly, there is an issue with Flutter Web rendering Text that becomes blurred #58159. This issue has not been officially fixed, but you can fix it by giving Text any FontFeatures.

If the Text control has fontFeatures, it will be set to < P > + < SPAN > for rendering to avoid the problem.

Finally, if you are still interested in FontFeature, you can read the following information. If you have any questions about font, please leave a comment.

  • If you want to know more about the features of type, can be achieved by en.wikipedia.org/wiki/List_o… Learn more;

  • If you’re interested in what features your font supports, check out wakamaifondue.com for more information.