如何在HTML中设置草书字体实现手写风格的签名效果？

原代码问题修正 #

你当前的写法存在语法错误：font-family是CSS样式属性，不能直接作为<p>标签的原生属性使用，必须写在style属性内或独立CSS规则中才会生效。

可直接生效的草书字体列表 #

不需要引入外部资源，按优先级排列字体，匹配不到时会自动向后兜底，所有主流浏览器都能正常渲染：

• Brush Script MT：全平台高覆盖率的经典草书字体，笔触流畅连笔自然，最接近真实手写签名质感
• Segoe Script：Windows系统全版本预装，笔锋柔和，没有过度夸张的装饰性连笔
• Apple Chancery：macOS、iOS系统全版本预装，连笔优雅偏正式，适合商务风格签名
• Lucida Handwriting：跨Windows、macOS、Linux主流发行版预装，字形识别度高，不会出现太潦草看不清的问题
• cursive：通用草书字体族兜底值，所有浏览器都会自动调用当前系统内置的手写风格字体，必须放在字体列表最后一位保证兼容性

签名效果实现代码 #

除了字体配置，可适当调大字号、增加轻微字间距、加小角度斜体，更贴近真实手写的观感，示例代码如下：

<p style="font-family: 'Brush Script MT', 'Segoe Script', 'Apple Chancery', 'Lucida Handwriting', cursive; font-size: 2.5rem; letter-spacing: 1.5px; transform: rotate(-2deg);">John Smith</p>

提示：字体名带空格时必须用单引号包裹；transform: rotate(-2deg)是给整体文本加2度的逆时针倾斜，模拟真实手写签名不会完全水平的自然感，如果不需要可以删掉。

内容的提问来源于stack exchange，提问作者Marley Miller