CSS字体与文本样式怎么设置？font-size颜色行高对齐新手入门

学会写HTML骨架之后，下一步就是让文字好看、好读。这就要靠CSS字体样式和CSS文本样式来搞定。很多新手页面丑，不是因为不会布局，而是文字字号乱、行距挤、对齐歪。今天老陈用几个最常用属性，带你一次学会网页文字排版，配实战例子，照抄就能用。

一、font-family：字体族怎么选

font-family用来指定文字用哪种字体。中文网站建议写一个字体列表，前面是首选、后面是兜底，比如：

body { font-family: 微软雅黑, 黑体, sans-serif; }

意思是优先用微软雅黑，没有就退到黑体，再没有就用系统无衬线字体。末尾的sans-serif是保底，一定要写，免得某些设备显示成奇怪的字体。

二、font-size：字号与单位

font-size控制字大小。新手推荐用px（像素），直观好控：

p { font-size: 16px; }

正文一般14到16px，标题可以用20到32px。想做响应式，可学rem单位（相对根字号），但这里先记住px就够用了。

三、color：文字颜色

color设置文字颜色，支持颜色名、十六进制、rgb：

h1 { color: #e60012; }

正文别用纯黑#000，太刺眼；用#333这种深灰更舒服，这是很多大站的默认做法。

四、line-height：行高（重点避坑）

line-height是每行文字的高度，不是字和字的距离。新手最常踩的坑：行高设太小，文字挤成一团。正文建议设为字号的1.5到1.8倍：

p { font-size: 16px; line-height: 1.7; }

写1.7这种倍数最省心，改字号时行高自动跟着变，不会出现行高塌陷。

五、text-align 与 text-indent

text-align控制水平对齐：left左、center居中、right右。标题常用center。
text-indent: 2em; 让段落首行缩进两个字，中文文章必备。

p { text-align: left; text-indent: 2em; }

六、letter-spacing：字间距

想让标题更有设计感，可以加字间距：

h2 { letter-spacing: 2px; }

老陈总结

CSS字体样式和文本样式就这六个属性最常用：font-family选字体、font-size定大小、color上颜色、line-height管行距、text-align管对齐、letter-spacing调间距。现在就打开你写过的页面，把正文设成16px、行高1.7、首行缩进2em，再看一眼，是不是顺眼多了？排版是前端的基本功，练熟这几个，页面质感立刻上一个台阶。想系统学前端，可以看我的课程，或评论区留言拿链接。