文字裝飾：強調手寫風格？

有沒有一個CSS技巧或可能是一個JavaScript庫，將採取與text-decoration: underline風格的元素，並提供使用某種形象的手寫的下劃線？文字裝飾：強調手寫風格？

如果我自己這樣做，我想我會準備幾個圖像來說明不同長度的下劃線，然後以某種方式動態添加將這些圖像放入DOM中的相對定位元素。但是，現在還沒有更好的方法，甚至更好，這是一種現成的解決方案嗎？

來源

2014-02-13 Borek

您可以用圖像與自定義字體做或可能，但不會涉及'文本decoration' – helion3

@Borek我寧願做withouth的圖像並使用自定義字體，但我的工作流程將幾乎相同！ –

你可以添加一些例子標記爲你正在尋找風格？ –

爲什麼不在你的元素上使用邊框底部並將邊框改爲圖像？

來源

2014-02-13 23:28:00 chyupa

您的意思是'border-image'？這僅在IE11 +中受支持。 – Borek

退房此鏈接：http://alistapart.com/article/customunderlines

看起來他們只是使用的圖像，這是他們重複數次或基於單詞的長度調整。我知道你不想使用圖像，但這看起來是獲得手寫效果的最佳方式。

來源

2014-02-13 23:31:45 dpwivagg

是的，你可以使用圖片作爲元素邊框

比如我有這樣

<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; 
}

，圖像被0 enter image description here

來源

2014-02-13 23:40:02

我需要它是聰明的，即基於下劃線應該多長時間使用不同的圖像。你的例子是一個好的開始，但不是完整的解決方案。不管怎麼說，還是要謝謝你。 – Borek

文字裝飾：強調手寫風格？

回答

相關問題