In the previous "Default Text and Font Knowledge Points on Flutter" and "Take You In-depth Understanding of Font "Cold" Knowledge in Flutter", a lot of interesting knowledge points about fonts on Flutter have been introduced, and this article will continue to introduce A property Textabout Flutter : In fact FontFeature, compared to Flutter, the content of this article may be more closely related to the front end or design .
I believe this article is definitely one
FontFeatureof the few materials you can see about Flutter.
what is it FontFeature? In short, it is an attribute that affects the shape of the font . In the corresponding field of the front end, it should be font-feature-settings, it is different from FontFamily, a parameter used to specify the shape of the words in the font.
As shown in the figure below
fracistnumthe contrast rendering effect of fraction and table number, this effect can achieve special rendering without adding font library, andFeaturealso has the meaning of characteristics, so it can also be understood as font characteristics.
We know that Flutter uses fonts on Android by default Roboto , and fonts on iOS SF , but in fact, there are many types of Robotofonts . For example, if you go to the system/fontsdirectory of your mobile phone, you will find that there are many font libraries with the Robotowords .
RobotoSo font libraries such as are a large set of fonts, and different ones font-weightcorrespond to different ones ttf. For example, by default, Robotoit does not support font-weightthe configuration of 600 :
So as shown in the figure below, if we set w400- w700, weightwe can clearly see that 500 and 600 in the middle are actually the same thickness, so when setting weightor designing UI, we need to consider weightwhether the desired effect is supported on different platforms. .
Going back to FontFeatureabove , Robotohow many features do you support by default? The answer is 26 types, their codes are shown below, and the effect after running is also shown in the figure below. From the point of view of daily use, these 26 kinds of Features basically meet most of the needs 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"
而 iOS 上的 SF pro 默认支持 39 种 Features ， 它们的编码如下所示，运行后效果也如下图所示，可以看到 SF pro 支持的 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"
所以可以看到，并不是所有字体支持的 Features 都是一样的，比如 iOS 上支持 sups 上标显示和 subs 下标显示，但是 Android 上的 Roboto 并不支持，甚至很多第三方字体其实并不支持 Features 。
There are also various restrictions on the Web, such as
swsh(flower body) basically does not support browsers by default,fwid,nlckdoes not support Safari browsers and so on.
Interestingly, Flutter Web has an issue #58159 that renders text blurry. This issue has not been officially fixed yet, but you Textcan FontFeaturesfix this issue by setting arbitrary .
Because the blurring is generally caused by the use of
canvaslabels draw the text, and if theTextcontrolfontFeatureshas , it will be set to<p>+<span>for rendering to avoid problems .
Finally, if you are still interested in FontFeature, you can learn more about it through the following information. If you have any questions about fonts, please leave a message for discussion.
-
If you want to know more types of features, you can learn more at en.wikipedia.org/wiki/List_o… ;
-
If you are interested in what features your font supports, you can learn more at wakamaifondue.com ;