字体与行高
字体族和行高
字体相关的样式
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 保留空白
