Livellamento e antialias dei caratteri Web in Firefox e Opera

Ho font web personalizzati utilizzati sul mio sito. Per modellare il mio output di rendering, ho usato il codice seguente:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

Funziona bene su Safari e Chrome (i bordi sono più nitidi e le linee sono più sottili). C'è un modo per implementare lo stesso stile su Firefox e Opera?

Poiché Opera è alimentato da Blink dalla versione 15.0 -webkit-font-smoothing: antialiasedfunziona anche su Opera.

Firefox ha finalmente aggiunto una proprietà per abilitare l'antialiasing in scala di grigi. Dopo una lunga discussione sarà disponibile nella versione 25 con un'altra sintassi, che fa notare che questa proprietà funziona solo su OS X.

-moz-osx-font-smoothing: grayscale;

Questo dovrebbe correggere i caratteri delle icone sfocate o il testo chiaro su sfondi scuri.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Puoi leggere il mio post sul rendering dei caratteri su OSX che include un mixin Sass per gestire entrambe le proprietà.

Bene, Firefox non supporta qualcosa del genere.

Nella pagina di riferimento da Mozilla specifica font-smoothcome proprietà CSS controlla l'applicazione dell'anti-aliasing quando i caratteri vengono renderizzati, ma questa proprietà è stata rimossa da questa specifica e attualmente non è nella traccia standard.

Questa proprietà è supportata solo nei browser Webkit.

Se vuoi un'alternativa puoi controllare questo:

• Antialiasing ombreggiatura testo | Philip Renich, Siti web - blog
• cufón - caratteri per le persone

Caso: testo chiaro con carattere web frastagliato su sfondo scuro Firefox (v35) / Windows
Esempio: Google Web Font Ruda

Soluzione sorprendente:
aggiunta della seguente proprietà ai selettori applicati:

selector {
    text-shadow: 0 0 0;
}

In realtà, il risultato è lo stesso solo con text-shadow: 0 0;, ma mi piace impostare esplicitamente il raggio di sfocatura.

Non è una soluzione universale, ma in alcuni casi potrebbe aiutare. Inoltre, finora non ho riscontrato (anche non testato a fondo) impatti negativi sulle prestazioni di questa soluzione.

Dopo aver riscontrato il problema, ho scoperto che il mio file WOFF non era stato eseguito correttamente, ho inviato un nuovo TTF a FontSquirrel che mi ha fornito un WOFF corretto che era fluido in Firefox senza aggiungere alcun CSS aggiuntivo.

Ho trovato la soluzione con questo link: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Metodo passo passo:

• invia il tuo font a un WebFontGenerator e ottieni lo zip
• trova il carattere TTF nel file Zip
• quindi, su linux, esegui questo comando (o installa da apt-get install ttfautohint):
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• quindi, ancora uno, invia il nuovo file TTF (neosansstd-black.changed.ttf) sul WebFontGenerator
• ottieni uno Zip perfetto con tutti i tuoi webfont!

Spero che questo ti possa aiutare.

... nel tag del corpo e questi dal contenuto e dal carattere tipografico hanno un aspetto migliore in generale ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

Quando il colore del testo è scuro, in Safari e Chrome, ho risultati migliori con la proprietà css text-stroke.

-webkit-text-stroke: 0.5px #000;

Aggiunta

font-weight: normal;

I caratteri @ font-face correggeranno l'aspetto in grassetto in Firefox.