bootstrap模态窗字体模糊
大家可以看下,上面这幅图里面的文字是不是不太清楚呢,如果是真机的话,大家应该能更加清晰的看出来,确实有点模糊。如果看不出来,咱们对比另一张图
下面的这副图看起来就清楚很多了。究其原因,是因为这个弹窗上面,我们用到了一个transform属性,而且我们是设置的百分数, 里面的文字解析可能造成不是正好的PX整数,造成了文字显示不清楚。最简单的办法就是给显示不清楚的,transform改成px单位,但是这样的话,显然是不行的。所以就有了以下的办法
1 #addRoleInfoModal.modal.in .modal-dialog { 2 -webkit-transform: translate(0, calc(-50% + 0.5px)); 3 -ms-transform: translate(0, calc(-50% + 0.5px)); 4 transform: translate(0, calc(-50% + 0.5px)); 5 }
通过计算属性,给百分数添加一个0.5px,凑成整数。
然后我查了以下具体的原因:
当元素进入GPU中渲染时,在Chrome35+中的字体为grayscale渲染,IE11和FF30保持sub-pixel渲染不变。若transform值函数(如translate3d(), scale(), rotate()等)中的参数为非整数,会导致字体模糊。
所以这里记录以下,给自己提个醒,如果里面的文字内容比较多,需要设置一下