网页字体缩放样式-webkit-text-size-adjust的用法详解
1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的
css3属性-webkit-font-smoothing
CSS3里面加入了一个“-webkit-font-smoothing”属性。
这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
加上之后就顿时感觉页面小清晰了。 淘宝也在用哦!
它有三个属性:
none ------ 对低像素的文本比较好
subpixel-antialiased ------默认值
antialiased ------抗锯齿很好
body{
-webkit-font-smoothing: antialiased;
}
-moz-osx-font-smoothing: inherit | grayscale
这个属性也是更清晰的作用,特别是图标文字流行的今天。
CSS3 overflow-style 属性
设置溢出元素的首选滚动方法:
div
{
overflow:auto;
overflow-style:marquee,panner;
}
CSS3 appearance 属性
使 div 元素看上去像一个按钮:
div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari 和 Chrome */ }
cursor:not-allowed 的使用
鼠标样式 not-allowed,是一个红色的圈加一个斜杠,表示禁止的意思,似乎IE,chrome firefox 都能够正常显示,很好用
CSS里的pointer-events属性
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout
属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events
的风格更像JavaScript,它能够:
- 阻止用户的点击动作产生任何效果
- 阻止缺省鼠标指针的显示
- 阻止CSS里的
hover
和active
状态的变化触发事件 - 阻止JavaScript点击动作触发的事件