Jak korzystać z "dwukolorowych" wariantów czcionek w CSS?

Question

Niektóre czcionki mają warianty do konspektu i wypełnione, a jeśli używasz ich w nakładającym się tekście, rysują obrysowany lub cieniowany obrys nad wypełnionym tekstem. Jest to coś innego niż kontur, który obrysowuje tekst, np. -webkit-text-stroke-color, który by Ci dał, ponieważ czasami wypełniona czcionka zawiera cieniowanie lub inne szczegóły.

Oto kilka przykładów czcionek zaprojektowanych do użycia w ten sposób.

http://www.myfonts.com/fonts/matchandkerosene/duotone/

http://www.myfonts.com/fonts/scrowleyfonts/stomp/

byłem jakby w stanie uzyskać to do pracy za pomocą CSS tak:

http://jsfiddle.net/6SakC/2/

Stwarza to dwa przęsła H1 i używa najwyższej margines przesuń kontur o jeden na wypełniony.

Jednak nie wydaje mi się to idealne. Dwa problemy:

• Nie chcę duplikować tekstu w html.
• Muszę oszacować najwyższą marżę metodą prób i błędów.
• Jeśli tekst zawija, to już nie działa.

Czy jest lepszy sposób to zrobić? Mogę żyć z koniecznością duplikowania tekstu, ale bardzo bym chciał bardziej automatyczny sposób pozycjonowania.

Dzięki!

Answer 1

można umieścić tekst wewnątrz obrysu H1 i wykorzystać pozycjonowanie bezwzględne zamiast szacowania marży, jak w tym jsFiddle: http://jsfiddle.net/6SakC/4/

który rozwiązuje również problem z zawijania tekstu.

Aby uniknąć duplikowania tekstu w znacznikach, możesz użyć JavaScript, aby utworzyć duplikat tekstu, jak w tym jsFiddle: http://jsfiddle.net/6SakC/5/ (To może nie być najlepszy pomysł, ponieważ tekst może uzyskać chwilę, aby wyświetlić bez konspekt, a JS jest czasami wyłączony w ustawieniach przeglądarki.)