应使用@font-face本地引入手写体字体文件，如@font-face{font-family:'MyHandwriting';src:url('./fonts/Pacifico-Regular.woff2')format('woff2');font-weight:normal;font-style:normal;}，再通过font-family:'MyHandwriting',cursive;应用，避免仅用cursive导致跨平台渲染不一致。
怎么用 CSS 加载手写体字体（不依赖 Google Fonts）
直接在本地引入手写体字体文件最可控，避免网络请求失败或跨域问题。推荐使用 @font-face 声明自定义字体，再通过 font-family 应用。
- 下载.ttf 或.woff2 格式的手写体字体（如 “Pacifico”、“Caveat”、“Dancing Script”，注意确认许可证允许 Web 使用）
- 把字体文件放在项目目录下，比如
fonts/Pacifico-Regular.woff2 - 在 CSS 中写：
@font-face { font-family: 'MyHandwriting'; src: url('./fonts/Pacifico-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } - 然后在元素上使用：
font-family: 'MyHandwriting', cursive;（cursive是备用字体，浏览器会 fallback 到系统手写体）
为什么不能只写 font-family: cursive？
cursive 只是通用字体族关键字，它不指定具体字体，实际渲染完全取决于用户系统——Windows 上可能是 Comic Sans，macOS 可能是 Hoefler Text，Linux 下甚至可能没有可用的 cursive 字体，效果极不可控。
- 不同系统对
cursive的映射差异极大，设计稿和实际页面常不一致 - 移动端尤其明显：iOS Safari 对
cursive支持弱，部分 Android 浏览器直接忽略 - 若真想轻量级实现“类手写”效果，可搭配
font-smooth: auto和轻微letter-spacing调整，但本质仍是系统字体，不推荐用于品牌一致性要求高的场景
Google Fonts 手写体怎么安全引入？
如果必须用 Google Fonts，优先选支持 display=swap 的加载方式，避免文字闪动或长时间空白。别用 &display=block，它会导致文本延迟渲染。
- 在
<head>中插入：<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap" rel="stylesheet">
- CSS 中写：
font-family: 'Caveat', cursive; - 注意：Google Fonts 返回的 CSS 里已包含
@font-face声明，无需再自己写；但若页面离线或被墙，字体将失效，务必设好cursivefallback - 检查 Network 面板，确认字体请求返回状态码是 200 且 MIME 类型为
font/woff2，否则可能因 CSP 策略被拦截
手写体字体在真实项目中容易被忽略的细节
手写体不是“加个 font-family 就完事”，字重、连字、字符集覆盖不足都会导致文字断裂或样式崩坏。
立即学习“前端免费学习笔记（深入）”；
- 很多手写体只提供 Regular 字重，写
font-weight: bold会触发浏览器模拟加粗，笔画变形严重——要么禁用font-weight，要么确认字体文件本身包含 Bold 版本 - 中文手写体极度稀缺，英文手写体通常不含中文字符，混排时中文自动 fallback 到系统字体，视觉割裂；可考虑用
unicode-range分离中英文字体声明 - 某些手写体（如 “Lobster”）默认字母间距过紧，小字号下易粘连，建议加
letter-spacing: 0.02em微调
