css- font

253 阅读1分钟

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;
}