Visualizzare i caratteri frastagliati usando HTML/CSS

Ho bisogno di renderizzare del testo usando HTML/CSS senza alcun livellamento o aliasing dello schermo, o qualcosa del genere. Anche il testo reso usando questo font deve avere una struttura. Il caso d'uso è che voglio che il colore di sfondo del corpo su cui il testo è usato sia usato come chiave di trasparenza per applicazioni esterne, e vorrei che il testo fosse solido e nitido, senza alcuna levigatura. Questo è ciò che sembra in questo momento:Visualizzare i caratteri frastagliati usando HTML/CSS

Sto sviluppando un app utilizzando elettrone. Ho provato tutto da a font-smooth: never per il rendering del testo utilizzando una tela HTML5, ma non riesco a ottenere l'output desiderato, che è qualcosa esattamente come questo, che proviene da un'applicazione realizzata con C#:

Entrambe le immagini sono ingrandite del 1000%. È possibile utilizzare HTML/CSS? se no, qual è il più vicino che potrei ottenere?

fonte

2015-07-27 driima

http://stackoverflow.com/a/10538630/3285730 –

@JacobGray nessuna modifica. – driima

Quale browser/sistema operativo stai utilizzando? Potrebbe essere necessario provare qualcosa come '-webkit-font-smoothing: none' o' -moz-osx-font-smoothing: unset'. Vedi [qui] (http://caniuse.com/#feat=font-smooth) per maggiori informazioni. –

Questo è il più vicino possibile.

JSFiddle

h1 { 
font-family:'Press Start 2P', Arial; 
font-weight: 400; 
color: white; 
font-size: 30px; 
font-smoothing: antialiased; 
text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000, -8px -8px 0 black, 8px -8px 0 black, -8px 8px 0 black, 8px 8px 0 black; 
}

giocare con il text-shadow per ottenere risultati diversi. Fondamentalmente è possibile impilarli in base alle proprie esigenze. Ha sicuramente bisogno di qualche ritocco.

Un'altra buona domanda a questo proposito:

Modifica

Il carattere che ho usato è Premere Start 2P. È un carattere Google e lo puoi trovare here.

fonte

2015-07-28 23:43:38

Ho creato un [JSFiddle] (https://jsfiddle.net/ucu4o7sr/) in base al tuo, ma non sono sicuro che il rendering di una quantità così elevata di ombre possa causare ritardi o altro, ma questo è il risultato migliore che riesco a ottenere. Usando la lente di ingrandimento, c'è ancora una certa quantità di verde che appare attraverso il pixel in alto a sinistra dell'ombra del testo, ma è difficilmente percepibile. – driima

@Rouze Le prestazioni non dovrebbero rappresentare un problema, a meno che non si stiano attivando alcuni eventi che causerebbero la ripetizione e la ripetizione del browser delle ombre in un breve intervallo di tempo. –

Sto aggiornando la vista solo ogni 5 minuti circa, quindi suppongo che non importi molto. – driima

Visualizzare i caratteri frastagliati usando HTML/CSS

risposta

Problemi correlati