¿Cómo usar variantes de fuente "de dos tonos" en CSS?

Question

Algunas fuentes tienen una variante para contorno y relleno, y si las usa sobre texto superpuesto dibuja un trazo sombreado o sombreado sobre el texto relleno. Esto es diferente a solo un contorno que recorre el texto como -webkit-text-stroke-color le daría, ya que a veces la fuente llena contiene sombreado u otros detalles.

Aquí hay algunos ejemplos de fuentes diseñadas para ser usadas de esta manera.

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

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

Yo era una especie de poder conseguir que esto funcione el uso de CSS como esto:

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

Esto crea dos tramos H1 y utiliza el margen superior a mueve el contorno uno encima del lleno.

Sin embargo, esto no me parece ideal. Dos problemas:

• No quiero duplicar el texto en el html.
• Tengo que estimar el margen superior por prueba y error.
• Si el texto se ajusta, ya no funciona.

¿Hay una forma mejor de hacerlo? Puedo vivir teniendo que duplicar el texto, pero realmente me gustaría una forma más automática de hacer el posicionamiento.

Gracias!

Answer 1

puede colocar el texto de esquema en el interior del h1 y utilizar el posicionamiento absoluto en lugar de estimar el margen, como en este jsFiddle: http://jsfiddle.net/6SakC/4/

Eso también resuelve el problema con el ajuste de texto.

Para evitar la duplicación del texto en el marcado, puede usar JavaScript para crear el texto duplicado, como en este jsFiddle: http://jsfiddle.net/6SakC/5/ (Esta podría no ser la mejor idea, ya que el texto podría mostrarse un momento sin el esquema, y ​​JS ocasionalmente se desactiva en la configuración del navegador.)