本文详细介绍了CSS中关于字体样式的设置，包括字体属性的顺序、字体大小、em、rem和px的使用、字体风格、字体加粗与变细、文本颜色、文本对齐以及首行缩进和行高等内容。通过实例演示了如何调整这些属性，以实现不同效果。
设置字体属性font-!
1.设置字体属性（用内部样式写在style里）
/* 字体可以用引号包裹 也可以不加
★如果楷体也不认识，那么就用浏览器默认的字体
*/
.p1{
font-family: 宋体;
/*font-family: "楷体";*/
}
2.设置字体大小
/* px是物理像素 */
div{
font-size:12px;
}
3.em、rem和px的使用
/*网页一般的一个字符像素大小为16px*/
/* em是根据父元素的大小来显示的 */
p{
/*根据p标签的上一级父元素的font-size的大小成2倍*/
font-size:2em;
}
span{
font-size:32px;
}
由上图可知：p标签的父元素是div，而div大小定义为12px，则p标签下的2em=2*12=24px；
应用： 什么情况用em?现在用em比较少，一般是在移动端的适配各种机型（兼容各种手机屏幕大小，页面显示的更好）的时候会用，但是用的比较多的是 rem单位
rem是根据 根元素html 的大小来的
使用rem时，根据html字符大小为16px的话，也可以自行更改
html{
/*设置html字体大小的初始像素为14px*/
font-size:14px;
}
div{
/*那么div根据rem由html的大小来算，div字符的大小为2*14=28px，如果前面没有设置html的大小的话，那么像素大小为2*16=32px，div如果有父类标签大小，不受rem影响，依旧以html像素大小计算*/
font-size:2rem;
}
p{
/*测试字体是否是24px*/
font-size:24px;
}
4.字体风格： i em font-style:italic;和font-style: oblique; 都表示斜体的意思
.h{
font-style:italic;
}
.y{
font-style: oblique;
}
.n{
/* 使用font-style:normal;可以把已经斜体的样式改成正常的字体样式 */
font-style:normal;
}
5.字体加粗：使用font-weight属性设置bold /bolder设置成为粗体字体
字体变细：使用font-weight: lighter;可以是字体变细。
.p1{
font-weight: bold;
}
.p2{
/*使用font-weight属性设置bolder 设置成为更粗的字体*/
font-weight: bolder;
}
疑问/解答：bold和bolder设置的字体的粗细都是一样的 为什么呢？
bold设置成粗体的以后 页面的显示就已经是最大值了 所以就算设置了bolder再大也不会发生明显变化,bolder存在的意义就是 告诉浏览器我是更粗的字体 再语义化上面 比bold更加强烈
字体变细： 100、200、300、400、500、600、700、800、900定义由细到粗的字体。
400等同于normal，700等同于bold
h1{
font-weight: lighter;
}
.div1{
font-weight: 500;
}
注意：字体设置到300 就已经是浏览器显示最细的字体的极限了，所以你再往下设置更细的字体，就不会有效果，当你设置到600的时候 浏览器粗体的显示就已经是极限了，所以你再加大字体， 浏览器也不会有更粗的字体效果了，当你设置成 400 和 500的时候 都是标准字体 不会加粗也不会变细
6.字体属性简写标准顺序：字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
小妙招：字体类型要放在最后 字体风格和字体粗细和颠倒位置 其他的不行，也可以显示效果。.p1{
font-family: 宋体;
font-size: 30px;
font-style: italic;
font-weight: bold;
}
.p2{
font:italic bold 30px 宋体;
}
7.文本样式--color属性：RGB、RGBA、颜色英文、十六进制法
8.排版文本段落
/* 宽400px */
width: 400px;
/* 边框1px，实线，红色 */
border: 1px solid red;
/* 把文本排列到右边 */
text-align: right;
/* 把文本排列到左边。默认值：由浏览器决定 */
text-align: left; */
/* 把文本排列到中间 */
text-align: center; */
/* 实现两端对齐文本效果，两端对齐只正针对与文字（中英文都可以） */
text-align: justify;
/* ★text-align left center right 对img依然有用 */
9.首行缩进： text-indent表示首行缩进
<style>
.div1{text-indent: 32px;}
.div2{text-indent: 2em;}
</style>
<body>
<div class="div1">我是根据字像素大小为16px的首行缩进2个字符</div>
<div class="div2">我是使用2em</div>
</body>
10.设置行高：line-height: Npx;
注：一个字的像素大小为16px，最好设置行高比字符大的像素，小了字体挤得慌。
行高妙用：想设置文字的垂直居中就需要把line-height设置的和高度height的值一样，
现在我想让字体水平方向居中，设置text-align: center;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
