字体与行高

字体族和行高

字体相关的样式

color用来设置字体颜色
font-size字体的大小
和font -size相关的单位

• em 相当于当前元素的一个font-size

• rem 相对于根元素的一个font-size

• font- family字体族(字体的格式)

可选值:

• serif 衬线字体
• sans-serif 非衬线字体
• monospace 等宽字体
  指定字体的类别，浏览器会自动使用该类别下的字体

font-face可以将服务器中的字体直接提供给用户去使用

1.加载速度

2.版权问题

3.字体格式

@font-face{

font-family: "myfont";/*指定字体名字*/

src:url(""./font/ZCOOLKuaile-Regular.ttf") format("ttf");/*服务器中的字体路径*/

}

图标字体( iconfont)

在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片大小本身比较大， 并且非常的不灵活
所以在使用图标时，我们还可以将图标直接设置为字体，
然后通过 font - face的形式来对字体进行引入
这样我们就可以通过使用字体的形式来使用图标

---

行高(line height)

行高指的是文字占有的实际高度
可以通过line-height来设置行高
行高可以直接指定一个大小(px em)
也可以直接为行高设置一个整数
如果是一个整数的话，行高将会是字体的指定的倍数

字体框

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
行高会在字体框的，上下平均分配

font可以设置字体相关的所有属性
语法:
font:字体大小/行高字体族
行高可以省略不写如果不写使用默认值

text-align文本的水平对齐
可选值:

• left左侧对齐
• right右对齐
• center居中对齐
• justify两端对齐

vertical-align设置元素垂直对齐的方式
可选值:

• baseline默认值基线对齐
• top顶部对齐
• bottom底部对齐
• middle居中对齐

也可以指定任意值。

图片属于替换属性，也存在基线。设置任意对齐方式都可以消除下边空余。

text-decoration设置文本修饰
可选值:

• none 什么都没有
• underline 下划线
• line- through 删除线
• overline 上划线

white-space设置网页如何处理空白
可选值:

• normal 正常
• nowrap 不换行
• pre 保留空白