By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.

In this article, take a look at some of the attributes that may not be used much and become familiar with font smoothing. These attributes are font Kerning, font Smoothing, and font variant.

Font-family: arial, sans-serif

Font kerning is a CSS3 property. It is mainly used to adjust the spacing of English characters, and basically the spacing of English characters. Because English characters are irregular, some are wide and narrow, some are round, some are angular, so that the spacing of English characters is not consistent. Font kerning takes advantage of the gaps between character shapes to make the space between glyphs more similar, as shown below (from the MDN document) :

The syntax is as follows:

font-kerning: auto | normal | none

Among them:

auto
The default value. It is up to the browser to decide whether to adjust the kerning. For example, the font size, which is
font-sizeWhen the property value is small, it is strange to adjust the kerning, so the browser disables it.
normal
Apply kerning adjustment.
none
Kerning is not adjusted based on the kerning information in the font file.

However, font-Kerning doesn’t work all the time.

  1. Generally Chinese is not valid, Chinese characters are square and straight, usually there is no need to use spacing adjustment, except in running script or cursive script or some handwritten font.
  2. It must be an OpenType font with kerning information to be useful. If the font file has no kerning information or is not an OpenType font, it will have no effect.
  3. Internet Explorer, including the Edge version, does not work, and iOS currently requires private prefixes.

① OpenType, also called Type 2 font, is another font format developed by Microsoft and Adobe. It is also an outline font, which is more powerful than TrueType, and one of the most obvious benefits is that PostScript fonts can be embedded in TrueType software. It also supports multiple platforms, a large character set, and copyright protection. It is a superset of Type 1 and TrueType. The OpenType standard also defines suffixes for OpenType file names. OpenType files containing TureType fonts have a.ttf suffix, and files containing PostScript fonts have a.ttf suffix. OTF. If it is a font package file containing a list of TrueType fonts, the suffix is named. TTC.

In addition, font-kerning spacing does not work for all characters. If you want to adjust all character spacing, you should use the CSS property letter-spacing.

For more information on adjusting kerning, see the following articles:

  • Advanced web typography: Kerning by Elliot Jay Stocks
  • Kerning on the Web by Bram Stein
  • A Manual Kerning Method for the Web by Nathan Ford

A: When you make a choice, you can make a choice

When a font becomes available, it determines how a browser can control a font to not become serrated. When a font appears in a browser, it may not appear as it does in your software. It turned out to be non-standard, and none of the browsers used the name, so it seemed like the name of the text-smooth property had been invented, but it was actually an old W3C proposal that had something about text-smooth!

A webKit browser like Chrome uses -webkit-font smoothing, and a Firefox browser uses -Moz-osx -font smoothing.

-webkit-font-smoothing

none
Turn off anti-aliasing, sharp edges.
antialiased
The font is pixel smooth, making the text look thinner on a dark background.
subpixel-antialiased
Fonts are subpixel smooth, mainly for better display on non-retinal devices.

-moz-osx-font-smoothing

auto
The viewer can only select font rendering representation.
grayscale

Under its
"antialiased"“Can make text on a dark background look thinner.

In my personal experience, the text smoothing attribute seems to be relatively easy to use on Windows devices. There is no difference between the attributes of a screen and its pixels

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.

In this article, take a look at some of the attributes that may not be used much and become familiar with font smoothing. These attributes are font Kerning, font Smoothing, and font variant.

Font-family: arial, sans-serif

Font kerning is a CSS3 property. It is mainly used to adjust the spacing of English characters, and basically the spacing of English characters. Because English characters are irregular, some are wide and narrow, some are round, some are angular, so that the spacing of English characters is not consistent. Font kerning takes advantage of the gaps between character shapes to make the space between glyphs more similar, as shown below (from the MDN document) :

The syntax is as follows:

font-kerning: auto | normal | noneCopy the code

Among them:

auto
The default value. It is up to the browser to decide whether to adjust the kerning. For example, the font size, which is
font-sizeWhen the property value is small, it is strange to adjust the kerning, so the browser disables it.
normal
Apply kerning adjustment.
none
Kerning is not adjusted based on the kerning information in the font file.

However, font-Kerning doesn’t work all the time.

  1. Generally Chinese is not valid, Chinese characters are square and straight, usually there is no need to use spacing adjustment, except in running script or cursive script or some handwritten font.
  2. It must be an OpenType font with kerning information to be useful. If the font file has no kerning information or is not an OpenType font, it will have no effect.
  3. Internet Explorer, including the Edge version, does not work, and iOS currently requires private prefixes.

① OpenType, also called Type 2 font, is another font format developed by Microsoft and Adobe. It is also an outline font, which is more powerful than TrueType, and one of the most obvious benefits is that PostScript fonts can be embedded in TrueType software. It also supports multiple platforms, a large character set, and copyright protection. It is a superset of Type 1 and TrueType. The OpenType standard also defines suffixes for OpenType file names. OpenType files containing TureType fonts have a.ttf suffix, and files containing PostScript fonts have a.ttf suffix. OTF. If it is a font package file containing a list of TrueType fonts, the suffix is named. TTC.

In addition, font-kerning spacing does not work for all characters. If you want to adjust all character spacing, you should use the CSS property letter-spacing.

For more information on adjusting kerning, see the following articles:

  • Advanced web typography: Kerning by Elliot Jay Stocks
  • Kerning on the Web by Bram Stein
  • A Manual Kerning Method for the Web by Nathan Ford

A: When you make a choice, you can make a choice

When a font becomes available, it determines how a browser can control a font to not become serrated. When a font appears in a browser, it may not appear as it does in your software. It turned out to be non-standard, and none of the browsers used the name, so it seemed like the name of the text-smooth property had been invented, but it was actually an old W3C proposal that had something about text-smooth!

A webKit browser like Chrome uses -webkit-font smoothing, and a Firefox browser uses -Moz-osx -font smoothing.

-webkit-font-smoothing

none
Turn off anti-aliasing, sharp edges.
antialiased
The font is pixel smooth, making the text look thinner on a dark background.
subpixel-antialiased
Fonts are subpixel smooth, mainly for better display on non-retinal devices.

-moz-osx-font-smoothing

auto
The viewer can only select font rendering representation.
grayscale

Under its
"antialiased"“Can make text on a dark background look thinner.

According to my personal experience, the text smoothing attribute seems to be somewhat unavailable on Windows devices. There is no difference in its parameters. It may be related to the pixel ratio of the display device, and it has obvious effect on OS X devices.

For example, Microsoft’s Yahei font on non-Retina iMac screens, which is as thick as the word “Lean Country” (left), becomes “lean Country” in seconds using -webkit-Font-Smoothing: Antialiased (right).

Thus, we have the following code in practice:

body { -webkit-font-smoothing: antialiased; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: /* Body {-webkit-font Smoothing: subpixel-Antialiased; }}Copy the code

Of course, in OS X, the recommended MAC or default system font is ok, “Microsoft Yahei” is not a good choice.

Three, small body capital letters font-variant

Font variant is a CSS attribute from IE6 era. For greater China users, it supports properties and functions that make us foreigners feel a bit painful. It implements small uppercase letters and two attribute values, either Normal or small-caps. Font -variant:small-caps allows English characters to appear as small uppercase letters.

The following code is illustrated:

http://www.<span style="font-variant:small-caps">zhangxinxu.com<span>/wordpress/?p=5974Copy the code

The result looks like this:

http://www.zhangxinxu.com/wordpress/?p=5974

The size of a lowercase letter, but the style is uppercase. But I really don’t understand in what context would this character set be used?

Then, in the era of CSS3, the original single font-variant attribute has been upgraded to an abbreviated format, and it is the abbreviation of the following attributes: Font variant- CAPS, font variant-numeric, font variant-alternates, font variant- Ligatures, and font variant- east-Asian.

You look like a hell of a bitch right now.

For example, the syntax for a random font-varier-alternates attribute looks like this:

font-variant-alternates: normal;
font-variant-alternates: historical-forms;
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);Copy the code

Scared me to drink water choking, support attribute value to nothing, but make so many unknown words is so, and still function body. Fortunately, the Current Firefox browser support is relatively high, we can learn to slow down.

However, the font-variant feature- Settings attribute is not compatible with browsers.

I have a simple understanding, found that the water here is very deep, very deep, involving font font design and a variety of character expression and so on, for example, the following CSS statement do you know what it means?

/* format: Feature-tag =[0,1] with 0 to disable, 1 to enable */ /* dlig = discretionary ligatures, ss01 = stylistic set 1 */ font-feature-settings: "dlig=1,ss01=1";Copy the code

Most big eyes stare small eyes, so, this article is not introduced, and then the time is ripe and specialized in-depth introduction.

In short, font-variant is no longer the cabbage of those days.

Fourth, concluding remarks

In the process of sorting out the relevant knowledge of this article, I found that there is one thing that comes up frequently (although it is not mentioned frequently in this article), and that is OpenType Fonts. It seems that many of the new font related CSS properties are closely related to the presentation and rendering of OpenType Fonts. There are also quite a lot of pages about fonts in great detail.

I feel that the water is very deep in text font rendering and rendering. The current things are just beginning, and there are many more things to learn and go deep in the future.

But, not necessarily. Why do you say that? Many rules may not be applicable to Chinese characters, for example, font-variant: small-CAPS. We just have a look. The probability of using actual items is as low as the probability of winning the annual prize.

Otherwise, I’ll leave it at that until I’ve accumulated enough knowledge to dive into these and other font-related CSS property values.

This article is an original article, and it will often update knowledge points and correct some mistakes. Therefore, please keep the original source for reprinting to facilitate traceability, avoid the misleading of old wrong knowledge and have a better reading experience. This paper addresses: www.zhangxinxu.com/wordpress/?…

Have you got something to say? Click here. Want a tip? Click here?

For example, Microsoft’s Yahei font on non-Retina iMac screens, which is as thick as the word “Lean Country” (left), becomes “lean Country” in seconds using -webkit-Font-Smoothing: Antialiased (right).

Thus, we have the following code in practice:

body { -webkit-font-smoothing: antialiased; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: /* Body {-webkit-font Smoothing: subpixel-Antialiased; }}

Of course, in OS X, the recommended MAC or default system font is ok, “Microsoft Yahei” is not a good choice.

Three, small body capital letters font-variant

Font variant is a CSS attribute from IE6 era. For greater China users, it supports properties and functions that make us foreigners feel a bit painful. It implements small uppercase letters and two attribute values, either Normal or small-caps. Font -variant:small-caps allows English characters to appear as small uppercase letters.

The following code is illustrated:

http://www.<span style="font-variant:small-caps">zhangxinxu.com<span>/wordpress/?p=5974

The result looks like this:

http://www.zhangxinxu.com/wordpress/?p=5974

The size of a lowercase letter, but the style is uppercase. But I really don’t understand in what context would this character set be used?

Then, in the era of CSS3, the original single font-variant attribute has been upgraded to an abbreviated format, and it is the abbreviation of the following attributes: Font variant- CAPS, font variant-numeric, font variant-alternates, font variant- Ligatures, and font variant- east-Asian.

You look like a hell of a bitch right now.

For example, the syntax for a random font-varier-alternates attribute looks like this:

font-variant-alternates: normal;
font-variant-alternates: historical-forms;
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);

Scared me to drink water choking, support attribute value to nothing, but make so many unknown words is so, and still function body. Fortunately, the Current Firefox browser support is relatively high, we can learn to slow down.

However, the font-variant feature- Settings attribute is not compatible with browsers.

I have a simple understanding, found that the water here is very deep, very deep, involving font font design and a variety of character expression and so on, for example, the following CSS statement do you know what it means?

/* format: Feature-tag =[0,1] with 0 to disable, 1 to enable */ /* dlig = discretionary ligatures, ss01 = stylistic set 1 */ font-feature-settings: "dlig=1,ss01=1";

Most big eyes stare small eyes, so, this article is not introduced, and then the time is ripe and specialized in-depth introduction.

In short, font-variant is no longer the cabbage of those days.

Fourth, concluding remarks

In the process of sorting out the relevant knowledge of this article, I found that there is one thing that comes up frequently (although it is not mentioned frequently in this article), and that is OpenType Fonts. It seems that many of the new font related CSS properties are closely related to the presentation and rendering of OpenType Fonts. There are also quite a lot of pages about fonts in great detail.

I feel that the water is very deep in text font rendering and rendering. The current things are just beginning, and there are many more things to learn and go deep in the future.

But, not necessarily. Why do you say that? Many rules may not be applicable to Chinese characters, for example, font-variant: small-CAPS. We just have a look. The probability of using actual items is as low as the probability of winning the annual prize.

Otherwise, I’ll leave it at that until I’ve accumulated enough knowledge to dive into these and other font-related CSS property values.

This article is an original article, and it will often update knowledge points and correct some mistakes. Therefore, please keep the original source for reprinting to facilitate traceability, avoid the misleading of old wrong knowledge and have a better reading experience. This paper addresses: www.zhangxinxu.com/wordpress/?…

Have you got something to say? Click here. Want a tip? Click here?