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.交流群: PHP+JS聊天群

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

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

  • CSS生成内容

  • CSS3外輪廓屬性

我要說說
網上賓友點評