Come utilizzare le varianti di carattere "bicolore" in CSS?

Question

Alcuni tipi di carattere presentano una variante per il contorno e il riempimento e, se li si utilizza in un testo sovrapposto, traccia un tratto delineato o ombreggiato sul testo riempito. Questo è diverso da un semplice contorno che accarezza il testo come -webkit-text-stroke-color ti darebbe, dato che a volte il font riempito contiene sfumature o altri dettagli.

Ecco alcuni esempi di caratteri progettati per essere utilizzati in questo modo.

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

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

Ero un po 'in grado di ottenere questo al lavoro usando i CSS in questo modo:

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

Questo crea due campate H1 e utilizza il top-margine per muovi il profilo in cima a quello pieno.

Tuttavia, questo non mi sembra ideale. Due problemi:

• Non voglio duplicare il testo in html.
• Devo stimare il margine superiore per tentativi ed errori.
• Se il testo si chiude, non funziona più.

C'è un modo migliore per farlo? Posso vivere con dover duplicare il testo, ma mi piacerebbe davvero un modo più automatico per fare il posizionamento.

Grazie!

Answer 1

è possibile inserire il testo di una struttura all'interno della h1 e utilizzare il posizionamento assoluto invece di stimare il margine, come in questo jsFiddle: http://jsfiddle.net/6SakC/4/

che risolve il problema con la disposizione del testo.

Per evitare la duplicazione del testo nel markup, è possibile utilizzare JavaScript per creare il testo duplicato, come in questo jsFiddle: http://jsfiddle.net/6SakC/5/ (Questa potrebbe non essere l'idea migliore, tuttavia, poiché il testo potrebbe avere un momento da visualizzare senza la struttura e JS sono occasionalmente disattivati ​​nelle impostazioni del browser.)