如何在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创建重复文本，如此jsFiddle：http://jsfiddle.net/6SakC/5/（这可能不是最好的主意，因为文本可能会得到片刻在没有轮廓的情况下显示，并且在浏览器设置中偶尔会禁用JS。）