Text Stroke and Shadow CSS3 en Firefox

Question

Hola chicos, me preguntaba si había una forma de agregar un trazo y una sombra al texto, puedo hacerlo funcionar en Chrome y Safari ya que webkit admite text-stroke y text-shadow. Puedo obtener el trazo para mostrar en Firefox, pero eso es usar la sombra de texto y jugar con el desplazamiento. Entonces, ¿alguien sabe cómo evitar este problema?

Answer 1

La propiedad text-stroke no es parte de la especificación estándar de CSS, por lo que es mejor evitarla: Chrome podría retirarla en cualquier momento.

Tienes razón que puede crear efectos text-stroke -como el uso de múltiples separados por comas text-shadow s - de hecho, puede utilizar la misma técnica para añadir una sombra 'real', así:

h1 { 
    font-size: 100px; 
    font-weight: bold; 
    text-shadow: 1px 1px 0 #F00, -1px -1px 0 #F00, 1px -1px 0 #F00, 
      -1px 1px 0 #F00, 3px 3px 5px #333; 
}​ 

Sea cuidado, porque text-shadow no es compatible con IE9 y abajo tampoco. Recomiendo solo usarlo para un estilo no esencial: asegúrese de que el texto siga siendo legible cuando el contorno de sombra/falso no esté allí.

Answer 2

Firefox 48 soporta ahora trazos de texto (con la -webkit prefijo), así como algunas otras propiedades en WebKit específica (como -webkit-text-fill-color). Solo tenga cuidado de que la especificación no esté realmente allí, y probablemente cambie en el futuro.

Aquí hay un ejemplo que ahora trabaja en Firefox:

.outline { 
 
    -webkit-text-stroke: 1px red; 
 
} 
 

 
span:first-of-type { 
 
    display: block; 
 
    font-size: 24pt; 
 
    font-weight: bold; 
 
}

<span class="outline">This text has a stroke.</span> 
 
<span class="outline">(Even in Firefox)</span>

Véase el sitio web de Mozilla:

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke