Perché c'è una differenza di carattere @ in altezza della linea su Windows e Mac OS X?

Question

Sono stato alla ricerca di una risposta per questo ora per ora senza fortuna.

Sto centrando il testo verticalmente all'interno della casella utilizzando la proprietà CSS "line-height". Funziona perfettamente con i caratteri di sicurezza standard e funziona anche per l'incorporamento dei caratteri "" @ font-face "" su Windows.

Su Mac, tuttavia, c'è un problema con questo centraggio usando "@ font-face". Vedi: http://cl.ly/QBlE/o

Non so cosa fare con questo. L'unico modo per risolvere questo problema è utilizzare un'altezza di riga diversa per Mac. Ma per quanto ne so, questo non è possibile senza JavaScript o programmazione lato server e non sembra essere la soluzione adeguata per me.

Esempio (casella blu in alto):

#header .login { 
    text-decoration:none; 
    margin:11px 9px 0 9px; 
    float:right; 
    font-size:11px; 
    color:#fff; 
    background:url(../img/header-login.png); 
    width:118px; 
    height:26px; 
    line-height:26px; 
    padding:0 0 0 10px; 
    text-transform:uppercase; 
    font-family: 'Helvetica55', Sans-Serif; 
} 

Answer 1

Invece di utilizzare diverse altezze di linea, provare a utilizzare la proprietà font-size-adjust con un valore di auto.

Dal W3C:

In situazioni in cui si verifica del carattere di ripiego, i caratteri di fallback non possono condividere le stesse proporzioni, come la famiglia di font desiderato e saranno quindi apparire meno leggibile. La proprietà font-size-adjust è un modo per preservare la leggibilità del testo quando si verifica il fallback del font. Lo fa regolando la dimensione del font in modo che l'altezza x sia la stessa indipendentemente dal font utilizzato.

Answer 2

Innanzitutto, provare a impostare l'altezza della linea da px a em.

Se ciò non funziona, potrebbe essere causato da stili di default diversi per ciascun browser. Questi stili predefiniti potrebbero creare problemi con i tuoi stili. Quindi prova a usare un reset.css nella tua pagina.

Answer 3

Il problema si trova probabilmente nel carattere utilizzato. Ogni carattere ha le proprie metriche e quando non ottimizzato correttamente possono differire da una piattaforma all'altra. Vedi http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/ per una spiegazione migliore di questo.

Si potrebbe provare a modificare il carattere te stesso utilizzando uno strumento come http://fontforge.org/. Questo non è facile e richiede prove ed errori per farlo bene. Potrebbe anche violare la licenza del font che stai utilizzando.

Il mio consiglio: scegliere un carattere che sia meglio ottimizzato per l'uso sul web. Prendi qualsiasi carattere da Typekit o simili e scommetto che ottieni risultati più coerenti.

Answer 4

Forse 'vertical-align:' può aiutare,

prega di consultare questo fiddle

questo spiegherà la differenza, penso che tutti i browser hanno un valore predefinito diverso,

qui ho creato 4 tag span diverso per mostrare il valore superiore, medio, inferiore e predefinito (non assegnato) del valore di allineamento verticale,

Si prega di modificare i valori se questo aiuta,

come si sta utilizzando le immagini del tasto, si prega di verificare l'immagine sono impostati con 0 0 cioè background:url(../img/header-login.png) no-repeat 0 0;

questo renderà l'immagine dal 0 a sinistra e 0 top che vi aiuterà a idnetify se e immagine non è correttamente generato ..

si prega di rispondere se il problema non è risolto ..

Answer 5

Dalla mia esperienza per il multi browser e multi-piattaforma web si dovrebbe davvero eliminare i pixel font e iniziare a utilizzare lo SME.

Ecco uno strumento tabella di conversione utile:

http://pxtoem.com/

farmi sapere se succede ancora con loro. Tieni presente anche che i diversi tipi di carattere hanno comportamenti diversi e che la dimensione predefinita (base) potrebbe essere diversa. Se vuoi assicurarti che abbia esattamente le stesse dimensioni, appart dal modo di usare 'em' dovresti anche usare un font openType e inserirlo nel tuo CSS, avendo esattamente lo stesso font e dimensioni in qualsiasi schermo o browser.

Answer 6

I sistemi operativi possono rendere i caratteri diversi modi. Si può iniziare dal basso e altri possono iniziare dall'alto come il loro algoritmo diverso. Se il problema fosse il CSS, non sarebbe risolto da un altro tipo di carattere.

ho trovato simile alla tua domanda l'un l'altro, è possibile controllare se funziona per la situazione: Mac vs. Windows Browser Font Height Rendering Issue