Come applicare gli effetti anti-alias dei font nei CSS?

Come possiamo applicare l'anti-alias dei caratteri di tipo Photoshop come nitido, nitido, forte, scorrevole nei CSS?Come applicare gli effetti anti-alias dei font nei CSS?

Sono supportati da tutti i browser?

fonte

2013-07-25 Mehar

Penso che la tua domanda dovrebbe essere: "È possibile applicare carattere Photoshop effetti nei fogli di stile? " –

Purtroppo no, leggi questo: http://stackoverflow.com/questions/5811166/does-css-support-text-anti-aliasing-such-as-crisp-sharp-etc-yet –

qui si va Sir :-)

.myElement{ 
    -webkit-font-smoothing: antialiased; 
    }

.myElement{ 
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px; 
    }

Update: (vedi Duke)

.myElement{ 
    text-shadow: rgba(0,0,0,.01) 0 0 1px; 
    }

fonte

2013-07-26 16:13:48

'Sono supportati da tutti i browser?' No, questo markup è supportato solo da webkit (Chrome e Safari). – alias51

-webkit-text-shadow non supportato più, juste usa invece text-shadow. – Romainpetit

Risposta breve: non è possibile.

I CSS non hanno tecniche che influenzano il rendering dei caratteri nel browser; solo il sistema può farlo.

Ovviamente, la nitidezza del testo può essere facilmente ottenuta con schermi a densità di pixel, ma se si utilizza un PC normale sarà difficile da ottenere.

Ci sono alcuni tipi di carattere più recenti che sono lisci ma al sacrificio appaiono leggermente sfocati (per esempio, guarda la maggior parte dei font di Adobe). È tuttavia possibile trovare alcuni tipi di carattere uniformi ma sfocati a Google Fonts.

Esistono alcune nuove tecniche CSS3 per il rendering dei caratteri e gli effetti di testo, anche se la coerenza, le prestazioni e l'affidabilità di queste tecniche variano così ampiamente al punto che in genere non si dovrebbe fare troppo affidamento su di esse.

fonte

2013-07-25 17:26:46

Che dire di '-webkit-font -smoothing'? – Jasper

@Jasper che è solo per '-webkit -' (che sarebbe Safari). Chrome e Opera hanno ora eliminato i prefissi dei fornitori e, se non sono supportati da nessun produttore (ad esempio 'font-smoothing' senza' -webkit-'), la funzione non è supportata. L'uso del font smoothing è fortemente inaffidabile e costantemente incoerente. –

Curioso sul motivo per cui questo è in downvoted. Se lo fai, per favore mi illumini. Le altre risposte non funzionano o non sono supportate da tutti i browser. –

funziona meglio. Se si desidera utilizzarlo in tutto il sito, senza dover aggiungere questa sintassi per ogni classe o ID, aggiungere il seguente CSS per il vostro corpo css:

body { 
    -webkit-font-smoothing: antialiased; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004); 
    background: url('./images/background.png'); 
    text-align: left; 
    margin: auto; 

}

fonte

2014-02-03 21:06:33 user3267537

'body {text-shadow: 1px 1px 1px rgba (0,0,0,0.004)! Important;}' ha funzionato per me. Grazie! – Akash

aggiornato! funziona sia in webkit che in moz! –

Come applicare gli effetti anti-alias dei font nei CSS?

risposta

Problemi correlati