文字装饰：带有手写风格的下划线？ [关闭]答案

【问题标题】：text-decoration:underline with handwritten style? [closed]文字装饰：带有手写风格的下划线？ [关闭]
【发布时间】：2014-03-13 03:08:11
【问题描述】：

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

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

【问题讨论】：

您可以使用图像或可能使用自定义字体，但不会涉及text-decoration
@Borek 我更喜欢不使用图像并使用自定义字体，但我的工作流程几乎相同！
你可以为你想要的样式添加一些示例标记吗？
哪个示例与您的 HTML 当前在文本下划线的方法相匹配？：cssdesk.com/93K3v

标签： javascript css underline

【解决方案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;
}

图像是

【讨论】：

我需要它聪明一点，即根据下划线的长度使用不同的图像。您的示例是一个好的开始，但不是一个完整的解决方案。无论如何，谢谢。

【解决方案2】：

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

【讨论】：

你的意思是border-image？这仅在 IE11+ 中受支持。

【解决方案3】：

查看此链接：http://alistapart.com/article/customunderlines

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

【讨论】：