DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS 文本渲染屬性text-rendering的介紹和使用示例
CSS 文本渲染屬性text-rendering的介紹和使用示例
編輯:布局實例     

CSS關於文本渲染的屬性text-rendering告訴渲染引擎工作時如何優化顯示文本,屬性text-rendering正是一個SVG屬性,目前尚沒有任何的CSS標准對其進行定義,本文附有示例,感興趣的朋友可以參考下

 

摘要:

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:
當繪制文本時,浏覽器會著重幾何精度,而不是清晰度和渲染速度。字體的某些 方面,比如字間距並不是按照線性比例進行渲染的,因此該屬性可以使得設置為 這些字體的文本看起來很整潔。

在 SVG中,當文本被放大或縮小,浏覽器會計算文本的最終尺寸(即指定字體大小 和應用比例),然後按照計算出來的尺寸,從系統的字體庫中請求一種合適的字 體。但是,如果你要求的字體大小,比如9px字號的140%的比例,產生的字號12.6 在字體庫中並不存在,所以此時浏覽器會將字號捨為12px。這導致了文本的階梯 縮放。

不過,當渲染引擎完全支持幾何精度屬性時,你可以利用幾何精度屬性流暢地縮 放文本。對於比較大的縮放因子,你可能看不到特別完美的渲染效果,但顯示字 號將會是你所期待的大小,既不會向上也不向下四捨五入Windows/Linux支持的字 號大小。

如果定義為geometricPrecision,Webkit精確應用定義的屬性值,Gecko則將 geometricPrecision解釋為optimizeLegibility,其表現與設置為 optimizeLegibility的表現是一樣的.

實例

/* 對body應用optimizeLegibility保證整個html文檔的易讀性,但可能出現文字連寫的效果,對元素應用class='foo'可以避免出現文字連寫現象 */

復制代碼 代碼如下:
body { text-rendering: optimizeLegibility; }
.foo { text-rendering: optimizeSpeed; }


 

Gecko核心浏覽器注意事項:

屬 性值設為auto時有個20px的渲染阈值,這個阈值可以通過更改偏好設置 browser.display.auto_quality_min_font_size這一項。(對於Firefox,首先在浏覽器鍵入 about:config回車即可進入,更多更改配置選項的方法參見這裡http://kb.mozillazine.org /Editing_configuration),如果你想了解更多有關mozilla preference- browser.display.auto_quality_min_font_size的介紹可以查看官方文檔 http://kb.mozillazine.org/Browser.display.auto_quality_min_font_size。

optimizeSpeed 選項在Gecko2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)上無效。因為文本渲染的標准代碼已經足夠快,沒有比它更快的代碼路徑。這是一個bug。參見bug 595688 .https://bugzilla.mozilla.org/show_bug.cgi?id=595688

浏覽器兼容表:

 

存在的問題:

混 合使用optimizeLegibility和font-variant: small-caps會導致small-caps渲染失敗。最糟糕的情況是文本不顯示在Web頁面上,在低配置的移動設備上可能導致頁面無法正常加載。 (問題bug原文http://code.google.com/p/chromium/issues/detail?id=51973)
對Safari 5,使用ex作為 margin, padding, border-width ,outline-width的度量單位,同時使用optimizeLegibility會導致浏覽器崩潰。不過本人測試Safari 5.1.7(7534.57.2)中文版貌似已經修復了崩潰的問題。(測試頁面地址http://quorning.net /safari_crash.htm)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved