这里有一个字体渲染实测结果截图展示。造成渲染区别的主要是以下几点(wiki: Font rasterization):字体抗锯齿:Win7以上自动打开的ClearType(msdn)、常见于Mac OS和MacType的次像素平滑(原理)、常用于Android和iOS等移动设备的灰度渲染Hinting技术 /wiki对字重font-weight的支持程度不一(ref)相对应的控制有:字体抗锯齿技术:仅仅只有webkit核支持使用一个CSS属性来控制字体平滑技术:-webkit-font-smoothing: antialiased;,可以将chrome浏览器的字体渲染调为灰度渲染。在The New Yorker、Path等网站中,均使用了这个方案,它可以使webkit内核的浏览器字重表现一致。(使用了次像素平滑之后,字重普遍比灰度渲染之后的字体重,效果详见携程的这个DEMO)。Hinting技术:在打包的Webfont字体中加入Hinting,有助于Windows的小字体显示效果字重兼容性:出于兼容性的考量,不要使用font-weight的数值形式,也不要在@font-face里指定相应的font-weight数值,可以通过@font-face里定义的字体名来区分字重,如Gabriela-Light和Gabriela-Regular此外:小字重字体(W1,W2)的小字号、大字重字体(W6以上)的小字号在win xp下的显示很难正常和好看,可以避免使用在webkit核的字体显示有问题时,可以使用如-webkit-text-stroke的hack解决问题,详参How to fix the ugly font rendering in Google Chrome接口不健全,各个终端表现不一,这基本就是现状了。Mockee的关于字体渲染的ppt里说到:“接受现实,假设最坏的情况,等待未来新标准、新实现。”web网页的问题差不多就是这样,如果你还有其他疑问,ITjob官网有web前端的文章,你可以自行浏览。或者去专业的论坛贴吧问问大神,看有没有更好的方法。这里有一个字体渲染实测结果截图展示。造成渲染区别的主要是以下几点(wiki: font rasterization):字体抗锯齿:win7以上自动打开的cleartype(msdn)、常见于mac os和mactype的次像素平滑(原理)、常用于android和ios等移动设备的灰度渲染hinting技术 /wiki对字重font-weight的支持程度不一(ref)相对应的控制有:字体抗锯齿技术:仅仅只有webkit核支持使用一个css属性来控制字体平滑技术:-webkit-font-smoothing: antialiased;,可以将chrome浏览器的字体渲染调为灰度渲染。在the new yorker、path等网站中,均使用了这个方案,它可以使webkit内核的浏览器字重表现一致。(使用了次像素平滑之后,字重普遍比灰度渲染之后的字体重,效果详见携程的这个demo)。hinting技术:在打包的webfont字体中加入hinting,有助于windows的小字体显示效果字重兼容性:出于兼容性的考量,不要使用font-weight的数值形式,也不要在@font-face里指定相应的font-weight数值,可以通过@font-face里定义的字体名来区分字重,如gabriela-light和gabriela-regular此外:小字重字体(w1,w2)的小字号、大字重字体(w6以上)的小字号在win xp下的显示很难正常和好看,可以避免使用在webkit核的字体显示有问题时,可以使用如-webkit-text-stroke的hack解决问题,详参how to fix the ugly font rendering in google chrome接口不健全,各个终端表现不一,这基本就是现状了。mockee的关于字体渲染的ppt里说到:“接受现实,假设最坏的情况,等待未来新标准、新实现。”
网站标题:chrome字如何渲染颜色,Chrome浏览器怎么显示白底白字
当前链接:http://csdahua.cn/article/idjodc.html