font-variant: small-caps;
font-size: 12px;
Firefox:font-variant: small-cap; mostra diverse dimensioni dei caratteri che utilizzano Chrome o Firefox
Chrome:
Come armonizzarlo senza utilizzare JavaScript?
È possibile indirizzare i browser singolarmente utilizzando hack CSS in questo modo:
@-moz-document url-prefix() {
//firefox specific css here
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
//chrome specific css here - this will also hit other webkit browsers like safari tho
}
Un modo più bello tuttavia a mio parere comporta un po 'di javascript che rileva il browser e imposta una classe sull'elemento html e quindi puoi utilizzare quella classe come base per il targeting dei singoli browser.
alla fine sarebbe simile a questa:
<html class="firefox">
...
</html>
.firefox .rulename {
//firefox specific css here
}
e, naturalmente, lo stesso per Chrome e qualsiasi altra cosa del browser
Grazie, ma il problema è trovare il modo migliore per correggere la dimensione del font, non come rilevare il browser :) – Marin
Questo è il modo migliore, poiché non c'è altro modo :) –
Sto parlando del rendering di font-variant (la proporzionalità della dimensione delle lettere minuscole rispetto alle lettere maiuscole), non la dimensione del font. Dovrei semplicemente smettere di usare font-variant e aggiungere un per ogni lettera maiuscola? – Marin
Sto avendo un problema simile con un problema molto più strano tra Safari su iPad vs Safari su desktop, mostrando una scala diversa per small-cap a 16px. Per qualche ragione le small cap sono di dimensioni maggiori per gli iPad, un po 'come quelle di Firefox.
La regolazione della dimensione del carattere o della spaziatura delle lettere di mezzo pixel in meno, può mitigare il problema senza ulteriori modifiche. Trovando essenzialmente una piccola regolazione centrale che si attiva su un browser ma non su un altro, cerca di avvicinarti il più possibile.
Ciò che ho osservato per Firefox e IE, è che i caratteri tendono a scalare con molte più dimensioni intermedie rispetto a quelle di Webkit. Ad esempio, in IE e Firefox, 15.6px è un po 'più grande o usa più tracciamento per regolare, rispetto a 15.5px, e quindi è 15.7px, 15.8px ecc. Con una differenza di quasi ogni 0.1 pixel. Considerando che in Safari la differenza è percepita solo per ogni 0.4px o giù di lì.
Per il mio caso di maiuscoletto qui che ha creato un problema di overflow, ho usato 15.5px, che è a malapena diverso da 16px su Safari (desktop), ma ridurre le dimensioni small-cap per IE e Firefox il più vicino possibile a Safari's.
I browser Webkit visualizzano piccoli maiuscoletti più piccoli di altri browser. È possibile utilizzare le query multimediali CSS per individuare facilmente browser Webkit come Chrome e Safari. Prova qualcosa del genere:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
font-size: .85em
}
}
Un modo è utilizzare una famiglia di font che fornisce una variante small cap. A meno che non si usi un font di questo tipo, si è costretti a dover gestire la nozione propria del browser di cosa significhino i cap piccoli, perché ridimensiona i cappucci. –
Inoltre, una volta che si utilizzano i cappucci falsi, non mettere una campata "a tutta dimensione" intorno ai cappucci, inserire una campitura "di piccole dimensioni" attorno a lettere minuscole. Spazio bianco, punteggiatura e altri simboli dovrebbero rimanere a grandezza naturale. –
sembra che questo problema si approfondisca, di recente ho spostato il mio sito su un altro server e Chrome visualizza le lettere minuscole in diverse dimensioni a seconda del server che serve i file. Uno è Windows 7 con XAMPP, l'altro è Ubuntu con architettura LAMP. Il server Windows mostra le lettere minuscole 1px più grandi rispetto alla versione Linux. –