CSS 文本渲染屬性text-rendering的介紹和使用示例
2024-07-11 08:28:34
供稿：網友
摘要：
CSS關于文本渲染的屬性text-rendering告訴渲染引擎工作時如何優化顯示文本。 瀏覽器會在渲染速度、易讀性（清晰度）和幾何精度方面做一個權衡。
我們知道，SVG-可縮放矢量圖形（Scalable Vector Graphics）是由W3C制定的， 基于可擴展標記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG嚴格遵從 XML語法，并用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率 無關的矢量圖形格式。IE 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 SVG。IE 8或更早版本，可通過安裝Adobe SVG Viewer以支持SVG。
而屬性text-rendering正是一個SVG屬性，目前尚沒有任何的CSS標準對其進行定 義。
不過Gecko（for Firefox）和WebKit核心的瀏覽器已經允許你在 Windows/Mac/Linux系統的HTML/XML內容中應用該屬性。
對于某些小于20px的字體來說，當你把該屬性設為optimizeLegibility時，包含 諸如ff、fl、fi這種連字的文本會產生一個非常明顯的效果，比如Microsoft's Calibri, Candara, Constantia, Corbel和DejaVu類字體。如果你對連字不太理 解，可以參考維基百科的解釋 http://en.wikipedia.org/wiki/Typographic_ligature
默認值：auto
適用于：文本元素
繼承性：yes
媒介類型(Media Types)：可視型（公認的媒介類型包括哪些？參見W3C文檔 http://www.w3.org/TR/CSS2/media.html）
語法：
格式：text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
值：
auto:
當繪制文本時，瀏覽器會進行智能識別，何時應該從速度、清晰度和幾何精度方 面進行優化。關于各瀏覽器對該屬性解釋的差別，參見下面的兼容性表格。
optimizeSpeed：
當繪制文本時，瀏覽器會著重渲染速度，而不是清晰度和幾何精度。該屬性值不 能用于字距調整和連字。Gecko默認開啟該屬性，Firefox 是默認20px以下開啟該屬性。
optimizeLegibility：
當繪制文本時，瀏覽器會側重文本的可讀性（清晰度），而不是渲染速度和幾何 精度。該屬性值可以用于字距調整和連字。
使用CSS 3的@font-face來渲染文字的情況越來越多，易讀性開始被關注和重視。尤其是小號的文字。由于目前還沒有CSS屬性控制顯示在線字體的微妙細節，Safari 5,Chrome和Webkit系列瀏覽器支持text-rendering啟用kerning 和 ligatures。
Gecko 和WebKit 瀏覽器處理這個屬性的方式很不一樣。前者默認啟用這個特性， 而后者，你需要將其設置為optimizeLegibility。Firefox默認20px以上字體文本會開啟該屬性。
geometricPrecision：
當繪制文本時，瀏覽器會著重幾何精度，而不是清晰度和渲染速度。字體的某些 方面，比如字間距并不是按照線性比例進行渲染的，因此該屬性可以使得設置為 這些字體的文本看起來很整潔。
