• S
    User Newbie •

    Problema font raleway

    Ciao a tutti
    come da titolo ho un problema con il font Raleway (google.com/fonts/specimen/Raleway) e il browser Chrome.
    Il font non sembra ben definito mostrando un fastidioso effetto pixellato (come Photoshop senza antialias)
    Ho notato questo problema anche su alcuni temi su themeforrest vedi: themeforest.net/item/ether-creative-buisness-portfolio-template/full_screen_preview/8185992. Notare che il difetto si vede meglio su sfondo nero e testo bianco 🙂

    Ho fatto varie ricerche e googlando ho trovato soluzioni del tipo -moz-osx-font-smoothing: grayscale; o tex-shadow ma non vedo miglioramenti sostanziali...

    Qualcuno ha idea di come risolvere il problema?

    0
  • W
    User Newbie •

    Ciao, mi sa che ci ha pensato Google 😉
    Il problema che riscontri è su Chrome per Windows?

    Se così, è un problema noto agli sviluppatori di Chrome e dovrebbe riguardare molti font (non solo l’ottimo Raleway – piace molto anche a me). Sembra che con la versione 37 (uscita in beta pochi giorni fa: blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html) l’annoso problema sia finalmente risolto poiché hanno cambiato il motore di rendering.
    Fin ora le tecniche usate per ovviare al problema erano più o meno di due tipi.
    Tecniche valide solo nel caso di web font self-hosted riguardanti il comando @font-face.
    Ad esempio:

    1. usando solo EOT e TTF (no SVG, no WOFF) - Pablo Carrau
    2. caricando nell'ordine EOT,WOFF,TTF,SVG e poi ricaricando SVG sotto media query - Jaime Fernandez
    3. caricando in questo ordine: EOT,SVG,WOFF,TTF – Fontspring
      Oppure, per i font ospitati su siti di terze parti, si cercava di migliorare la resa con alcune proprietà CSS come text-stroke, text-shadow, font-smoothing.
      Trovi molto bene spiegato qui: stackoverflow.com/questions/11487427/is-there-any-font-smoothing-in-google-chrome.

    Nel frattempo se hai la versione di Chrome inferiore alla 37, puoi fare dei test.
    Se ti va, prova questo che ho allestito su jsfiddle.net/webmatter/QK2Np/ con text-stroke e text-shadow su nero o su bianco con font Raleway a vari pesi. Sembra incidere molto anche la dimensione del font oltre al contrasto con lo sfondo.
    Occorre trovare una tecnica/combinazione di colori, spessori, sfumature per ciascun caso mi sa. Se trovi qualcosa che ti soddisfa mi piacerebbe saperlo.

    0
  • S
    User Newbie •

    Ciao grazie per la risposta dettagliata e chiarissima.
    Comunque si è Chrome per Windows che massacra un font elegante come Raleway 🙂

    Sinceramente ho provato alcune delle tecniche css per migliorare la resa ma non ho ottenuto risultati significativi...

    Comunque ti ringrazio ancora per tutti i dettagli riportati, ti aggiorno dopo che avrò fatto tutti i test necessari
    a presto

    0
Effettua l'accesso per rispondere