Introduction and usage examples of CSS text rendering properties text-rendering

CSS about text rendering properties text-rendering tells the rendering engine how to optimize the display text, attribute text-rendering is an SVG attribute, there is no CSS standard to define it, this article is accompanied by examples, interested friends can refer to the

Summary:





css about text rendering properties text-rendering tells the rendering engine how to optimize display text when working. Browsers make a trade-off between rendering speed, readability (sharpness), and geometric accuracy.





we know that svg-Scalable Vector graphics (Scalable vector Graphics) are developed by the consortium, based on Extensible Markup Language (XML), which describes a graphical format for two-dimensional vector graphics. SVG strictly conforms to XML syntax and uses descriptive language in text format to describe image content, so it is a vector graphic format independent of image resolution. IE 9, Firefox, Opera, Chrome, and Safari support inline SVG. IE 8 or earlier, the Adobe SVG Viewer can be installed to support SVG.





while attribute text-rendering is an SVG attribute, there is no CSS standard to define it.





however gecko (for Firefox) and WebKit core browsers have allowed you to apply this property to Html/xml content in the Windows/mac/linux system.





for some fonts less than 20px, when you set this property to Optimizelegibility, the text containing such ligatures as FF, FL, FI can have a very noticeable effect, such as Microsoft's Calibri, Candara, Constantia, Corbel and Dejavu class fonts. If you don't understand the hyphenation, you can refer to the Wikipedia explanation http://en.wikipedia.org/wiki/Typographic_ligature





Default value: Auto


applies To: text elements


Inheritance: Yes


Media Type (Media Types): visual (What are the recognized media types?) See also the document Http://www.w3.org/TR/CSS2/media.html)





Syntax:





Format: Text-rendering:auto | Optimizespeed | optimizelegibility | geometricprecision | Inherit





value:





Auto:


when drawing text, the browser intelligently recognizes when it should be optimized for speed, sharpness, and geometric accuracy. See the compatibility table below for differences in the interpretation of this property by each browser.





optimizespeed:


when drawing text, browsers focus on rendering speed, not sharpness and geometric precision. This property value cannot be used for kerning and hyphenation. Gecko This property by default, Firefox is the default 20px to open the property below.





optimizelegibility:


when drawing text, the browser focuses on the readability (clarity) of the text, not the rendering speed and geometric accuracy. This property value can be used for kerning and hyphenation.


use CSS 3 @font-face to render text more and more, legibility began to be attention and attention. Especially the small text. Since there is no CSS property control to display the subtle details of online fonts, Safari 5,chrome and WebKit series browsers support text-rendering enable kerning and ligatures.


Gecko and WebKit browsers handle this property in a very different way. This feature is enabled by default, and you need to set it to optimizelegibility. Firefox default font text above 20px will open this property.


geometricprecision:


when drawing text, the browser emphasizes geometric precision, not sharpness and rendering speed. Some aspects of the font, such as the spacing of characters, are not rendered in a linear scale, so this property makes the text that is set to these fonts look neat.





in SVG, when text is zoomed in or out, the browser calculates the final size of the text (that is, specifies the font size and scale applied), and then requests an appropriate font from the system's font library according to the calculated size. However, if you ask for a font size, such as a 140% ratio of 9px font size, the resulting font size 12.6 does not exist in the font library, so at this time the browser will be the font size of 12px. This leads to the step scaling of the text.





However, when the rendering engine fully supports geometric precision properties, you can use geometric precision properties to smoothly scale text. For larger scaling factors, you may not see a particularly perfect rendering, but the display size will be the size you expect, neither up nor down windows/linux the supported font size.





if defined as the Geometricprecision,webkit precise application of the defined attribute value, Gecko interprets geometricprecision as optimizelegibility, which behaves as if it is set to Optimizelegibility's performance is the same.





Instance





/* To the Body application optimizelegibility guarantee the readability of the entire HTML document, but may appear the text ligatures effect, to element application class= ' foo ' can avoid text ligatures phenomenon * *

copy Code The code is as follows:


body {text-rendering:optimizelegibility;}


. foo {text-rendering:optimizespeed;}

Introduction and use of the

 

Gecko Core Browser considerations:

Property value is set to auto with a 20px rendering threshold that can be changed by changing preferences Browser.display.auto_quality_min_font_size this one. (For Firefox, first in the browser type About:config Enter, more changes to the configuration options for the method see here Http://kb.mozillazine.org/Editing_configuration), If you want to learn more about Mozilla Preference-browser.display.auto_quality_min_font_size You can view the official documentation http://kb.mozillazine.org/ Browser.display.auto_quality_min_font_size. The

optimizespeed option is not available on Gecko2.0 (Firefox 4/thunderbird 3.3/seamonkey 2.1). Because the standard code for text rendering is fast enough, there is no faster code path than it is. This is a bug. See Bug 595688. https://bugzilla.mozilla.org/show_bug.cgi?id=595688

Browser compatible table:

 

Existing problems:

Mixing optimizelegibility and font-variant:small-caps can cause small-caps rendering to fail. The worst case scenario is that the text does not appear in theOn a Web page, a lower-configured mobile device may cause the page to not load properly. (Problem bug original http://code.google.com/p/chromium/issues/detail?id=51973)
for Safari 5, use ex as margin, padding, Border-width, outline-width unit of measure, using optimizelegibility can cause the browser to crash. However, I test Safari 5.1.7 (7534.57.2) Chinese version seems to have fixed the problem of collapse. (test page address http://quorning.net/safari_crash.htm)