Testo Corsa e Ombra CSS3 in Firefox

Question

Hey ragazzi Mi chiedevo se c'era un modo di aggiungere un tratto e un'ombra al testo, posso farlo funzionare in Chrome e Safari poiché il webkit supporta il testo e l'ombreggiatura del testo. Posso ottenere il tratto da visualizzare in Firefox, ma quello è usare text-shadow e giocare con l'offset. Quindi qualcuno sa come risolvere questo problema.

Answer 1

La proprietà text-stroke non fa parte delle specifiche CSS standard, quindi è meglio evitarlo - Chrome potrebbe rientrare nei suoi diritti di ritirarlo in qualsiasi momento.

Hai ragione che è possibile creare text-stroke -come effetti utilizzando più delimitati da virgole text-shadow s - in effetti è possibile utilizzare la stessa tecnica per aggiungere un'ombra 'reale' così:

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; 
}​ 

Be attento però, perché text-shadow non è supportato in IE9 e sotto nessuno dei due. Ti consiglio di usarlo solo per uno stile non essenziale: assicurati che il testo sia leggibile quando il contorno ombra/finto non è presente.

Answer 2

Firefox 48 supporta ora i colpi di testo (con il prefisso -webkit), così come alcune altre proprietà specifiche del WebKit (come -webkit-text-fill-color). Basta essere cauti sul fatto che le specifiche non siano realmente lì, e probabilmente cambieranno in futuro.

Ecco un esempio che ora lavora in 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>

consultare il sito web di Mozilla:

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