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