第13课：字体与文字
进度 0/30
🔤
字体与文字
文字的千变万化
📖知识引入
📏font-size字号
16px是网页正文的「标准身材」。标题大、正文中、注释小——字号分层，页面立刻有了主次感。
🖋️font-family字体
宋体严肃、黑体醒目、楷体文艺；英文有Arial、Georgia。想要个性字体，还能从Google Fonts等网站在线加载。
🎭文字特效四件套
font-weight调粗细、line-height调行高、text-align调对齐、text-shadow加阴影——四招让文字从「能看」变「好看」。
👀可读性是底线
字太小看瞎眼、行太挤读不动、花字闪瞎人。再酷的特效，让人读不下去就是零分——好排版让文字会「呼吸」。
🤖AI排版顾问
让AI「优化我的文字排版，要有杂志感」，它连行高、字距、对比度都帮你调好，像请了个专业美编。
💡
好排版让文字会呼吸：字够大、行够宽、段够空！
🔍拥挤 vs 舒适
p {
font-size: 18px;
line-height: 1.8;
color: #333;
text-align: center;
}
h1 {
font-size: 32px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}同样一段文字，行高不同：
😵 拥挤版（行高1.1倍）： ┌──────────────────┐ │我爱编程。 │ │我爱画画。 │ │我爱猫。 │ │（字贴着字，喘不过气）│ └──────────────────┘
😌 舒适版（行高1.8倍）： ┌──────────────────┐ │我爱编程。 │ │ │ │我爱画画。 │ │ │ │我爱猫。 │ │（每行之间有呼吸感） │ └──────────────────┘
右边代码是文字化妆全套： 字号18px不大不小、 行高1.8倍呼吸感、 深灰#333比纯黑更温柔、 居中对齐更大气。
一次调整，全文高级！
🎯小测验
第1题：网页正文的「标准身材」字号大约是？
第2题：让段落之间每行字有「呼吸感」，主要调什么？
第3题：文字特效再酷，最重要的是什么？
📝本课知识点
- ✓16px是正文字号标准身材
- ✓字体自带性格：宋体严肃黑体醒目
- ✓粗细、行高、对齐、阴影四件套
- ✓可读性是排版的底线
- ✓AI能做杂志级排版优化
第13课完成！继续探索下一课吧 🚀