If you want to use a word to describe it, you can call it font variants. The corresponding CSS property is the font-variation- * property, which includes linkages, caps, and numbers And alternate glyphs. These attributes allow us to create more precise and beautiful typographic (text) effects on the Web.
In fact, typography on the Web always lags behind its effect in printing. But this is understandable, because the fonts printed on the page have been developed for centuries, and it can be said that it has developed to a complicated degree. It is still difficult to reach such a level in the browser.
However, due to the increase of OpenType functions in Web fonts and the improvement of CSS features and capabilities, the gap between typography on the Web and typography on the web is gradually narrowing.
So today's article, with the help of the previous examples, let's look at how to use CSS to control OpenType features, but remember that any web font you use needs to support these features.
font-variant- * attributes
Font-variant- * attributes can be used in CSS to control most OpenType features. You can also use font-feature-settings to support older browsers. However, whenever possible, you should use the more modern font-variant- * attributes. In actual use, you can use the @supports rule to downgrade font-variant- *, use this property for supported browsers, and use font-feature-settings for unsupported browsers.
body {font-feature-settings: "liga" 1;} @ supports (font-variant-ligatures: common-ligatures) {body {font-feature-settings: normal; font-variant-ligatures: common-ligatures;}}
Maybe until now, you and I do not quite understand what the above code does. Don't worry, read on and you will understand.
font-variant- * mainly includes:
font-variant-ligatures
font-variant-caps
font-variant-numeric
font-variant-alternates
font-variant-east-asian
What follows is a brief look at these attributes.
font-variant-ligatures
A connection is a single glyph consisting of two or more quiz. They usually prevent ugly or awkward letter collisions. The main function is to help identify.
font-variant-ligatures can use the following keywords as its attribute values:
/ * Global values * /
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;
common-ligatures
These connections are those that the designer decides to use under normal circumstances. In most cases, these should be used because most browsers enable them by default.
The most common connection values are fi, ffi, th, or similar. Their corresponding OpenType values are liga and clig. Both values are possible:
common-ligatures: active connection
no-common-ligatures: Disable connections
such as:
font-variant-ligatures: common-ligatures; / * enabled * / font-variant-ligatures: no-common-ligatures; / * disabled * / font-feature-settings: 'liga' 1; / * older versions of the browser are enabled * / font-feature-settings: 'liga' 0; / * Disabled in older browsers * /
The effect is as follows:
The previous line opens the connection, the next line disables the effect of the connection
discretionary-ligatures
These can be used for printing connections and can achieve special effects. These are disabled by default. It can also be understood that these values can be used to control specific connections, specified fonts and defined by the OpenType designer. They correspond to the OpenType value dig. It also has two possible values:
discretionary-ligatures: activate connections
no-discretionary-ligatures: Disable connections
If set in your code:
font-variant-ligatures: discretionary-ligatures; / * activate * / font-variant-ligatures: no-discretionary-ligatures; / * disable * / font-feature-settings: 'dlig' 1; / * lower version browser activation * / font-feature-settings: 'dlig' 0; / * Disabled in older browsers * /
The effect is as follows:
The first line opens the connection and the second line disables the connection
contextual
These values control whether the letters fit their context. That is, whether they fit the surrounding letters. These values correspond to calt in OpenType. The same contextual means enabled; no-contextual means disabled.
font-variant-ligatures: contextual; / * enable * / font-variant-ligatures: no-contextual; / * disable * / font-feature-settings: 'calt' 1; / * low-level enable * / font-feature -settings: 'calt' 0; / * low-level disable * / historical-ligatures
With these values, it looks like tz in German is displayed as ß. Its corresponding OpenType value is hlig. The historical-ligatures ring is on, and no-historical-ligatures is off.
font-variant-ligatures: historical-ligatures; / * enable * / font-variant-ligatures: no-historical-ligatures; / * disable * / font-feature-settings: 'hlig' 1; / * low-level enable * / font-feature-settings: 'hlig' 0; / * low-level disable * /
font-variant-position
We often use the sub and sup elements to change the vertical position of the character. By default, browsers use a regular numeric character to make the font-size smaller, and use vertical-align to increase or decrease it. These are not true subs and sups, and they usually look ugly, not to mention they disrupt line-height.
Thankfully, there is a way to actually use font-variant-position to achieve effects like sub and sup. However, this property is currently only supported in Firefox.
/ * Keyword values * / font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super; / * Global values * / font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: unset;
sub
To achieve the effect of subscript characters similar to the <sub> tag:
font-variant-position: sub; / * enable * / font-variant-position: normal; / * disable both variants * / font-feature-settings: 'subs' 1; / * low-level enable * / font-feature -settings: 'subs' 0; / * low-level disable * /
super
To achieve a superscript character effect similar to the <sup> tag:
font-variant-position: super; / * enable * / font-variant-position: normal; / * disable both variants * / font-feature-settings: 'sups' 1; / * low-level enable * / font-feature -settings: 'sups' 0; / * low-level disable * /
font-variant-caps
The font-variant-caps property is used to control the capitalization of letters. It's just that small capitalization is enabled here.
/ * Keyword values * / font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps; / * Global values * / font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;
small-caps
Small capital letters have the same design as lowercase letters and are used in Capital letters in run text. They make paragraphs more cohesive and readable.
font-variant-caps: small-caps; / * enable * / font-variant-caps: normal; / * disable all variants * / font-feature-settings: 'smcp' 1; / * low-level enable * / font -feature-settings: 'smcp' 0; / * low-level disable * /
all-small-caps
small-caps just replaces lowercase letters with uppercase letters. If you want to make all letters small, you need to use all-small-caps.
font-variant-caps: all-small-caps; / * enable * / font-variant-caps: normal; / * disable all variants * / font-feature-settings: 'smcp' 1, 'c2sc' 1; / * low-level enable * / font-feature-settings: 'smcp' 1, 'c2sc' 0; / * low-level disable * /
petite-caps
Standard small capital letters are usually slightly larger than the x height of the font. Some fonts have extra small capitals that highly match x. These are called petite-caps.
font-variant-caps: petite-caps; / * enable * / font-variant-caps: normal; / * disable all variants * / font-feature-settings: 'pcap' 1; / * low-level enable * / font -feature-settings: 'pcap' 0; / * low-level disable * /
all-petite-caps
Similar to all-small-caps, it converts all letters, including lowercase and uppercase letters, into small uppercase letters, and matches the x letter height of the font.
font-variant-caps: all-petite-caps; / * enable * / font-variant-caps: normal; / * disable all variants * / font-feature-settings: 'pcap' 1, 'c2pc' 1; / * low-level enable * / font-feature-settings: 'pcap' 1, 'c2pc' 0; / * low-level disable * /
unicase
This feature maps uppercase and lowercase letters to mixed lowercase and lowercase large letters, creating a single case alphabet. Sometimes these lowercase letters are actual small capital letters, sometimes they are specially designed unicase forms. The implementation of this feature varies from font to font.
font-variant-caps: unicase; / * enable * / font-variant-caps: normal; / * disable all variants * / font-feature-settings: 'unic' 1; / * low-level enable * / font-feature -settings: 'unic' 0; / * low-level disable * /
titling-caps
Standard uppercase letters are designed to be used with lowercase letters. When they are used in all uppercase strings, they appear to be too large. Some fonts are also particularly suitable for this situation.
font-variant-caps: titling-caps; / * enable * / font-variant-caps: normal; / * disable all variants * / font-feature-settings: 'titl' 1; / * low-level enable * / font -feature-settings: 'titl' 0; / * low-level disable * /
font-variant-numeric
The font-variant-numeric property is used to control the processing of numbers, fractions, and serial numbers. The correct display of numbers depends on the context. Here are some general rules:
Number running in the text body, using old-fashioned numbers
Numbers to run in the title, the scale used is inline numbers
Numbers in numeric tables, the scale used is inline numbers in the table
Common attributes:
font-variant-numeric: normal; font-variant-numeric: ordinal; font-variant-numeric: slashed-zero; font-variant-numeric: lining-nums; / * <numeric-figure-values> * / font-variant -numeric: oldstyle-nums; / * <numeric-figure-values> * / font-variant-numeric: proportional-nums; / * <numeric-spacing-values> * / font-variant-numeric: tabular-nums; / * <numeric-spacing-values> * / font-variant-numeric: diagonal-fractions; / * <numeric-fraction-values> * / font-variant-numeric: stacked-fractions; / * <numeric-fraction-values> * / font-variant-numeric: oldstyle-nums stacked-fractions; / * Global values * / font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;
lining-nums
The numbers in lining-nums are approximately uppercase letters and are highly consistent. They should be used for numbers in titles or tables. Usually, numbers are the default.
font-variant-numeric: lining-nums; / * enable * / font-variant-numeric: normal; / * disable all variants * / font-feature-settings: 'lnum' 1; / * low-level enable * / font -feature-settings: 'lnum' 0; / * low-level disable * /
oldstyle-nums
Old-style numbers have different heights and alignments, so they are more similar to lowercase letters. They should be used in the body text.
font-variant-numeric: oldstyle-nums; / * enable * / font-variant-numeric: normal; / * disable all variants * / font-feature-settings: 'onum' 1; / * low-level enable * / font -feature-settings: 'onum' 0; / * low-level disable * /
proportional-nums
Proportional numbers have variable spacing and blend with horizontal text. They should be used in most cases, except in data tables. Among them, vertical alignment is important. Usually numbers are proportional numbers by default.
font-variant-numeric: proportional-nums; / * enable * / font-variant-numeric: normal; / * disable all variants * / font-feature-settings: 'pnum' 1; / * low-level enable * / font -feature-settings: 'pnum' 0; / * low-level disable * /
tabular-nums
Table numbers have the same width and should be used in data tables to allow numbers to be vertically aligned.
font-variant-numeric: tabular-nums; / * enable * / font-variant-numeric: normal; / * disable all variants * / font-feature-settings: 'tnum' 1; / * low-level enable * / font -feature-settings: 'tnum' 0; / * low-level disable * /
diagonal-fractions
By default, scores are displayed in lowercase letters. Appropriate scores will be formatted to match the height of a lined graphic, which can be object lines or stacks.
font-variant-numeric: diagonal-fractions; / * enable * / font-variant-numeric: normal; / * disable all variants * / font-feature-settings: 'frac' 1; / * low-level enable * / font -feature-settings: 'frac' 0; / * low-level disable * /
stacked-fractions
Stacked scores are not as common as diagonal scores in most web fonts, but it should prove useful. This is much used in a lot of science or mathematics.
font-variant-numeric: stacked-fractions; / * enable * / font-variant-numeric: normal; / * disable all variants * / font-feature-settings: 'afrc' 1; / * low-level enable * / font -feature-settings: 'afrc' 0; / * low-level disable * /
ordinal
Ordinal numbers like st, nd, rd, and th are displayed as standard lowercase letters by default. Ideally, however, these numbers will increase as the numbers increase. Ordinal values support this.
font-variant-numeric: ordinal; / * enable * / font-variant-numeric: normal; / * disable all variants * / font-feature-settings: 'ordn' 1; / * low-level enable * / font-feature -settings: 'ordn' 0; / * low-level disable * /
slashed-zero
You can use a slash to replace the zero character.
font-variant-numeric: slashed-zero; / * enable * / font-variant-numeric: normal; / * disable all variants * / font-feature-settings: 'zero' 1; / * low-level enable * / font -feature-settings: 'zero' 0; / * low-level disable * /
font-variant-alternates
Fonts can provide multiple substitutions for any character. The font-variant-alternates property provides many ways to control character substitution.
/ * Keyword values * / font-variant-alternates: normal;
font-variant-alternates: historical-forms; / * Functional notation values * / font-variant-alternates: stylistic (user-defined-ident);
font-variant-alternates: styleset (user-defined-ident); font-variant-alternates: character-variant (user-defined-ident);
font-variant-alternates: swash (user-defined-ident);
font-variant-alternates: ornaments (user-defined-ident);
font-variant-alternates: annotation (user-defined-ident);
font-variant-alternates: swash (ident1) annotation (ident2); / * Global values * / font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;
historical-forms
It is applied to the periodic table. Note that this is still different from the effect in the connection.
font-variant-numeric: historical-forms; / * enable * / font-variant-numeric: normal; / * disable all variants * / font-feature-settings: 'hist' 1; / * low-level enable * / font -feature-settings: 'hist' 0; / * low-level disable * /
In addition, different attribute values are selected according to different scenarios.
font-variation-settings
The font-variation-settings property is mainly used to specify the characteristics that need to be changed. It mainly consists of a letter and their change values. This attribute provides control over OpenType or TrueType font variants in low browsers.
/ * Use the default settings * / font-variation-settings: normal; / * Set values for OpenType axis names * / font-variation-settings: "XHGT" 0.7; / * Global values * / font-variation-settings: inherit ;
font-variation-settings: initial;
font-variation-settings: unset;
This is the font-variation-settings: 'INLN' 0; and font-variation-settings: 'INLN' 1000, 'SWRM' 1000; etc. that we saw in the examples at the beginning of our article. Each value consists of 4 ASCII characters and a number representing the axis value. If <string> has more or fewer characters or contains characters outside the codepoint range of U + 20 to U + 7E, the entire attribute is invalid. <Number> can be a fraction or a negative number.
to sum up
After a round of font-variation- * related attributes, I finally understand the implementation principle of this Demo. However, it takes time to fully grasp this knowledge. There must be many knowledge points related to fonts and typography. This requires some printing-related knowledge, which may help us better understand the characteristics of these attributes and the scenarios in which they are used.
In addition, the browser currently supports few of these attributes, but it doesn't matter. Those who are interested can play and experience. Or modify the example at the beginning of the article yourself, maybe it can achieve another effect.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
