CSS文字样式
- 一、font-size 字号
- 二、font-weight 加粗
- 三、font-style 倾斜
- 四、line-height 行高
- 五、color 字体颜色
- 六、text-indent 缩进
- 七、text-align 对齐方式
- 八、font-family 字体族
- 九、text-decoration 下划线
- 十、font 复合属性
CSS字体属性定义字体，颜色、大小，加粗，文字等的样式
一、font-size 字号
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能 通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
二、font-weight 加粗
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 700;
三、font-style 倾斜
font-style的作用不是为了设置倾斜字体，相反是为了清除倾斜效果
- normal：正常
- italic：倾斜
font-style: normal;
font-style: italic;
四、line-height 行高
注意：实际开发时需要测量真实行高，从一行文字最顶端到下一行文件最顶端就是行高
- 方法：
- 直接设置像素值px
- 数字（当前字体大小的倍数）
line-height: 30px;
line-height: 3;
五、color 字体颜色
字体颜色的设置方法有四种，最常用的是后面两种
color: red;
color: rgb(255,0,0);
color: rgba(255,0,0,.5);
color: #2c505f;
六、text-indent 缩进
- 方法：
- 直接写像素值px
- em值 (常用)：指的是当前字号大小，1em代表缩进一个字号大小。
text-indent: 20px;
text-indent: 2em;
七、text-align 对齐方式
text-align：可以让文字在水平的方向对齐，对齐的方式有三种。
注意：如果要让文字居中对齐，只能是一行文字，存在换行的情况居中对齐失效。
text-align: left;
text-align: center;
text-align: right;
text-align不仅可以让一行文字居中对齐，还可以让图片居中对齐。但是要注意图片居中必须要在div盒子里，因为居中的本质是让div盒子内容居中。
<style>
div{
width: 500px;
height: 500px;
border: 1px solid saddlebrown;
}
img{
text-align: center;
}
</style>
<div>
<img src="/img/主帅.jpg">
</div>
八、font-family 字体族
- 注意
- 字体可以用中文或英文表示；
- 如果字体名称包含空格则必须加上引号；
- 如果有多个字体则用逗号隔开。
font-family: 楷体;
font-family: Calibri;
font-family: "Arial Unicode MS";
font-family: 楷体,宋体;
拓展：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，最后设置一个字体族名（网页开发建议使用无衬线字体self-serif）执行顺序是从左向右依次查找。
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,楷体, sans-serif;
九、text-decoration 下划线
text-decoration的主要作用就是去掉超链接的下划线
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
十、font 复合属性
作用：font一般用在网页文字的公共样式
- 方法：【font：是否倾斜 是否加粗 字号/行高 字体】必须按此格式和顺序编写，并且字号和字体值不可省略，否则不生效。
*{
font: normal 700 30px/2 楷体;
}
