CSSで "two-toned"フォントバリエーションを使用するには？

Question

一部のフォントにはアウトラインと塗りつぶしのバリアントがあり、重複するテキストでこれらを使用すると、塗りつぶしされたテキストにアウトラインまたは影付きの線が描画されます。これは、-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スパンを作成しに、トップマージンを使用しています塗りつぶされたものの上にアウトラインを移動します。

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

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

これを行うより良い方法はありますか？私はテキストを複製する必要がありますが、私は本当にポジショニングを行うためのより自動化された方法が欲しいと思っています。

ありがとうございます！

Answer 1

あなたはこのjsFiddleのように、H1内のアウトラインテキストを配置し、代わりにマージンを推定する絶対位置を使用することができます。また、テキストの折り返しの問題を解決しhttp://jsfiddle.net/6SakC/4/

を。

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