Web fonts all know: Site font rendering process

Article Description: we know that the same font may be different in different browsers, in addition to browsers, what are the factors that lead to different performance? Different systems under the glyph rendering is not the same, the root cause is what? We hope that the browser under the same font layout, to achieve the perfect solution?

Objective

We know that the same font may be different in different browsers, in addition to browsers, what are the factors that lead to different performance? Different systems under the glyph rendering is not the same, the root cause is what? We hope that the browser under the same font layout, to achieve the perfect solution?

With these questions, let's take a look at the font rendering process:

Decoding

Before decoding, we briefly review some of the knowledge of coding, common nouns are: ASCII, GB2312, Big5, Unicode, UTF-8, what is the difference or connection before them? In simple terms, the American National Standards Association ANSI developed a standard that sets the set of characters and the number of each character, which is the ASCII character set (Character set), also called ASCII code, when the computer slowly develops, People found that the previous 128 characters can not meet the demand, and then on the basis of expansion, GB2312, BIG5, etc. are extended after the encoding, and later, in order to achieve in a document can correctly display all types of characters, so the Unicode character set was born, And UTF-8 is one of the implementations of Unicode, similar to UTF-16 and UTF-32.

Looking back at the code, we'll look at the decoding, after the browser receives the content of the page, first need to convert the content into readable text, we also mentioned that different countries or languages will use different coding methods, how to determine the encoding method, there are the following (priority to match the previous rules, if not, to match in sequence):

The content-type:text/html in the HTTP header returned by the WEB server; charset= "" Code
The charset part of the Web page itself Meta header
The browser menu generally allows the user to force the specified encoding
Some browsers (such as Firefox) can choose the automatic coding function, and use statistical methods to judge the undetermined code.

Segmentation

After the encoding is determined, the contents of the Web page are converted to Unicode characters, and the process of segmentation is to divide the text into small segments composed of different languages.

Select font

Now let's talk about fonts, and the categories of fonts are roughly the following:

1. Dot Matrix font (Bitmap Fonts)
2. Outline fonts (Outline font)
2-1. PostScript fonts
2-2. TrueType fonts
2-3. OpenType Font
3. Stroke font (stroke-based font)
4.METAFONT

How to understand the difference between lattice font and outline font, in fact, their performance and picture format Png8 and png24 The difference is very similar, lattice fonts are solid color, no transition color, edge sharp, and contour font has transition color, the edge is also relatively smooth. Many people put "song" (SimSun) as a dot matrix font, in fact, it and "Microsoft Ya-Black" (Microsoft Yahei), like the outline font, only a few 12px~17px of the song body built in the lattice information.

If you divide it by the glyph, the font can be divided into:

Lining Line (serif)
Non-liner (Sans-serif)
Equal-width font (monospace)
Writing body (cursive)
Dream Body (Fantasy)
Note: "Serif" means "foot", "adornment", and "sans" comes from French, which means "none".

The common lining has the following, and the end of the glyph has "feet":

The most common non liner lines are:

And what fonts are involved in the system? When we want to use a font, but do not confirm that the font is the system already, how to confirm it?

First, the system contains fonts that are not only related to the system pre-installed fonts, but also to the system to install the software related to the Microsoft operating system, the detailed system and some software contains fonts can view this index: Microsoft Typography,mac System can view this index: List of Typefaces included with OS X

Let us go back to the Web page, CSS if the font-family does not set the Chinese font, we know is based on the browser default font to display, find the browser corresponding settings, you can also manually modify these.

P{font:12px/24px Tahoma;}

P{FONT:12PX/24PX Arial;

The above two kinds of writing are in the same system and the browser match is a unique font, then the display will be different? Look at the test results for some of the browsers below the Windows system:

Looking closely, you will find that the bottom of the text is not on the same horizontal ie6,ie8,chrome,firefox. Therefore, the English font will not affect the Chinese style, but it will affect its position. But... Why does it affect the location? Let's take a look at how the text in the page is being controlled:

The default rule is to split the value of row height (line-height) minus the height of the content area, both above and below the content area, but different browsers are rendered differently and combined with the test results above, even if the location of the content area is the same, The text may also be in a different position in the content area.
There are several factors that affect the position of the text in the content area, which means it is not uniform.

Font type
Typesetting engine
Browser
Typesetting engine
In general, MAC OS x users use the Coretext rendering engine, Windows7 and Windows Vista users use Directwrite or GDI, while Windows XP uses GDI.
Compare the pictures to see the difference between them, the image above is Facitweb font, the following image is Minion Pro font.

Core Text Rendering Engine

Directwrite Rendering Engine

GDI rendering engine, opening ClearType

GDI rendering engine, standard anti-aliasing (Standard antialiasing)

GDI rendering Engine, no anti-aliasing (no antialiasing)

Note: iOS and Mac are the same as the rendering engine, but using grayscale rendering, by default Subpixel anti-aliasing is turned off, but you can notify the settings to open.

So different systems because of the different rendering engine, resulting in the text in the details are also different, here by the way Microsoft and Apple two companies for font performance of different styles, Apple is more focused on the original design of the restoration style, so that the style more elegant, smooth. Microsoft, however, prefers the clarity and readability of the fonts.

Browser

Confirming the typesetting engine, we'll look at the browser and the browser will have a layout engine to decide how to use the HTML structure, CSS style sheet to render the page. The layout engine and the appearance of the site are closely related, but for glyph rendering, most of it is controlled by the operating system's text rendering engine, which explains why the same browsers have different glyphs in different operating systems, as shown in the following figure:

The rendering mode used by the browsers under Windows.

of raster

When the encoding, font type, typesetting engine, and browser are identified, raster is the process of converting text from a vector representation (such as a TrueType font) to a raster or bitmap representation. In this process, some antialiasing techniques are often involved to make the fonts on the screen more smooth and readable, which often involves "font hinting" technology.

Summarize

Now go back to the study of the original intention of font rendering, detail control for different browsers pixel-level unification sometimes the requirements are very extreme, the purpose of the study is to make a set of methods to achieve their unity. But now we know that this is related to font type, System typesetting engine, browser, and there are many types of typesetting engine, there is no linux,android system, the browser is not to mention, if you add the mobile side, it is more complicated. So the perfect solution is almost no, even if you write a lot of hack.

If you look at the problem again, do we really need to make different browsers in the performance of the font rendering perfect consistent, in fact, the ordinary user is not a specialized tester, will not open all browser contrast differences, so subtle differences for ordinary users is almost imperceptible, yes, I said here is "subtle", But if the difference is outrageous, the reasons for the difference will not be an excuse.