css学习笔记（字体、文本相关）

color：#bfa

设置字体颜色

font-size

字体大小：
1. em：相当于当前元素的一个font-size
2. rem：现对于根元素的一个font-size

font-family

字体格式：
1. serif 衬线字体 (带修饰的字体)
2. sans-serif 非衬线字体
3. monospace 等宽字体
–font-family可以同时制定多个字体，多个字体间用逗号隔开，从第一个到最后优先使用。

font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}

此处的字体仅为推荐用户使用，没有从服务器中提供，不存在版权问题

@font-face

可以让用户使用服务器中的字体

@font-face {
	font-family:'myfont'; //指定字体的名字
	src:url('./font/abc.ttf'); //指定字体文件的路径
}

慎用，字体存在版权问题

icon-font图标字体的使用

1. 下载字体文件并引入文件

<link rel='stylesheet' href='./iconfont/iconfont.css'>

2. 在标签内容中使用

i .iconfont {
	font-size:100px;
}
<i class='iconfont'>&#xe61c;</i>

3. 在class中使用

<i class='iconfont icon-qitalaji'></i>

4. 在伪元素中使用

p::before {
	content:'\e625';
	font-family:'iconfont';
	font-size:100px;
}
<p>Hello</p>

font 字体的简写

font:normal normal 50px/2 Microsoft YaHei,tahoma

font:[font-weight] [font-style] [font-size][/line-height] font-family(可写多个字体,中间逗号隔开)
如果没有指定font-weight和font-style 则会自动使用normal

text-align: 文本的水平对齐

text-align:center/right/justify(两端对齐)

vartical-align 文本的垂直对齐

vertical-align: 
	baseline 基线对齐
	top 顶部对齐
	bottom 底线对齐
	middle 居中对齐

*图片引入后默认是用基线对齐（图片的下方与容器间会有缝隙）

img {
	vertical-align: top/bottom/middle
}

需要使用vertical-align设置其他对齐方式来去除缝隙

text-decoration 文本修饰

text-decoration:
	none
	underline //下划线
	line-through //删除线
	overline //上划线

white-space 空白区域的设置

white-space:
	normal 正常
	nowrap 不换行
	pre 保留空白

• 设置溢出内容显示为…

p {
	white-space:nowraps;
	overflow:hidden;
	text-overflow:ellipsis;
}