CSS基础教程（十二）font字体：拜托！CSS字体用对真的超酷的诶：从“码农”到“字匠”的进击之路

还记得那些年被“宋体”和“楷体”支配的恐惧吗？一个精心设计的网页，可能就因为一句不经意的 font-family: SimSun; 而瞬间梦回Windows 98。字体，就像是网页的“衣服”，穿对了是时尚icon，穿错了就是大型翻车现场。

今天，我们就来好好聊聊CSS字体那点事，让你从只会写 color: red; 的“码农”，进化成精通排版、细节拉满的“字匠”！

第一章：字体的“基本款衣橱” —— font-family

font-family 是咱们最熟悉的老朋友了，它的核心玩法就两个字：堆叠。浏览器会从左到右依次查找你列出的字体，直到找到一个用户系统里有的。

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

这句代码是啥意思呢？

1. “PingFang SC” (苹方)：优先召唤 macOS 和 iOS 上的大佬，优雅又清晰。
2. “Microsoft YaHei” (微软雅黑)：如果用户在Windows系统上，这位就是扛把子。
3. sans-serif：最后的“保底神器”！如果前两位大佬用户的系统里都没有，浏览器就会从无衬线字体家族里随便挑一个默认的。这是一个好习惯，务必养成！

👉 幽默一刻：font-family 就像你的求生欲——你得先说出女神的名字（“PingFang SC”），再说出备选（“Microsoft YaHei”），最后不忘加一句“或者跟她们一样好看的人都行”（sans-serif）。千万别把“保底”忘了，否则用户电脑可能真的会给你显示一个惊悚的字体。

常用中英文字体家族推荐：

• 无衬线 (sans-serif)：现代、简洁、易读。Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif
• 衬线 (serif)：传统、优雅、正式。Georgia, "Times New Roman", "Songti SC", serif
• 等宽 (monospace)：代码、终端。Monaco, "Courier New", monospace

第二章：召唤神龙 —— @font-face 自定义字体

系统字体不够酷？想用设计师给的漂亮字体？@font-face