CSS

CSS的文字渲染text-rendering

字號+ 編輯: 种花家 修訂: 面向ICU 來源: CSDN 2023-09-07 我要說兩句(0)

CSS文本渲染屬性text-rendering告訴瀏覽器工作時如何渲染文本。瀏覽器會在渲染速度、清晰度和幾何精度方面做調整。

text-rendering的取值和解釋如下:

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的表現是一樣的.

閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • 多個高度相同, 屬性inline-block的div,有的div沒有内容而有的div有内容,有内容的會下沉?

  • 讓整個網頁全局變成黑白色調的css代碼

  • CSS生成内容

  • CSS3外輪廓屬性

我要說說
網上賓友點評