css - CSS 能否以两种不同的字体或颜色渲染文本两次？

Question

在这个 jsfiddle中，相同的文本被绘制了两次：

Londrina Solid 和 Londrina Shadow 这两种字体被设计为具有完全相同的度量标准并以这种方式一起使用。

有没有办法在不将文本的两个副本放入 HTML 的情况下使用 CSS 来实现这种效果？（当然，我也不想将文本的副本放入 CSS 中。）

score 4 · Accepted Answer

五个text-shadows 几乎相同¹：

text-shadow: 0.03em 0.03em 0 black, -1.25px 0 0 black, 1.25px 0 0 black, 0 -1.25px 0 black, 0 1.25px 0 black;

_{¹是的，我知道这是矛盾的。}

score 2 · Accepted Answer

您可以尝试使用 :after 并使用 content 属性：

h1:after, h1 > span.shadow:after {
    content: "Nashville hack day is November 11";
    font-size: 700%;
}

html可能是：

<body>
  <h1><span class="shadow"></span></h1>
</body>

我意识到这可能很麻烦，但至少您只需编写一次内容。

score -1 · Accepted Answer

如果您尝试创建文本阴影，请查看W3C: Css: text shadows。

但是，这些与不兼容的 IE<10 不兼容。

3 回答 3