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

來源:互聯網
上載者:User

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

 

摘要:

CSS關於文本渲染的屬性text-rendering告訴渲染引擎工作時如何最佳化顯示文本。 瀏覽器會在渲染速度、易讀性(清晰度)和幾何精度方面做一個權衡。

我 們知道,SVG-可縮放向量圖形(Scalable Vector Graphics)是由W3C制定的, 基於可延伸標記語言 (XML)(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)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.