如何在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 span，并使用顶部边距将轮廓移动到填充的上面。

然而，这对我来说似乎不是理想的。有两个问题：

- 我不想在HTML中重复文本。 - 我必须通过试错来猜测顶部边距。 - 如果文本换行，这种方法就不再适用了。

有更好的方法吗？我可以接受必须重复文本，但我真的希望有一种更自动化的定位方式。

谢谢！

- joeld

Answer 1

您可以将轮廓文本放在h1元素内，并使用绝对定位而不是估计边距，如此jsFiddle示例所示：http://jsfiddle.net/6SakC/4/

这还解决了文本换行的问题。

为避免在标记中重复文本，您可以使用JavaScript创建重复的文本，如此jsFiddle示例所示：http://jsfiddle.net/6SakC/5/（尽管浏览器设置中可能会禁用JS，这可能不是最好的想法。）

- Brilliand