CSS基础-03
字体
文本颜色：color:red;
字体分类：
衬线字体serif
--字体宽度各异，有衬线
--Times、Georgia、宋体
无衬线字体sans-serif
--字体宽度各异，无衬线
--Helvetica、Verdana、Arial、微软雅黑
等宽字体monospace
--字体宽度一样，一般用于代码或表格
--Courier New、Consolas
草书字体cursive
--模仿人手写的字体
--Indie Flower、Comic Sans
装饰字体Fantasy
没有什么统一特征，不属于上述类别的字体
字体族：使用font-family来设置字体族
font-family:sans-serif;
可以同时指定多个字体，多个字体之间使用逗号隔开（若字体之间有空格或者特殊符号，使用引号）
font-family:sans-serif，”Microsoft YaHei”;
@font-face：字体本机有，其他人没有，用户可下载
通过@font-face可以使浏览器自动应用服务器上的字体文件
@font-face{
font-family:’myFont’;
Src:url('./ZCOOLXW-R.ttf’)}
注：有些字体有版权，不建议使用
图标字体：font-awesome.css
1. 使用步骤：将css和fonts文件夹放到项目目录
引入CSS文件<link rel=’stylesheet’ href=’css/font-awesome.min.css’>
<body>
<span class="fa fa-power-off s1"></span>
</body>
<style>
.s1{font-size:120px;
color:red;}
</style>
2. 将文件css和webfonts放在fa文件夹中
<link rel="stylesheet" href="fa/css/all.css">
使用时：<i class="fas fa-stroopwafel" style="font-size: 100px;"></i>
阿里图标字体：http://www.iconfont.cn
选中想要的图标加入购物车，且添加到项目中，下载到本地，放入iconfont中，引入iconfont/iconfont.css
三种方法
1.通过实体<span class=’iconfont’ style=’font-size:100px;color:red;’></span>
2.通过类<span class=’iconfont icon-icon-test’ style =’ font-size:100px;color:red; ’> </span>
3.通过伪类<p></p >
<style>
p::before{
content:’\e63f’
font-family:iconfont;
font-size:100px;}
</style>
字体大小
1em=1font-size：em也是CSS中的一个单位，相当于一个字体大小
1rem=HTML的1font-size,默认16px，相对于根元素
修改：html{font-size:200px;}
行高（line height）
行高指的是文字占有的实际高度。通过line-height来设置行高，行高可以指定一个大小（px,em），也可以直接设置整数（整数代表行高是字体的指定倍数）
为了使得文字垂直居中：行高设置和高度一样 line-height=height;
行高还可以设置文字的行间距：行间距=行高-字体大小
字体框：字体存在的格子，设置font-size实际上就是设置字体框的高度。
行高会在字体框的上下平均分配。
字体的简写属性
font同时设置字体相关的所有样式，后面必须是字体大小和字体族，必须写（空格隔开）
font:40px 'Times New Roman ’，Times
font:[加粗 斜体 变形]大小/行高 字体族
行高 可以省略不写，如果不写使用默认值
字重，字体加粗：font-weight:100-900;九个级别，但基本上没有用
可选值：normal 默认值，不加粗
bold 加粗
字体样式：font-style
可选值：normal 默认值，正常
italic 斜体
字体变形：font-variant
可选值：small-caps（小型大写字母）
文本样式
text-align：设置文本的对齐方式
left 默认值，靠左对齐
right 靠右对齐
center 居中对齐
justify 两端对齐
vertical-align：垂直对齐方式
baseline:基线对齐
top:和父元素顶部对齐
bottom:和父元素的底部对齐 可设置图片对齐，使其不向基线对齐
super：上标
sub：下标
middle:居中
text-decoration：设置文本修饰
underline：下划线
line-through:删除线
overline:上划线
none:没有线
white-space:如何处理空白内容
normal 默认值，自动换行
nowrap 不换行
pre 保留文本的格式
text-overflow: 如何处理溢出的文本
ellipsis 使用省略号来表示溢出的内容