你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
weifengsn

text-rendering详解以及性能优化 2个回复 专栏 @ CSS

weifengsn 发布于 2 年前

这俩的markdown的表格怎么写?jpeg格式的图片上传貌似不支持啊。


简介

text-rendering属性负责向浏览器提供相关信息以方便浏览器进行最优化渲染文字,包括渲染速度、几何精度、清晰度(已读性)等几个方面。

text-rendering是一个SVG属性,并不是一个标准的CSS属性,目前Gecoko、Webkit浏览器支持对html、xml使用这个属性。

具体效果可以随便找个页面,再开发者工具中中尝试一下text-rendering的不同的属性的效果。

取值范围

来看例子吧!

四段文字,分别采用了以上四种渲染方式。没看到区别?注意看ff,fi,fl,ffl直接的间隙以及连字问题。这下应该清楚的了解四种属性的区别了吧。

optimizeLegibility的性能以及其他问题

text-rendering: optimizeLegibility渲染速度非常慢,而且会导致其他意想不到的问题。

  • 安卓里面有使浏览器崩溃的危险,崩溃的例子
  • font-family声明时效,传送门同上,看下面的评论。
  • 点击链接反应迟缓, 例子
  • 其他一堆问题,大部分都是移动端安卓(差评),老版本的安卓出问题率特别高,其他问题传送门,问题很多!
  • 最重要的一个问题,性能问题!有可能导致成千上万个不必要的细小计算,甚至阻塞整个页面的渲染以及重绘。

偷一张图来显示一下性能差异,感觉还挺夸张的!

结论

  • optimizeLegibility性能差。
  • optimizeLegibility在移动端经常出问题。
  • 尽量使用optimizeSpeed提升性能以及降低问题率。
  • 在现有业务中大量使用要细测,因为会改变文字的渲染方式有可能会导致页面布局错误。

纯参照别人的博客以及个人理解,如有错误,请告诉我!

  • hefangshi

    学习了,不过怎么觉得optimizeLegibility以后反而字母连在一起不好看了呢。。

    #1
  • weifengsn

    是的,这个连起来的文字某些字体下才会有提现,有的文字不会出现这种情况。

    另外可以找个文字多得页面在body上改一下text-rendering的属性试试看看,有很明显的变化~

    #2
登录后回复,如无账号,请使用邀请码注册