如何在CSS中使用「雙色」字體變體？

Question

某些字體有輪廓和填充的變體，如果您在重疊文本上使用這些變體，它會在填充的文本上繪製輪廓或陰影筆劃。這不僅僅是像-webkit-text-stroke-color會給你的那樣描述文本的輪廓，因爲有時填充的字體包含着色或其他細節。

下面是一些設計用於這種方式的字體示例。

http://www.myfonts.com/fonts/matchandkerosene/duotone/

http://www.myfonts.com/fonts/scrowleyfonts/stomp/

我是那種能夠得到這個使用CSS像這樣的工作：

http://jsfiddle.net/6SakC/2/

這就造成了兩個H1跨度和使用頂級保證金將輪廓移動到填充的輪廓上。

但是，這對我來說似乎並不理想。兩個問題：

• 我不想在html中複製文本。
• 我必須通過反覆試驗來猜測最高邊緣。
• 如果文字換行，這不起作用了。

有沒有更好的方法來做到這一點？我可以忍受不得不復制文本，但我真的很喜歡更自動的方式來定位。

謝謝！

Answer 1

您可以將H1內輪廓文本和使用，而不是估計的利潤率絕對定位，在此的jsfiddle：http://jsfiddle.net/6SakC/4/

這也解決了文字環繞的問題。

爲避免重複標記中的文本，您可以使用JavaScript創建重複文本，如下所示：http://jsfiddle.net/6SakC/5/（這可能不是最好的主意，因爲文本可能會顯示一段時間而沒有顯示大綱和JS偶爾在瀏覽器設置中被禁用。）