✍️ 字体展示
测试不同手写体字体的显示效果
中文字体
Ma Shan Zheng (马善政)
经典中文毛笔字体，有书法感
font-family: 'Ma Shan Zheng', cursive;
你好，我是晨。
一个在”码农”时代摸爬滚打多年的”上代程序员”。如今进入 vibe coding 时代，也被迫卷入了程序员的生存淘汰赛。
ZCOOL XiaoWei (站酷小薇)
清新手写体，比较易读
font-family: 'ZCOOL XiaoWei', serif;
你好，我是晨。
一个在”码农”时代摸爬滚打多年的”上代程序员”。如今进入 vibe coding 时代，也被迫卷入了程序员的生存淘汰赛。
Long Cang (龙藏)
古风毛笔字
font-family: 'Long Cang', cursive;
你好，我是晨。
一个在”码农”时代摸爬滚打多年的”上代程序员”。
ZCOOL QingKe HuangYou (站酷庆科黄油)
有力量感的手写体
font-family: 'ZCOOL QingKe HuangYou', cursive;
你好，我是晨。
一个在”码农”时代摸爬滚打多年的”上代程序员”。
英文字体
Caveat
现代手写风格
font-family: 'Caveat', cursive;
Hello World!
This is a handwritten style font.
Nice to meet you!
Patrick Hand
干净的手写体
font-family: 'Patrick Hand', cursive;
Hello World!
This is Patrick Hand font.
Perfect for casual writing.
Indie Flower
花朵风格的手写体
font-family: 'Indie Flower', cursive;
Hello World!
This is Indie Flower font.
Great for notes and quotes.
Permanent Marker
马克笔风格
font-family: 'Permanent Marker', cursive;
Hello World!
Permanent Marker style.
Bold and expressive.
代码中的使用方式
1. 在 frontmatter 的 cssclasses 中注册
---
cssclasses:
- handwritten-zcool
---2. 在 Markdown 中直接使用 style
<div style="font-family: 'Ma Shan Zheng', cursive; font-size: 1.5em;">
你的文字内容...
</div>3. 在 custom.scss 中定义 CSS 类
.handwritten-zcool {
font-family: 'ZCOOL XiaoWei', serif !important;
font-size: 1.3em;
line-height: 1.8;
color: #5a5248;
}推荐组合
| 风格 | 中文字体 | 英文字体 |
|---|---|---|
| 温暖自然 | Ma Shan Zheng | Caveat |
| 清新文艺 | ZCOOL XiaoWei | Patrick Hand |
| 力量感 | ZCOOL QingKe HuangYou | Permanent Marker |
| 古典风 | Long Cang | Indie Flower |
最后更新：{{ lastModified }}