font-size
文字图片对齐效果:
<p>文字<img src="http://demo.cssworld.cn/images/8/delete@2x.png"></p>
p {
font-size: 30px;
}
p > img {
width: 16px; height: 16px;
vertical-align: 25%; 或者 vertical-align: .6ex;
position: relative;
top: 8px;
}单位:
- ex 1ex为字母x的高度
- em 1em为当前元素font-size的大小
- rem (root em) 1rem为根元素(html)font-size的大小
- ch 1ch为数字0的宽度
font-weight
font-weight: 400/normal;
font-weight: 700/bold;
font
font缩写font-size和font-family需要同时存在,如果省略line-height,则会被重置为line-height:normal;
在font缩写中让font-family继承(在font缩写中font-family不能用inherit,先用一个不存在的字体占位):
.font{
font:30px/30px '☺我是笑脸';
font-failmy:inherit;}让网页的字体跟着系统走:
html{
font:menu;
}
body{
font-size:16px;
}