CSS3 font-feature-settings feature subtraction font animation tremor Effect instance sharing

When you do the Githubprofile project, you use the effects of the digital animations, such as the commits,stars and followers numbers in the My Githubprofile page. In practice, because of the unequal width of digital fonts, resulting in the digital growth animation is very obvious tremor, the experience is very bad. Font-feature-settings is an advanced feature of CSS that provides a graphical display of OpenType fonts. This article mainly and we introduce the use of CSS3 font-feature-settings features subtraction font animation tremor effect, need to refer to the friend, hope to help everyone.

Here I finally use CSS font-feature-settings properties to solve this problem, first look at the effect of the comparison before and after the figure.

Font-feature-settings

font-feature-settingsIs the advanced feature of CSS, used to provide graphical display of OpenType fonts, MDN font-feature-settings.

First, CSS3 provides a set of properties and values for the display mapping of the OpenType font attributes, where we first take advantage font-variant-numeric of, and set its value to tabular-nums , which means that the digital image of the font is required to be consistent in size and aligned as in the table, which is equivalent to the text in the OpenType font tnum.

When there is no corresponding attribute mapping, we can use the font-feature-settings attribute, where we directly set it to the required OpenType property tnum .

font-feature-settingsand font-variant-numeric properties can be applied at the same time, any one of them can achieve the same effect, but for more compatible support, they are defined at the same time.

Compatibility

Font-feature-settings Compatibility:

Font-variant-numeric Compatibility:

No results found in Caniuse database, compatibility Note on MDN affixed

As you can see font-feature-settings , mainstream browser-compatible support is better, so use this feature first.

Demo comparison

This gives montserrat the effect of the font before and after the feature is turned on.