Text-rendering detailed

The original link:


The Text-rendering property is a non - standard properties, mainly used to tell the rendering engine (rendering engine) when rendering text to optimize, the browser to a trade-off between speed, according to the attribute of readability, geometric accuracy etc.

Only Gecko (Firefox) and WebKit (Safari or Chrome) support this property.

Note:

Gecko is a set of open source code, the webpage layout engine written in C++. At present, as the family of Mozilla webpage browser and Netscape 6 version of the browser is used.

WebKit is an open source browser engine, Gecko and the corresponding engine (Mozilla Firefox service) and Trident (MSHTML, IE). The name WebKit is also at the same time the apple Mac OS X system engine framework version, mainly for Safari, Dashboard, Mail and some other Mac OS X program.

Now the browser kernel engine, basically is four world:

Trident: IE with Trident as the core engine;

Gecko: Firefox is based on Gecko development;

WebKit: Safari, Google Chrome,Maxthon 3 development based on Webkit.

Presto: Opera kernel, but due to the problem of market selection, mainly used in mobile phone platform–Opera mini

The Text-rendering property has the following values:

Value

Description

auto

The browser for speed, accessibility, automatic optimization precision, to draw the text 


In practice, the Gecko desktop browser (Firefox) if the font size is 20 PX or more, optimizeLegibility will be used; otherwise the smaller text using optimizeSpeed

optimizeSpeed

When drawing text speed priority, will disable the kerning and ligatures

optimizeLegibility

When drawing text legibility priority, will enable kerning and ligatures

geometricPrecision

When drawing text geometric accuracy of priority, temporary and the same optimizeLegibility

The obvious effect is optimizeLegibility  in the text is small (less than 20px) when, in some special font settings (such as Microsoft’ s Calibri, Candara and so on) the ligatures enabled (such as FF,fi,fl)

Here are some examples.:

Page code

 

XHTML


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text-rendering</title>
    <style>
        body {
            text-rendering:auto;
        }
        p {
            margin:20px0;
            font-size:30px;
        }
        p.auto {
            text-rendering:auto;
        }
        p.optimizeSpeed {
            text-rendering:optimizeSpeed;
        }
        p.optimizeLegibility {
            text-rendering:optimizeLegibility;
        }
        p.geometricPrecision {
            text-rendering:geometricPrecision;
        }
    </style>
</head>
<body>
<p class="auto">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
<p class="optimizeSpeed">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
<p class="optimizeLegibility">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
<p class="geometricPrecision">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
</body>
</html>

Pay attention to the sequence in the picture below is:

  1. text-rendering: auto;
  2. text-rendering: optimizeSpeed;
  3. text-rendering: optimizeLegibility;
  4. text-rendering: geometricPrecision;

Chrome:

Chrome text-rendering 默认宋体


Firefox:

Firefox text-rendering 默认宋体


Change the font, less than 20px:

Less than 20px







CSS


p {
    font:19px'DejaVu Serif',Constantia;
}

  

Chrome:

Chrome text-rendering 小于20px


Firefox:

Firefox text-rendering 小于20px


Change the font, greater than 20px:

More than 20px







CSS


1

2

3

p {

font:30px'DejaVu Serif',Constantia;

}

Chrome:

Chrome text-rendering 大于20px


Firefox:

Firefox text-rendering 大于20px


You can see the obvious, difference between different text-rendering attributes in Chrome obviously, in Firefox, basically no difference.

Posted by Gilbert at November 16, 2013 - 4:06 PM