巨人的噪音

👺

Goliath (巨人 Bug):
文字只需要能看懂就行了！
我都用 Times New Roman！
而且我要把所有的字都挤在一起，让你们看花了眼！

I will defeat you with my wall of text that is impossible to read and very boring. (枯燥、密集、无趣的字体)

文字的旋律

🧑‍🦱

Young David (少年大卫):
停下你的噪音！
文字应当像琴声一样悦耳，像诗歌一样优美。
看哪，这才是排版的艺术。

我是衬线体 (Serif)。庄重，像古老的石碑。

我是无衬线体 (Sans-serif)。现代，像锋利的宝剑。

我是等宽字体 (Monospace)。精准，像工程师的图纸。

我是手写体 (Cursive)。自由，像吟游诗人的歌！

声音的调节 (属性)

1. 音量 (Size & Weight)

h1 { 
    font-size: 32px; /* 高声呐喊！ */
    font-weight: bold; /* 充满力量！ */
}

2. 音色 (Family)

给浏览器一个备选名单，如果它不会唱第一首，就唱第二首。

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

3. 队形 (Align & Decoration)

p { text-align: center; /* 站中间，成为焦点 */ }
a { text-decoration: none; /* 去掉绊脚石（下划线） */ }

⚔️ 操练场 (Training Ground)

任务： 调整公告牌的音量和队形。

目标：把标题 (h1) 的大小设为 40px，并让它 center (居中) 对齐。

h1 {
font-size: ;
text-align: ;
}

🏗️ 建造工坊 (Workshop)

实战：设计一个“英雄标题” (Hero Title)

大卫要为他的传说写一个震撼人心的标题。来帮他排版！

STEP 1 字体的骨架 (Font)

选择一个强壮的无衬线字体，并把声音调大。

.hero-title {
    font-family: 'Arial Black', sans-serif; /* 强壮的字体 */
    font-size: 60px; /* 巨大的声音 */
    font-weight: 900; /* 最粗的笔画 */
    color: #333;
    margin: 0;
}

STEP 2 呼吸的空间 (Spacing)

让字母之间松一口气，把小写字母变成大写，更有气势。

.hero-title {
    letter-spacing: 5px; /* 字母间距 */
    text-transform: uppercase; /* 全部大写 */
    line-height: 1.2; /* 行高 */
}

STEP 3 最终效果 (Result)

CODE IS MY SWORD

(代码是我的利剑)