Wie verwendet man "zweifarbige" Schriftvarianten in CSS?

Question

Bestimmte Schriftarten haben eine Variante für Outline und gefüllt, und wenn Sie diese für überlappenden Text verwenden, zeichnet sie einen gegliederten oder schattierten Strich über den gefüllten Text. Dies ist anders als nur eine Gliederung, die den Text streicht wie -webkit-text-stroke-color würde es Ihnen geben, da manchmal die gefüllte Schrift Schattierung oder andere Details enthält.

Hier sind einige Beispiele für Schriftarten, die auf diese Weise verwendet werden können.

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

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

Ich war irgendwie in der Lage, dies zu bekommen CSS wie dies funktioniert mit:

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

Dadurch entstehen zwei H1 Spannweiten und verwendet die Top-Marge Verschiebe den Umriss auf den gefüllten.

Dies scheint jedoch nicht ideal für mich. Zwei Probleme:

• Ich möchte den Text im HTML nicht duplizieren.
• Ich muss den oberen Rand durch Versuch und Irrtum schätzen.
• Wenn der Text umbrochen wird, funktioniert das nicht mehr.

Gibt es einen besseren Weg, dies zu tun? Ich kann damit leben, den Text duplizieren zu müssen, aber ich würde gerne eine automatische Methode zur Positionierung verwenden.

Danke!

Answer 1

Sie können den Umriss Text innerhalb des h1 platzieren und absolute Positionierung verwenden, anstatt den Rand der Schätzung, wie in diesem jsFiddle: http://jsfiddle.net/6SakC/4/

, die auch das Problem mit dem Textumbruch löst.

den Textes in der Markup-Duplizierung zu vermeiden, können Sie JavaScript verwenden, um den doppelten Text zu erstellen, wie in diesem jsFiddle: http://jsfiddle.net/6SakC/5/ (Dies ist die beste Idee, nicht sein könnte, obwohl, da der Text einen Moment bekommen könnte, ohne anzuzeigen die Gliederung, und JS ist gelegentlich in den Browsereinstellungen deaktiviert.)