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/

これにより、2 つの H1 スパンが作成され、上部マージンを使用して、塗りつぶされたアウトラインの上にアウトラインが 1 つ移動します。

しかし、これは私には理想的ではないようです。2 つの問題:

  • HTML内のテキストを複製したくありません。
  • 試行錯誤でトップマージンを推測する必要があります。
  • テキストが折り返されると、これは機能しなくなります。

これを行うより良い方法はありますか？テキストを複製する必要はありますが、配置をより自動化する方法が本当に欲しいです。

ありがとう！

4

1 に答える 1

3

このjsFiddleのように、アウトラインテキストをh1内に配置し、マージンを推定する代わりに絶対位置を使用できます。http: //jsfiddle.net/6SakC/4/

これにより、テキストの折り返しの問題も解決されます。

マークアップ内のテキストの重複を避けるために、次のjsFiddleのように、JavaScriptを使用して重複するテキストを作成できます。http ：//jsfiddle.net/6SakC/5/アウトラインなしで表示される場合があり、ブラウザの設定でJSが無効になっている場合があります。）

于 2012-07-27T00:09:49.843 に答える