Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "CSS attribute font-kerning how to use", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "CSS attribute font-kerning how to use" this article.

1. Kerning attribute font-kerning

Font-kerning should be regarded as a CSS3 attribute, and its main function is to adjust the spacing of glyphs, and it is basically the spacing of English character shapes, because the shapes of English characters are irregular, wide and narrow, some round and angular, which will lead to density inconsistency when arranged together, while font-kerning can effectively make use of the gap between character shapes to make the space between glyphs more similar. As shown in the following figure (from the MDN document):

The syntax is as follows:

Font-kerning: auto | normal | none

Where:

Auto

Default value. The browser decides whether to adjust the kerning or not. For example, font size, that is, when the font-size attribute value is small, it will be strange to adjust the kerning, so the browser will forbid it.

Normal

Apply kerning.

None

Kerning is not adjusted according to the kerning information in the font file.

But font-kerning doesn't work all the time.

Generally speaking, Chinese is invalid. Chinese characters are square and square. Generally, there is no need to adjust kerning, unless it is cursive or cursive or some handwritten fonts.

It must be an OpenType font ① with kerning information to be useful, and it will not work if the font file does not have kerning information or is not an OpenType font.

IE browsers, including the edge version, are ineffective, and iOS currently requires private prefixes.

① OpenType, also known as Type 2 fonts, is another font format developed by Microsoft and Adobe. It is also an outline font that is more powerful than TrueType, and one of the most obvious benefits is that you can embed PostScript fonts into TrueType software. It also supports multiple platforms, large character sets, and copyright protection. It can be said to be a superset of Type 1 and TrueType. The OpenType standard also defines the suffix name of the OpenType file name. The suffix of the OpenType file containing TureType fonts is .ttf, and the suffix of the file that contains PostScript fonts is .OTF. If it is a font package file that contains a series of TrueType fonts, the suffix is .TTC.

In addition, font-kerning kerning is not valid for all characters. If you want all characters to be spaced, you should use the CSS attribute letter-spacing, which you should be familiar with.

For more information about kerning adjustment, please refer to 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

II. Text smoothing attribute font-smoothing

Font-smoothing determines how browsers control fonts not to appear aliased, because the effect of font rendering in browsers may be different from that in design software. MDN documents show that this property should be called font-smooth. The result is non-standard, as a result, no browser uses this name, which gives people the impression that the attribute name of font-smooth should come out of YY. In fact, it is the old W3C proposal that once had content about font-smooth!

In fact, webkit browsers such as Chrome use-moz-osx-font-smoothing under webkit-font-smoothing,Firefox browsers

The relevant syntax and meanings are as follows:

-webkit-font-smoothing

None

Turn off anti-aliasing with sharp edges.

Antialiased

The font is pixel-level smooth and makes the text look finer on a dark background.

Subpixel-antialiased

Font sub-pixel smoothing, mainly for better display in non-retinal devices.

-moz-osx-font-smoothing

Auto

The viewer can only choose a font to render the presentation.

Grayscale

According to my personal experience, the text smoothing attribute font-smoothing seems to be unimportant under windows devices, and there is no difference in each attribute value, which may be related to the pixel ratio of the display device. Rendering under OS X devices has an obvious effect.

For example, the Microsoft elegant black font of an iMac display under a non-retina screen is as thick as "Qingguo" (left below). Using-webkit-font-smoothing:antialiased, it immediately becomes "Qingcheng" (right below).

Therefore, you have the following practice code:

Body {- webkit-font-smoothing: antialiased;} @ media (min-resolution: 2dppx) {/ * Retina still uses default font rendering * / body {- webkit-font-smoothing: subpixel-antialiased;}}

Of course, it is OK to recommend Apple fonts or default system fonts under OS X, and "Microsoft Yahei" is not a good choice.

Small Capital letter font-variant

Font-variant is a CSS attribute that has been around since the IE6 era. For us Greater China users, the attributes and functions it supports make us outsiders feel a bit sore. Realize small uppercase letters and two attribute values. Either normal or small-caps,font-variant:small-caps can make English characters appear as small uppercase letters.

The following code indicates:

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

The result is as follows:

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

That is, the size is the same as lowercase letters, but the style is uppercase. But I really don't understand in what scenarios this character setting will be used.

Then, after entering the era of CSS3, the original single font-variant attribute has been fully upgraded to an abbreviated format and is an acronym for the following properties: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian.

It immediately became very powerful.

For example, if you pick up a random font-variant-alternates attribute, the syntax goes 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 is choking, support a lot of attribute values to nothing, but do not know so many words is like that, and it is a function. Fortunately, at present, Firefox browsers support high, so we can slow down our learning.

However, it seems that the browser compatibility of the font-feature-settings attribute that is closely related to font-variant is completely different, and it is green on your doorstep!

I have a brief understanding, and found that the water is very deep, involving font design and various character performance and so on, for example, the following paragraph of CSS sentence do you know what meaning?

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

Most of them stare at small eyes, so this article will not be introduced, but will be introduced in depth when the time is ripe.

In short, we all know that today's font-variant is no longer the pakchoi it used to be.

IV. Concluding remarks

From the process of sorting out the relevant knowledge of this article, I found that there is one thing that appears very frequently (although the frequency mentioned in the article is not high), that is, OpenType fonts, it seems that the performance and rendering of many new font-related CSS attributes are closely related to OpenType fonts, before reading the relevant document draft, there is also quite a lot of space related to the font a lot of in-depth details.

Let me think in the text font rendering and presentation of this piece, the water is very deep, these things should be just the beginning of these things, in the future to learn and in-depth things.

But, not necessarily, why do you say that? The specified specifications are all foreigners, and the use of English, many rules may not be applicable to Chinese characters, such as font-variant:small-caps, let's just take a look, the probability of using the actual project is as low as the probability of winning the lottery at the annual meeting.

The above is all the content of the article "how to use CSS attribute font-kerning". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.