真正手写效果需组合 font-family 与 text-shadow 实现视觉模拟，而非单用其一；选对字体并适配多端渲染、控制阴影轻重变化、响应式适配及跨浏览器测试缺一不可。
纯靠 font-family 或单用 text-shadow 都做不出真正手写效果——前者只是换字体，后者无法模拟笔画顺序、起收笔和连笔。要接近手写感，必须组合使用，并接受它仍是“视觉模拟”，不是 SVG 路径动画那种真书写。
选对 font-family 是基础，但别迷信“手写体”名字
很多叫 “Brush Script”“Dancing Script”“Great Vibes” 的字体确实带手写特征，但实际渲染效果差异很大：
-
font-family: "Brush Script MT", cursive;在 Windows 上可能 fallback 到系统默认 cursive，Mac 上才更接近预期； - Web 字体（如 Google Fonts 的
font-family: "Pacifico", cursive;）需确保@import或<link>加载成功，否则直接退化为cursive，而各浏览器对cursive的实现完全不同； - 细笔画字体（如
"Allura"）配大font-size时容易发虚，建议最小用24px起； - 避免在小字号（
14px以下）强行用装饰性手写字体，可读性会断崖式下降。
text-shadow 不是“加个影子”，而是用来伪造笔触质感
关键不是叠得多，而是模仿真实笔尖的轻重变化：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 起笔处加一个浅色、无模糊的上左阴影：
text-shadow: -1px -1px 0 #e0e0e0;（模拟提笔）； - 主笔画用略深、带轻微模糊的右下阴影：
1px 1px 1px #666;； - 收笔拖尾可用单侧长偏移 + 透明度渐变：
3px 3px 4px rgba(0,0,0,0.2);； - 慎用多个高模糊值（如
0 0 10px），它会让字形膨胀、边缘糊掉，尤其在 Retina 屏上更明显； - 深色文字配浅色阴影（
#fff）、浅色文字配深色阴影（#333），对比度太低会失去笔触感。
响应式下 font-family + text-shadow 容易失效的几个点
PC 看着好好的效果，到手机上常崩，问题往往出在：
立即学习“前端免费学习笔记（深入）”；
- 没设
font-size基准：用rem或vw，别死写px，否则小屏下字体缩得太小，text-shadow就全糊成一团； - Web 字体加载延迟：字体未就绪时，浏览器先用
cursive渲染，等 Web Font 下来才重绘——造成闪动。加font-display: swap;可缓解； - iOS Safari 对
text-shadow模糊半径渲染偏弱，同样2px模糊，在 Chrome 里清晰，在 Safari 里像没加；实测建议 iOS 专用规则多加0.5px模糊； - line-height 过小会导致多行文字阴影重叠，看起来像墨迹晕染，调到
1.4以上更安全。
真正难的不是写几行 CSS，而是平衡“像手写”和“能看清”。哪怕只调一个 blur-radius 值，也要在 iPhone、Android、Chrome、Safari 上都过一遍——细微参数在不同渲染引擎下表现差异比你预想的大得多。
