E 'possibile disattivare l'anti-aliasing in CSS quando si utilizza @ font-face con i caratteri di pixel?

StackOverflow https://stackoverflow.com/questions/1752752

  •  20-09-2019
  •  | 
  •  

Domanda

Voglio usare un font di pixel sul web. Sto compresi utilizzando @ font-face tuttavia tutti i browser stanno applicando anti-aliasing per il tipo di carattere. Io non riesco a trovare una regola CSS per disabilitare questa, chiunque può pensare ad un altro metodo di disattivazione anti-aliasing?

È stato utile?

Soluzione

il rendering dei font è fatto da parte del sistema operativo e del browser, così, a partire da ancora, credo che ci sia poco che si può fare con i CSS. Ci possono essere alcune regole CSS proposte in discussione (che ho visto menzione "font-liscia" o qualcosa del genere), ma nulla in CSS3, per quanto ne so, e sicuramente nulla in CSS2.

Altri suggerimenti

Questa domanda è vecchia, quindi volevo solo dare un aggiornamento.

In base a caniuse.com , c'è una proprietà CSS per esso, ma è stato rimosso dal le bozze delle specifiche CSS3. Quindi non è una soluzione standard. Alcuni browser Webkit, Firefox e Opera lo sostengono, ma è incoerente. Funziona soprattutto per desktop e gli utenti Mac OS

-webkit-font-smoothing: none || antialiased || subpixel-antialiased
-moz-osx-font-smoothing: auto || inherit || unset || grayscale
font-smoothing: auto || inherit || unset || grayscale

Non credo css ha un'opzione per l'anti-aliasing. Prova Cufon invece: https://github.com/sorccu/cufon/wiki/about

E 'abbastanza facile da usare e che renderà i font dei pixel molto bene. Si potrebbe anche essere interessati a Pxfon di Shaun Inman: http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon

La maggior parte dei tipi di carattere di pixel semplicemente non funzionerà correttamente se li utilizza su un formato 8pt multipla (8, 16, 24, ecc.)

Se si lavora su sbagliate di font-dimensioni si finisce per ottenere alias caratteri / nebbia.

Check this out ...

http://www.fontsquirrel.com/fonts/list/style/Pixel

... può essere utile;)

Ho avuto simile problema oggi e sembra che anche se font-liscio non funziona in Firefox contemporanea * l'aggiunta di qualche filtro fa:

filter: contrast(1);

Eppure sembra essere un po 'hacky per disabilitare l'anti-aliasing con filtro. Tra l'altro non causa disabilitare completamente anti-aliasing provoca solo di essere applicato in qualche modo diverso font così bitmap rendering correttamente. D'altra parte si rompe il rendering di caratteri non bitmap.

* Testato su Fixedsys da http://doir.ir/fixedsys/demo.html, su Iceweasel 38.40.0, su Debian 8.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top