La dimensione dei caratteri CSS cambia quando la famiglia dei font ritorna indietro

Question

Voglio usare un font (gill sans) che rende molto piccolo a causa di una breve altezza x ecc. Ecc. Se lo imposto a dimensioni ragionevoli, e poi un browser ritorna a un carattere più tipico che ho specificato nella famiglia di font, il font di fallback è molto grande - posso impostare la dimensione del font in base al carattere che il browser sta usando?

Answer 1

Si consiglia di provare e specificare caratteri a cascata che si degradano con garbo quando i caratteri non sono disponibili, ad es.

Arial, FontThatsLikeArial, FontThatsALittleLikeArial, FontThatsALittleLessLikeArial, Sans-serif; 

In alternativa, se si desidera uno stretto controllo sui propri font, dare un'occhiata un Cufon, che non richiede gli utenti dispongono di alcun plug-in e funziona sulla maggior parte dei browser moderni. http://wiki.github.com/sorccu/cufon/about

Answer 2

È possibile specificare un font-size nel selettore corpo e quindi di neutralizzare dimensione predefinita del browser, cioè

body { font-size: 62.5%; } 

62,5% è una buona base perché permette di utilizzare facilmente SME relativamente impostare il dimensione del carattere degli elementi nel corpo.

Al 62,5%, 1em = 10px, 1,2em = 12px e così via.

Basta impostare una dimensione del carattere nel corpo come elementi di base e di stile di conseguenza.

Answer 3

posso impostare la dimensione del carattere in base al tipo di carattere utilizzato dal browser?

Sfortunatamente no, non in CSS.

Answer 4

Si consiglia di utilizzare tipi di carattere tipici che si trovano sulla maggior parte (/ tutti) i computer che accedono al sito Web che si sta creando. La visualizzazione di un sito Web non dovrebbe differire a causa del browser (i problemi relativi a IE sono un altro argomento ...). Utilizza font comuni o alternative che funzionano in modo simile ...

Answer 5

C'è stato un interessante articolo scritto alcune settimane fa che affronta questo argomento.

Potete leggere l'articolo qui: http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/

In breve, l'articolo sta utilizzando alcuni metodi ... @ font-face per i browser modernizzate, uno script di rilevamento di carattere jQuery, e Cufon per la sostituzione del carattere, se prima i metodi falliscono

Questa non è una soluzione perfetta. E come molti hanno detto sopra, la cosa migliore è usare un font che degrada con grazia.

provare a impostare il vostro font-stack a qualcosa di simile 'GillSans, Calibri, Trebuchet, sans-serif' - per il paragrafo copiare o 'GillSans, Trebuchet, Calibri, sans-serif' - per i titoli e intestazioni

Answer 6

Ho avuto lo stesso problema con Calibri (leggermente più piccolo rispetto alla maggior parte dei caratteri sans).Ho finito per fare la seguente (si presuppone jquery):

1. Get script di rilevamento del carattere di Remy Sharp http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

2. Aggiungere il seguente alla funzione $(document).ready():

   $(document).ready(function() { 
       font.setup(); 
       if(!font.isInstalled('Calibri')) 
        $('body').css('font-size','87.5%'); 
   }); 
   

Quindi ora se l'utente non ha Calibri vediamo Arial all'87,5%. Questo si applicava solo agli elementi in cui la dimensione del font non era definita/ereditata. Ovunque font-size è esplicitamente definito dovrà essere regolato così (magari aggiungere una classe a quegli elementi e cambiare il selettore jQuery per $('.adjustClass'))

sarebbe bello se si potesse fare solo:. font:11px Calibri, 10px Arial; - ma nessuna tale fortuna :)