Caratteri Web di Google che sembrano instabili in Chrome - come applicare la correzione

Question

Questo è un problema generale e sembra che ci sia una soluzione. Il problema è che i caratteri web mostrano choppy in chrome. La soluzione dovrebbe essere quella di spostare la chiamata .svg prima della chiamata .woff. Spiegato qui: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome e qui: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Il problema è, che sto usando i font web di Google, e l'importazione del tipo di carattere in questo modo:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 

E non so, e non riesco a scoprire, come importalo con il tag css @font-face anziché sopra. Ho provato, ma sono rimasto bloccato dal momento che Google offre solo il carattere in ttf e non svg o woff.

Spero che tu possa aiutare.

Answer 1

Dovrete ospitare i caratteri da soli se volete applicare questa correzione.

Il collegamento Google Fonts è una richiesta per un foglio di stile, che viene generato dinamicamente in base ai parametri forniti dall'utente e al rilevamento del browser. Per il tuo esempio link:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 

Se effettivamente fare la richiesta da soli, usando curl:

$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic 

questo è ciò che viene inviato indietro:

@font-face { 
    font-family: 'Asap'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: italic; 
    font-weight: 400; 
    src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: italic; 
    font-weight: 700; 
    src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); 
} 

La cosa più semplice da fare è torna a Google Web Fonts, scarica il font in questione andando al here e facendo clic sulla freccia di download.

quindi è possibile utilizzare il suggested fix from here, riferimento ai file di font scaricati:

@font-face { 
font-family: ‘MyWebFont’; 
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), 
    url(‘webfont.svg#svgFontName’) format(‘svg’), 
    url(‘webfont.woff’) format(‘woff’), 
    url(‘webfont.ttf’) format(‘truetype’); 
} 

Answer 2

hai fatto un adeguato ripristino di tutti gli stili?

L'esperienza di rendering incoerente può essere causata dalle impostazioni predefinite del browser.

Un reset.css imposta tutti gli elementi di nuovo al default-valori, in questo modo le incongruenze cross-browser sono ridotti. Ci sono molti esempi per reset.css, uno dei più popolari è meyerweb reset css. Un altro modo per ridurre l'inconsistenza è usare normalize.css.

La differenza tra i due approcci in breve è, reset.css reimposta tutti gli stili specifici del browser mentre normalize.css ha un ambito più ampio creando i default del browser.

Le differenze tra entrambi sono spiegate dallo sviluppatore di normalize.css here.

Se tutti questi collegamenti non aiutano a garantire che il peso del carattere sia sempre corretto, è necessario importare tutti i pesi dei font necessari.

Qui è possibile leggere i pesi dei font qui: http://css-tricks.com/watch-your-font-weight/ Si dovrebbe applicare questa tecnica anche quando si utilizza normalize.ccs perché non ripristina il peso del font come fa il file rest.css.

Answer 3

aggiungere questo al tuo foglio di stile per ogni elemento.

opacity: .99; 

Per esempio -

p, li { 
    opacity: .99; 
} 

Non ho idea del perché questo funziona, ma lo ha fatto.