文字装饰：用手写风格下划线？

Question

是否有一个CSS技巧或者可能是一个JavaScript库，它会使用text-decoration: underline样式的元素，并使用某种图像提供类似手写的下划线？

如果我自己这样做，我想我会准备一些图像来考虑不同长度的下划线，然后以某种方式动态添加相对定位元素，将这些图像放入DOM中。但是，有没有更好的方法，甚至更好的，即时可用的解决方案？

Answer 1

是的，您可以将图像用作元素边框

例如我有一个像这样的标记

<div class="main">
<h2>Lorem Ipsum Dolor Sat</h2>
  <p> Some Text</p>
</div>

然后我可以将h2的样式应用于使用图像将下划线边框作为手写样式。

.main h2 {
  background-image: url(images/underline.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 7px;
}

图像是

Answer 2

为什么不在元素上使用边框底部并将边框更改为图像？

Answer 3

点击此链接：http://alistapart.com/article/customunderlines

看起来他们只是使用了一个图像，它们会重复几次或根据单词的长度进行调整。我知道你不想使用图像，但这看起来是获得手写效果的最佳方式。