4

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

  • 最初は白で、無地のフォントで
  • 次に黒で、アウトラインフォントで

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

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

4

3 に答える 3

4

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

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;

これがデモです!

1はい、矛盾していることは承知しています。

于 2012-09-13T02:05:46.027 に答える
2

: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を参照してください。

于 2012-09-13T02:07:05.350 に答える
-1

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

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

于 2012-09-13T02:03:12.910 に答える