Il carattere viene visualizzato in modo diverso in Firefox rispetto a Chrome

Sembra che la mia barra dei menu sia visualizzata con un tipo di carattere diverso in Firefox rispetto a Chrome. Vedi quanto segue:

Ecco il CSS applicato a questo elemento:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

Per quanto ne so, tutto ciò che riguarda quel tipo di carattere è esattamente lo stesso, ma continuano a essere visualizzati diversamente (vedi foto). Perché?

Chrome utilizza il motore di rendering WebKit. Firefox utilizza il motore Gecko. Entrambi interpretano e visualizzano il tipo in modo leggermente diverso, così come i motori grafici DirectX e Vega utilizzati in IE9 + e Opera.

Non puoi forzare i browser a eseguire il rendering identico del testo, ma puoi fare un paio di cose per assicurarti che la tua navigazione occupi la stessa larghezza tra i browser:

1. Usa immagini o SVG invece di digitare per gli elementi della barra di navigazione. Ciò può rivelarsi utile se è improbabile che la tua area di navigazione cambi spesso. ad es. www.apple.com

2. Correggi la larghezza di ogni elemento di navigazione con CSS. La dimensione del testo apparirà comunque diversa tra i browser, ma se si assegna a ciascun <li>elemento nell'area di navigazione una larghezza di pixel fissa, il riquadro di delimitazione di ciascun collegamento sarà molto simile tra i browser e la larghezza totale dell'area di navigazione dovrebbe essere la stessa.

Le differenze nel rendering dei caratteri tra diversi browser (e su diversi sistemi operativi) è un dato di fatto. Devi solo assicurarti che se il carattere viene visualizzato a larghezze diverse il tuo design può ancora farcela.

Nel caso qualcuno dovesse imbattersi in questo, per me il problema era letter-spacing. Chrome e Firefox gestiscono la proprietà in modo diverso.

Il mio problema era che letter-spacingstava influenzando la posizione di altri elementi; in particolare alcune immagini nel menu di navigazione. Rimuovendo la proprietà il mio problema è stato immediatamente risolto.

Ho anche letto che l'uso specifico dei .pointvalori può avere effetti alteranti tra i 2 browser, il che era vero nel mio caso.

tipo di problema identificato qui

puoi resettare il tuo CSS da

http://developer.yahoo.com/yui/reset/ spero che tu non abbia qualche indizio

Ho scoperto che webkit supporterà px per la dimensione del carattere, ma per cose come la spaziatura tra lettere lo ignoreranno tutti insieme se non li usi.

Dopo aver testato 6 browser / 4 motori di rendering su due sistemi operativi. Ho scoperto che la maggior parte erano uguali anche con l'interlinea. Esaminerò la differenza con Windows e Linux tra un minuto.

Ho pensato che il font Palatino fosse disponibile ovunque, ma chrome è tornato ai tempi romani che è leggermente più piccolo, i font predefiniti hanno avuto gli stessi risultati (chrome different) che mi hanno fuorviato per un po '.

Ad ogni modo se si specifica times roman o si usa @fontface per fornire i file di font S! potresti essere in grado di rendere più taglienti le tue barre di navigazione ;-)

Ho avuto un problema simile e ho trovato una soluzione:

usando:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

In Firefox, sembra fantastico. In Chrome, la spaziatura delle lettere era strana. Rimuovere lo optimizelegibilitystile ha funzionato. Entrambi i browser vengono visualizzati in modo identico ora.

Ho deciso di rimuovere lo stile per il webkit e lasciarlo in posizione per altri browser. Adesso sta bene.

Ho avuto un problema simile con Open-Sans, questo è stato per me:

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