css - CSSは、2つの異なるフォントまたは色でテキストを2回レンダリングできますか？

Question

このjsfiddleでは、同じテキストが2回描画されます。

LondrinaSolidとLondrinaShadowの2つのフォントは、まったく同じメトリックを持ち、このように一緒に使用されるように設計されています。

テキストの2つのコピーをHTMLに入れずに、CSSを使用してこの効果を実現する方法はありますか？（もちろん、テキストのコピーをCSSに入れたくありません。）

score 4 · Accepted Answer

5text-shadow秒はほぼ同じです¹ :

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>

これは面倒かもしれませんが、少なくともコンテンツを 1 回書くだけで済みます。

jsfiddleを参照してください。

score -1 · Accepted Answer

テキストシャドウを作成しようとしている場合は、W3C: Css: text shadowsを確認してください。

ただし、これらは非準拠の IE<10 とは互換性がありません。

3 に答える 3