12

某些字体有轮廓和填充的变体，如果您在重叠的文本上使用它们，它会在填充的文本上绘制轮廓或阴影笔划。这与像 -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 中的文本。
  • 我必须通过反复试验来猜测最高利润。
  • 如果文本换行，这将不再起作用。

有一个更好的方法吗？我可以忍受必须复制文本，但我真的想要一种更自动的方式来进行定位。

谢谢！

4

1 回答 1

3

您可以将大纲文本放在 h1 内并使用绝对定位而不是估计边距，就像在这个 jsFiddle 中一样：http: //jsfiddle.net/6SakC/4/

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

为避免重复标记中的文本，您可以使用 JavaScript 创建重复的文本，如在此 jsFiddle 中：http: //jsfiddle.net/6SakC/5/（但这可能不是最好的主意，因为文本可能会在没有轮廓的情况下显示一段时间，并且浏览器设置中偶尔会禁用 JS。）

于 2012-07-27T00:09:49.843 回答