CSS 文字3D渲染特性text

日期:2021-03-09 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

引言:

CSS有关文字3D渲染的特性text-rendering告知3D渲染模块工作中时怎样提升显示信息文字。 访问器会在3D渲染速率、易读性(清楚度)和几何图形精度层面做1个衡量。

大家了解,SVG-可放缩矢量图型(Scalable Vector Graphics)是由W3C制订的, 根据可拓展标识語言(XML),用于叙述2维矢量图型的1种图型文件格式。SVG严苛遵循 XML英语的语法,并用文字文件格式的叙述性語言来叙述图象內容,因而是1种和图象辨别率 不相干的矢量图型文件格式。IE 9、Firefox、Opera、Chrome 和 Safari 适用内联 SVG。IE 8或更早版本号,可根据安裝Adobe SVG Viewer以适用SVG。

而特性text-rendering更是1个SVG特性,现阶段尚沒有任何的CSS规范对其开展定 义。

但是Gecko(for Firefox)和WebKit关键的访问器早已容许你在 Windows/Mac/Linux系统软件的HTML/XML內容中运用该特性。

针对一些小于20px的字体样式来讲,当你把该特性设为optimizeLegibility时,包括 诸如ff、fl、fi这类连字的文字会造成1个十分显著的实际效果,例如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:
当绘图文字时,访问器会侧重3D渲染速率,而并不是清楚度和几何图形精度。该特性值不 能用于字距调剂和连字。Gecko默认设置打开该特性,Firefox 是默认设置20px下列打开该特性。

optimizeLegibility:
当绘图文字时,访问器会偏重于文字的可读性(清楚度),而并不是3D渲染速率和几何图形 精度。该特性值能够用于字距调剂和连字。
应用CSS 3的@font-face来3D渲染文本的状况愈来愈多,易读性刚开始被关心和高度重视。特别是小号的文本。因为现阶段都还没CSS特性操纵显示信息线上字体样式的彼此之间细节,Safari 5,Chrome和Webkit系列访问器适用text-rendering开启kerning 和 ligatures。
Gecko 和WebKit 访问器解决这个特性的方法很不1样。前者默认设置开启这个特点, 然后者,你必须将其设定为optimizeLegibility。Firefox默认设置20px以上字体样式文字会打开该特性。
geometricPrecision:
当绘图文字时,访问器会侧重几何图形精度,而并不是清楚度和3D渲染速率。字体样式的一些 层面,例如字间隔其实不是依照线形占比开展3D渲染的,因而该特性可使得设定为 这些字体样式的文字看起来很干净整洁。

在SVG中,当文字被变大或变小,访问器财务会计算文字的最后规格(即特定字体样式尺寸 和运用占比),随后依照测算出来的规格,从系统软件的字体样式库中恳求1种适合的字 体。可是,假如你规定的字体样式尺寸,例如9px字号的140%的占比,造成的字号12.6 在字体样式库中其实不存在,因此此时访问器会将字号舍为12px。这致使了文字的阶梯 放缩。

但是,当3D渲染模块彻底适用几何图形精度特性时,你能够运用几何图形精度特性顺畅地缩 放文字。针对较为大的放缩因素,你将会看不见非常完善的3D渲染实际效果,但显示信息字 号可能是你所希望的尺寸,既不容易向上也不向下4舍5入Windows/Linux适用的字 号尺寸。

假如界定为geometricPrecision,Webkit精准运用界定的特性值,Gecko则将 geometricPrecision解释为optimizeLegibility,其主要表现与设定为 optimizeLegibility的主要表现是1样的.

案例

/* 对body运用optimizeLegibility确保全部html文本文档的易读性,但将会出現文本连写的实际效果,对元素运用class='foo'能够防止出現文本连写状况 */

拷贝编码
编码以下:

body { text-rendering: optimizeLegibility; }
.foo { text-rendering: optimizeSpeed; }

 

Gecko关键访问器留意事项:

特性值设为auto时有个20px的3D渲染阀值,这个阀值能够根据变更偏好设定browser.display.auto_quality_min_font_size这1项。(针对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)上失效。由于文字3D渲染的规范编码早已充足快,沒有比它更快的编码相对路径。这是1个bug。参照bug 595688 .https://bugzilla.mozilla.org/show_bug.cgi?id=595688

访问器适配表:

 

存在的难题:

混和应用optimizeLegibility和font-variant: small-caps会致使small-caps3D渲染不成功。最不尽人意的状况是文字无法显示在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)
上一篇:table报表的1些常见特性详细介绍 返回下一篇:没有了