CSS 文本渲染屬性text-rendering的介紹和使用示例

2024-07-11 08:50:34

字體：大中小

供稿：網(wǎng)友

摘要：

CSS關(guān)于文本渲染的屬性text-rendering告訴渲染引擎工作時(shí)如何優(yōu)化顯示文本。瀏覽器會(huì)在渲染速度、易讀性（清晰度）和幾何精度方面做一個(gè)權(quán)衡。

我們知道，SVG-可縮放矢量圖形（Scalable Vector Graphics）是由W3C制定的，基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG嚴(yán)格遵從 XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。IE 9、Firefox、Opera、Chrome 以及 Safari 支持內(nèi)聯(lián) SVG。IE 8或更早版本，可通過安裝Adobe SVG Viewer以支持SVG。

而屬性text-rendering正是一個(gè)SVG屬性，目前尚沒有任何的CSS標(biāo)準(zhǔn)對(duì)其進(jìn)行定義。

不過Gecko（for Firefox）和WebKit核心的瀏覽器已經(jīng)允許你在 Windows/Mac/Linux系統(tǒng)的HTML/XML內(nèi)容中應(yīng)用該屬性。

對(duì)于某些小于20px的字體來說，當(dāng)你把該屬性設(shè)為optimizeLegibility時(shí)，包含諸如ff、fl、fi這種連字的文本會(huì)產(chǎn)生一個(gè)非常明顯的效果，比如Microsoft's Calibri, Candara, Constantia, Corbel和DejaVu類字體。如果你對(duì)連字不太理解，可以參考維基百科的解釋 http://en.wikipedia.org/wiki/Typographic_ligature

默認(rèn)值：auto
適用于：文本元素
繼承性：yes
媒介類型(Media Types)：可視型（公認(rèn)的媒介類型包括哪些？參見W3C文檔 http://www.w3.org/TR/CSS2/media.html）

語法：

格式：text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit

值：

auto:
當(dāng)繪制文本時(shí)，瀏覽器會(huì)進(jìn)行智能識(shí)別，何時(shí)應(yīng)該從速度、清晰度和幾何精度方面進(jìn)行優(yōu)化。關(guān)于各瀏覽器對(duì)該屬性解釋的差別，參見下面的兼容性表格。

optimizeSpeed：
當(dāng)繪制文本時(shí)，瀏覽器會(huì)著重渲染速度，而不是清晰度和幾何精度。該屬性值不能用于字距調(diào)整和連字。Gecko默認(rèn)開啟該屬性，F(xiàn)irefox 是默認(rèn)20px以下開啟該屬性。

optimizeLegibility：
當(dāng)繪制文本時(shí)，瀏覽器會(huì)側(cè)重文本的可讀性（清晰度），而不是渲染速度和幾何精度。該屬性值可以用于字距調(diào)整和連字。
使用CSS 3的@font-face來渲染文字的情況越來越多，易讀性開始被關(guān)注和重視。尤其是小號(hào)的文字。由于目前還沒有CSS屬性控制顯示在線字體的微妙細(xì)節(jié)，Safari 5,Chrome和Webkit系列瀏覽器支持text-rendering啟用kerning 和 ligatures。
Gecko 和WebKit 瀏覽器處理這個(gè)屬性的方式很不一樣。前者默認(rèn)啟用這個(gè)特性，而后者，你需要將其設(shè)置為optimizeLegibility。Firefox默認(rèn)20px以上字體文本會(huì)開啟該屬性。
geometricPrecision：
當(dāng)繪制文本時(shí)，瀏覽器會(huì)著重幾何精度，而不是清晰度和渲染速度。字體的某些方面，比如字間距并不是按照線性比例進(jìn)行渲染的，因此該屬性可以使得設(shè)置為這些字體的文本看起來很整潔。

在SVG中，當(dāng)文本被放大或縮小，瀏覽器會(huì)計(jì)算文本的最終尺寸（即指定字體大小和應(yīng)用比例），然后按照計(jì)算出來的尺寸，從系統(tǒng)的字體庫(kù)中請(qǐng)求一種合適的字體。但是，如果你要求的字體大小，比如9px字號(hào)的140%的比例，產(chǎn)生的字號(hào)12.6 在字體庫(kù)中并不存在，所以此時(shí)瀏覽器會(huì)將字號(hào)舍為12px。這導(dǎo)致了文本的階梯縮放。

不過，當(dāng)渲染引擎完全支持幾何精度屬性時(shí)，你可以利用幾何精度屬性流暢地縮放文本。對(duì)于比較大的縮放因子，你可能看不到特別完美的渲染效果，但顯示字號(hào)將會(huì)是你所期待的大小，既不會(huì)向上也不向下四舍五入Windows/Linux支持的字號(hào)大小。

如果定義為geometricPrecision，Webkit精確應(yīng)用定義的屬性值，Gecko則將 geometricPrecision解釋為optimizeLegibility，其表現(xiàn)與設(shè)置為 optimizeLegibility的表現(xiàn)是一樣的.

實(shí)例

/* 對(duì)body應(yīng)用optimizeLegibility保證整個(gè)html文檔的易讀性，但可能出現(xiàn)文字連寫的效果，對(duì)元素應(yīng)用class='foo'可以避免出現(xiàn)文字連寫現(xiàn)象 */

復(fù)制代碼

上一篇：CSS Border屬性solid(實(shí)線)使用介紹

下一篇：常見瀏覽器兼容性問題與解決方案css篇