Font peso diventa più leggero su Mac/Safari

Sul mio sito web, il testo è perfetto, naturalmente, su chrome e firefox senza toccare font-smoothing o qualsiasi altra cosa.

Ma su Mac /Safari 7 il testo viene visualizzato bene, allora diventa immediatamente più sottile (troppo sottile /non è bello da leggere).
Font peso diventa più leggero su Mac/Safari
Font peso diventa più leggero su Mac/Safari

Dopo aver fatto alcune ricerche [cfr http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]

e alcuni test di giocare con

-webkit-font-smoothing    

Sembra che Safari visualizzare il testo con :

-webkit-font-smoothing: subpixel-antialiased;

Quindi solo dopo che si è ottenuto l’effetto di sfarfallio, quando si è svolta a carattere :

-webkit-font-smoothing: antialiased;

Così mi sembra che non avevo altra scelta, ma per forza

-webkit-font-smoothing: subpixel-antialiased;

per rendere il mio sito web è coerente su tutti i browser.

Io sto usando il font-face Avenir Std Romano.

Alcune spiegazioni che Safari problema ?
Altre soluzioni migliori ?
Potrebbe il mio carattere essere parte del problema ?

Grazie.

  • Secondo questa risposta qui, -webkit-font-smoothing non è più utilizzato. Stai dicendo che ha ancora un effetto in Safari?
  • Naturalmente è ancora utilizzato ! Effetto in tutti i browser webkit.
  • Ha ancora un effetto in Safari, oggi 🙂
InformationsquelleAutor migswd | 2014-01-22



6 Replies
  1. 76

    Così ho risolto il mio problema con l’applicazione di:

    body {
        -webkit-font-smoothing: subpixel-antialiased;
    }

    Ora il mio carattere è uniforme su ogni browser.

    • Sì, ma in questo modo il tuo carattere non è più prodotta con liscio sub pixel rendering. Prova a fare qualche test CON (impostazione predefinita) sub pixel rendering e impostare tutti di sfondo del div in carattere nero. Questo ha lavorato in molti dei miei casi. Anche sub pixel rendering è spento (e loro carattere diventa sottile) quando è acceso css -webkit-backface-visibility: hidden; in alcuni luoghi. In realtà il sub pixel font rendering di Safari è molto difficile e incoerente, ma È possibile in alcuni casi.
    • Questo ha risolto il mio problema di oggi, troppo — Safari non era il rendering di un Font di Google (Lato, 11px, 700 font-weight), di un FF o Chrome; infatti, Safari sembrava di non usare il grassetto per il testo a tutti. Il grigio su nero, testo sembrava essere una diversa tonalità di grigio, anche se non lo era. L’aggiunta di questa proprietà a mio CSS risolto le cose completamente.
    • Che non è una correzione, infatti, che colpisce il peso di tutti i font nel vostro sito anche se non avevano il problema. Che è solo pigro di codifica.
    • Anziché chiamare pigro, cosa proponi come soluzione?
    • se si utilizza l’opacità < 1 per il testo, quindi -webkit-font-smoothing: subpixel-antialiased; non funziona
    • Ho provato questo e non ha avuto alcun effetto.

  2. 9

    provare entrambi

    { -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-stroke:1px transparent;}
    • Impostazione della corsa, in realtà ha molto più effetto di sfocatura. In alcune zone questo è davvero grande. Grazie!
  3. 3

    Basta usare questo:
    link href=”https://fonts.googleapis.com/css?family=Lato:100,100i,300,300 i,400,400 mi,700,700 i,900,900 i”

    Invece di questo:
    link href=”https://fonts.googleapis.com/css?family=Lato”

    problema risolto per me in questo modo!

  4. 1

    Utilizzando -webkit-font-smoothing: subpixel-antialiased lavorato un po’, ma c’era ancora troppa differenza tra Safari, Chrome e Firefox. Ho capito cercando di rendere il carattere più spessa in Safari non stava andando a lavorare, e quindi ho fatto il tipo di carattere più leggero in altri browser e quindi è leggermente più spessa del carattere di peso. Quello che ha finito per normalizzare i font pesi di tutti i browser, per me, è questo:

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  5. 0

    Provare questo:

    transform: translateZ(0.1px);

    Webkit browser su Mac è un problema noto con antialiasing 2d e 3d di elementi di testo in modo diverso. Dando il 3d proprietà per l’elemento di solito risolve il problema.

  6. -10

    la verità è che la soluzione a questo problema (fino a quando apple risolvere questo problema) è molto semplice.
    Creare un file css (esempio.css) e all’interno inserire questo:

    * { -webkit-font-smoothing:subpixel-antialiased;}

    Poi andare a Safari > Preferenze > Avanzate > Foglio di Stile clic su di esso e selezionare il file css che abbiamo appena creato. Riavviare Safari.

    TADA!! Problema risolto. Per ora

    • Motivo per downvote questa procedura vale solo per gli utenti che sanno fare questo, che probabilmente è limitato agli utenti che a) avviso c’è un problema (nel senso che la visualizzazione di pagine in più browser contemporaneamente) o b), sono gli sviluppatori web che notare il problema. Questo non è un fix per lo sviluppo di un sito che viene visualizzato in modo coerente attraverso i browser e le piattaforme per la maggior parte degli utenti.

Lascia un commento