CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。-webkit-font-smoothing设置为none,非常模糊。设置为antialiased,变得非常平滑,效果非常不错。
-webkit-text-stroke-width 这个也是css3新加的属性,给文字描边用的,上面的意思就是说给文字加上0.2像素的描边。
-webkit- 这个是浏览器内核前缀,用于兼容内核为webkit浏览器的,如果不带,有些属性浏览器无法识别。
-moz-osx-font-smoothing: grayscale 这也是为了让文字更加清晰的,是为了兼容Gecko内核的浏览器火狐,火狐认识到字体图标逐渐发展的一个热潮,针对ios系统制定了这么一个渲染规则。
<style type="text/css">body { font-size:12pxfont-family:Arial, Helvetica, sans-serif
filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100)
background-color:#666666
}
.sizscolor {
position:absolute
padding:4px
filter:
Dropshadow(offx=1,offy=0,color=white)
Dropshadow(offx=0,offy=1,color=white)
Dropshadow(offx=0,offy=-1,color=white)
Dropshadow(offx=-1,offy=0,color=white)
text-shadow:0 0 1px #FFF
}
</style>
</head>
<body>
<span>ie用滤镜,火狐用css3</span>
<br />
<div class="sizscolor">中文描边效果</div>
</body>
</html>