Sto usando google webfonts e vanno benissimo con caratteri di dimensioni molto grandi, ma a 18px sembrano orribili. Ho letto qua e là che ci sono soluzioni per smussare i caratteri, ma non ho trovato alcuno che lo spieghi chiaramente e i pochi frammenti che ho trovato non funzionano affatto.

Il mio h4sembra orribile in quasi tutti i browser, ma Chrome è il peggiore. In Chrome, praticamente tutti i miei caratteri sembrano terribili.

Qualcuno può indicarmi la giusta direzione? Forse conosci una risorsa che lo spiega chiaramente? Grazie!

SCHERMATA DI ESEMPIO N. 1

Questo screenshot mostra la homepage di https://www.dartlang.org/ , un linguaggio di programmazione creato da Google (quindi possiamo implicare che anche questo sito Web sia stato creato da Google) e utilizza Google Webfonts.

La schermata mostra Google Chrome a sinistra, Firefox / Internet Explorer a destra .:

ESEMPIO SCREENSHOT # 2

Questa schermata mostra una pagina di informazioni sul prodotto su Adobe.com, utilizzando i caratteri web forniti da Typekit. Adobe e Typekit sono professionisti quando si tratta di caratteri.

La schermata mostra Google Chrome a destra, Firefox / Internet Explorer a sinistra:

Stato del problema, giugno 2014: risolto con Chrome 37

Infine, il team di Chrome rilascerà una correzione per questo problema con Chrome 37 che sarà rilasciato al pubblico a luglio 2014. Vedi l'esempio di confronto tra l'attuale Chrome 35 stabile e l'ultimo Chrome 37 (anteprima di sviluppo iniziale) qui:

Stato del problema, dicembre 2013

1.) Non v'è NO soluzione adeguata quando i font vengono caricati @import, <link href=o Google webfont.js. Il problema è che Chrome richiede semplicemente file .woff dall'API di Google che rendono orribilmente. Sorprendentemente, tutti gli altri tipi di file di caratteri vengono visualizzati in modo splendido. Tuttavia, ci sono alcuni trucchi CSS che "livelleranno" un po 'il carattere renderizzato, troverai le soluzioni più profonde in questa risposta.

2.) Esiste una vera soluzione per questo quando si esegue l'hosting automatico dei caratteri, pubblicato per la prima volta da Jaime Fernandez in un'altra risposta su questa pagina StackOverflow, che risolve questo problema caricando i caratteri Web in un ordine speciale. Mi dispiacerebbe semplicemente copiare la sua eccellente risposta, quindi per favore dai un'occhiata qui. Esiste anche una soluzione (non dimostrata) che consiglia di utilizzare solo caratteri TTF / OTF poiché sono ora supportati da quasi tutti i browser.

3.) Il team di sviluppatori di Google Chrome lavora su quel problema. Dato che ci sono stati diversi enormi cambiamenti nel motore di rendering, c'è ovviamente qualcosa in corso.

Ho scritto un grande post sul blog su questo problema, sentiti libero di dare un'occhiata: Come risolvere il brutto rendering dei caratteri in Google Chrome

Esempi riproducibili

Guarda come appare oggi l'esempio della domanda iniziale, in Chrome 29:

ESEMPIO POSITIVO:

A sinistra: Firefox 23, a destra: Chrome 29

ESEMPIO POSITIVO:

In alto: Firefox 23, in basso: Chrome 29

ESEMPIO NEGATIVO: Chrome 30

ESEMPIO NEGATIVO: Chrome 29

Soluzione

Risolto lo screenshot sopra con -webkit-text-stroke:

La prima riga è predefinita, la seconda ha:

-webkit-text-stroke: 0.3px;

La terza fila ha:

-webkit-text-stroke: 0.6px;

Quindi, il modo di correggere quei caratteri è semplicemente darli

-webkit-text-stroke: 0.Xpx;

o la sintassi RGBa (di nezroy, trovata nei commenti! Grazie!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

C'è anche una possibilità obsoleta : dai al testo un'ombra (falsa) semplice:

text-shadow: #fff 0px 1px 1px;

Soluzione RGBa (trovata nel blog di Jasper Espejo):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

Ho pubblicato un post sul blog su questo:

Se vuoi essere aggiornato su questo problema, dai un'occhiata al corrispondente post sul blog: Come correggere il brutto rendering dei caratteri in Google Chrome . Pubblicherò notizie se ci sono notizie su questo.

La mia risposta originale:

Questo è un grosso bug in Google Chrome e il team di Google Chrome lo sa, vedi la segnalazione ufficiale dei bug qui . Attualmente, a maggio 2013, anche 11 mesi dopo la segnalazione del bug, non è stato risolto. È strano che l'unico browser che rovina Google Webfonts sia il browser Google (Chrome). Ma c'è una semplice soluzione che risolverà il problema, vedi sotto per la soluzione.

DICHIARAZIONE DEL TEAM DI SVILUPPO CROMATO DI GOOGLE, MAGGIO 2013

Dichiarazione ufficiale nei commenti del bug report:

Il nostro rendering dei font di Windows è in fase di elaborazione. ... Speriamo di avere qualcosa entro una pietra miliare o due con cui gli sviluppatori possano iniziare a giocare. La velocità con cui si stabilizza è, come sempre, tutta la velocità con cui possiamo sradicare e bruciare qualsiasi regressione.

Ho avuto lo stesso problema e ho trovato la soluzione in questo post di Sam Goddard ,

La soluzione se definire la chiamata al carattere due volte . Innanzitutto come si consiglia, da utilizzare per tutti i browser e dopo una determinata chiamata solo per Chrome con una query multimediale speciale:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

Con questo metodo il carattere sarà reso buono in tutti i browser. L'unico punto negativo che ho riscontrato è che il file del carattere viene scaricato anche due volte.

Puoi trovare una versione spagnola di questo articolo nella mia pagina

Chrome non esegue il rendering dei caratteri come Firefox o qualsiasi altro browser. Questo è generalmente un problema in Chrome in esecuzione solo su Windows. Se vuoi rendere più fluidi i caratteri, usa la -webkit-font-smoothingproprietà sui tuoi h4tag in questo modo.

h4 {
    -webkit-font-smoothing: antialiased;
}

Puoi anche usare subpixel-antialiased, questo ti darà diversi tipi di smussatura (rendendo il testo un po 'sfocato / ombreggiato). Tuttavia, avrai bisogno di una versione notturna per vedere gli effetti. Puoi saperne di più sul livellamento dei caratteri qui .

Ok puoi usarlo semplicemente

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Assicurati che il colore del testo e la larghezza del tratto di testo superiore debbano essere uguali e basta.

Dirò prima che non funzionerà sempre , l'ho provato con sans-seriffont e font esterni comeopen sans

A volte, quando si utilizzano caratteri enormi, provare ad avvicinarsi font-size:49pxe in alto

Questo è un testo di intestazione con una dimensione di 48 px ( font-size:48px;nell'elemento che contiene il testo).

Ma se aumenti la 48px a font-size:49px;(e 50px, 60px, 80px, ecc ...), succede qualcosa di interessante

Il testo diventa automaticamente fluido e sembra davvero buono

Per un altro lato ...

Se stai cercando caratteri piccoli, puoi provare questo, ma non è molto efficace.

Al genitore del testo, basta applicare la proprietà css successiva: -webkit-backface-visibility: hidden;

Puoi trasformare qualcosa del genere:

A questa:

(il carattere è Kreon)

Considera che quando non stai mettendo quella proprietà, -webkit-backface-visibility: visible;è ereditario

Ma fai attenzione , questa pratica non darà sempre buoni risultati, se vedi attentamente, Chrome rende il testo un po 'sfocato.

Un altro fatto interessante:

-webkit-backface-visibility: hidden;funzionerà anche quando trasformi un testo in Chrome (con la -webkit-transformproprietà, che include rotazioni, inclinazioni, ecc.)

Senza -webkit-backface-visibility: hidden;

Con -webkit-backface-visibility: hidden;

Bene, non so perché questa pratica funzioni, ma lo fa per me. Ci scusiamo per il mio strano inglese.