bug

使Chrome字体渲染更平滑

更新 2014/9/5:没想到今天无意中看到google更新到了chrome37,chrome字体渲染问题居然已经被解决了!坑啊!早知道不码那么多字了... Chrome在文字渲染上始终存在一些不大不小的问题,如早期我在Chrome中的text-shadow 一文中提到的字体阴影抗锯齿bug,虽然影响不大,却总是不如人意。 最近让我觉得不爽的依旧是Chrome(似乎只涉及windows版本)的字体渲染的问题,Chrome在小字体显示的时候无法准确使字体平滑,从而在字体不大不小的时候,可以清楚地看到文字的锯齿。而当使用字体图标时,这种感觉就变得更为明显。 稍稍尝试就会发现,值48px是一个分界点。即在字体大于48px的时候并不会出现锯齿,这应该与Chrome渲染字体时使用的算法不同有关。而如果字体很小(<20px),也会因为线迹太细而不够明显。当字体48px时,…

Chrome的onload动画bug

一开始的起的标题是《Chrome中CSS3 transition和form导致的意外的onload动画》,不过太长了,所以最后删减了一下。但至少我遇到这个chrome的bug的时候,确实是transition和form同时出现时。 这个bug的具体的表现是:chrome会在页面加载后自动开始一段动画。 我使用的是chrome 36.0.1985.125 m,算是当前的最新版。页面中的全局样式添加了<a>的transition,而且还是非常偷懒的使用了all这样的参数,所以最后整个页面在加载完成后,所有的<a>都开始了过度效果,从尺寸到颜色,结果就导致了的整个页面的抖动。…

Chrome中的text-shadow

text-shadow作为CSS3里被现代浏览器支持最早、也是最广的属性,我们对它已经非常熟悉。现代浏览器除了IE9之外,全部无前缀支持text-shadow。和box-shadow类似,但远没有box-shadow那么复杂。它的作用只是对文本添加阴影: text-shadow: 2px 2px 3px blue; 其用法有大致上有两种,一种是在浅色背景上应用深色阴影凸显出文字的层次。另一种,就是在深色背景上使用浅色阴影创造出类似浮雕的内嵌的效果。最后用的比较少的,就是单纯的雾化文本,也就是X和Y的偏移设为0——不过这样对文本的可读性没什么好处,也没什么技术含量,所以完全不值得提倡。淘宝曾在首页的热卖单品区单纯的使用text-shadow雾化文本,但现在已经移除了这种蛋疼的效果。 我并不打算花时间展开text-shadow,因为这个属性相当简单,所以text-shadow本身并不是本文的重点。这里要写的是:text-shadow在Chrome下的bug以及关于这个bug的一些有趣的事。…