CSS: @ font-face anti aliasing

Question

Sono un po 'in difficoltà con l'opzione CSS @ font-face. Dopo aver letto, provato e riprovato, ho finalmente trovato un sito Web che ti rende un pacchetto pronto all'uso quando carichi il tuo font. Ora è in esecuzione ma sembra che il carattere non abbia anti-alias. Mentre vedo succedere in altri siti web, il mio non rende le intestazioni come voglio io.

Il mio codice CSS:

@font-face { 
font-family: 'YanoneKaffeesatzThin'; 
src: url('../fonts/yanonekaffeesatzthin-webfont.eot'); 
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg'); 
font-weight: normal; 
font-style: normal;} 

Ciò che rimane da fare per rendere questo ultimo, ma anoying, problema andare via?

Answer 1

Con CSS3, è possibile utilizzare la proprietà font-smooth, sebbene l'antialias sarà ancora controllato dai valori predefiniti del sistema. Se è davvero necessario forzare un antialiasing pulito, indipendentemente dal sistema operativo, è necessario utilizzare sIFR che sostituisce automaticamente il testo con un componente Flash.

Answer 2

Vedi anche: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

Il succo è che l'aggiunta text-shadow: 0 0 1px rgba(0,0,0,0.3); dà l'apparenza di anti-aliasing.

Answer 3

Cufon e Typeface.js sono due soluzioni che aggregano e disinfettano molte delle soluzioni HTML5, CSS3 e JS discusse in questo thread.

Ognuno ha un convertitore che permette file di font (TTF, OTF, wotf) per essere convertiti in script che fare quello che stai cercando di fare - fornire qualsiasi tipo di carattere sul web, antialias.

Dei due, preferisco Cufon http://cufon.shoqolate.com/generate/

Answer 4

Solo una breve nota su una regola CSS non così comune per affrontare antialias.

-webkit-font-smoothing: antialiased; 

Si avrà una leggera variazione nel rendering dei caratteri per i browser Webkit. Generalmente il carattere appare più chiaro e sottile. Altri valori:

-webkit-font-smoothing: subpixel-antialiased; 
-webkit-font-smoothing: none; 

Una pagina dimostrativa: http://maxvoltar.com/sandbox/fontsmoothing/

non dimenticare https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

Answer 5

È necessario convertire sistema organizzato di negoziazione WOFF: - (! Opere)

---

sistema organizzato di negoziazione> WOFF

TTF -> OTF -> WOFF (Funziona!)

TTF -> WOFF (Non funziona antialiasing, comune errore nel Google Fonts)

---

1º) Scarica il OTF font version

1º alternativa) Se il carattere è diverso ed è TTF, convertire al sistema organizzato di negoziazione con https://everythingfonts.com/ttf-to-otf

2º) Convertire sistema organizzato di negoziazione WOFF https://everythingfonts.com/otf-to-woff

---

Utilizzare solo WOFF non EOT, SVG, WOFF2, ecc.