码迷,mamicode.com
首页 > Web开发 > 详细

字体渲染技术(字体抗锯齿技术) -webkit-font-smoothing: antialiased;

时间:2017-10-09 01:58:36      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:设置   平滑   and   font   mac os   浏览器   win   灰度   art   

1、-webkit-font-smoothing控制的字体渲染只对MacOS的webkit有效。所以,你在MacOS测试环境下面设置-webkit-font-smoothing时,只要你不把它设置为none,怎么好看就设置为什么属性,反正这个属性仅仅是面向MacOS,不会在其他上下文中出岔子的(除了none的情形)。

2、前端控制字体渲染的接口非常匮乏,如果可能,尽可能的控制输出的字体,而非控制字体渲染。

3、以下测试则会表明,-webkit-font-smoothing在MacOS上才有效果。

① Windows

测试环境:Win7 Pro + Chrome:

技术分享

结论:Windows系统上-webkit-font-smoothing属性不造成区别。

 

② ios

测试环境:iPad Air  +  ios7  + Safari

技术分享

(ios上没有Hiragino Sans GB,不要被标签误导了!)

结论:ios上,修改-webkit-font-smoothing属性,结果是:

  · -webkit-font-smoothing:none;  无抗锯齿

  · -webkit-font-smoothing:antialiased  |  subpixel-antianliased  | default;  灰度平滑

③ MacOS

测试环境:MBP  + Safari:

技术分享

结论:ios上,修改-webkit-font-smoothing属性,结果是:

  · -webkit-font-smoothing:none;  无抗锯齿

  · -webkit-font-smoothing:subpixel-antialiased  |  default;  次像素平滑

  · -webkit-font-smoothing:antialiased;  灰度平滑

4、字体抗锯齿技术

  字体抗锯齿技术可以分为如下几类:

  · 黑白渲染:现在已经绝迹

  ·灰度渲染:常用语Android和ios等移动设备

  ·次像素平滑:常见于Mac OS 和 MacType For Windows

  ·ClearType:黑白渲染和次像素平滑的折中。WinXP内置,默认关闭;win7以上默认打开

技术分享

  理想形状:黑白渲染;灰度渲染。

技术分享

  次像素平滑技术原理,从右往左看,注意到一个pixel里的渐变。

 

5、从不同平台浏览器字体渲染对比附的图可见端倪:

技术分享

 

6、以下表格是我综合多方资料的结果,欢迎纠错:

技术分享

来源:https://segmentfault.com/q/1010000000467910/a-1020000000468107

 

字体渲染技术(字体抗锯齿技术) -webkit-font-smoothing: antialiased;

标签:设置   平滑   and   font   mac os   浏览器   win   灰度   art   

原文地址:http://www.cnblogs.com/carriezhao/p/7639362.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!