字体、文字相关的一些基础

行高（line-height）
	行高指的是文字占有的实际高度
	可以通过line-height来设置行高
		行高可以直接指定一个大小（px em）
		也可以直接为行高设置一个数字，此时行高将会是字体大小的指定的倍数
	行高经常用来设置文字的行间距
		行间距 = 行高 - 字体大小

字体框
	字体框就是文字存在的格子，设置font-size实际上就是设置字体框的高度

行高会在字体框的上下平均分配

大部分浏览器的默认line-height是1.33

可以将行高设置为跟高度一样的值，使单行文字在一个元素中垂直居中


font-family设置字体族

使用@font-face引入字体：

@font-face{
	font-family:'myfont',//给字体定义一个名字
	url('a.ttf');
}

div{
	font-family:myfont;
}


使用iconfont 图标字体也是类似用法
引入后一般有三种使用方式：

1.直接class
<i class="icon icon-bell"></i>
2.实体
<i class="icon">؞</i>
3.伪元素
<i class="icon bell"></i>
.bell{
	content:"\e061e";
	font-family:"icon";
	font-size:16px;
}

font-weight 字重 字体的加粗
	可选值：
	normal 默认值 不加粗
	bold 加粗
	100-900九个级别（没什么用 每个级别相当于一种字体）

font-style 字体的风格
	normal 正常的
	italic 斜体

font属性可以设置字体相关的所有属性
语法 ：
	font：字重 字体风格 字体大小/行高 字体族
	字体大小和字体组必须写
	行高，字重，字体风格 可以省略不写 如果不写则使用默认值

	font:bold italic 50px/2 'Times New Roman',Times,serif;

文本的水平和垂直对齐
	text-align 文本的水平对齐
	可选值：
		left 左侧对齐
		right 右侧对齐
		center 居中对齐
		justify 两端对齐
	
	vertical-align 设置元素垂直对齐的方式
	可选值：
		baseline 默认值 基线对齐
		top 顶部对齐
		bottom 底部对齐
		middle 居中对齐（按照字母 X 的中点所处的位置 居中对齐，效果跟实际的居中有出入）
		直接使用具体数值，比如 100px
		
	关于img元素，因为它是替换元素，可以将其当作文字看待，所以默认也是基线对齐，跟包含块的底部会有一定的距离，可以使用vertical-align处理这个问题。
	
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, voluptates. Iste dolorum nam provident eveniet! Dignissimos totam, nesciunt quasi eum atque rem autem, at ab quam veniam quos culpa non!
</p>

<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. <span>Error earum</span> cupiditate porro eveniet impedit maxime facilis quo, non sunt eos possimus veritatis itaque vero assumenda quia, adipisci dolore, animi laudantium.
</p>

<div>
  <img src="http://img0.imgtn.bdimg.com/it/u=4051757666,1260671066&fm=26&gp=0.jpg" alt="">
</div>

p {
  width: 300px;
  border: 1px solid red;
  text-align: center;
  font-size: 20px;
}

span {
  font-size: 14px;
  vertical-align: center;
}

div {
  border: 1px solid red;
}

img {
  vertical-align: bottom;
}

text-decoration 设置文本修饰
	可选值：
	none 什么都没有
	underline 下划线
	line-through 删除线
	overline 上划线

	chrome 火狐下还支持以下方式：
	text-decoration:underline red dotted;

	white-space 设置网页如何处理空白
	可选值：
	normal 正常
	nowrap 不换行
	pre 保留空白（设置此属性后 浏览器不对文本内容中的空格做处理）

	为超出宽度的文字设置三点省略号效果：

	.box1{
		width:200px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}