2010-11-07 15 views
7

Sto utilizzando uno dei nuovi font google api per un'intestazione su un sito. È Yannone Kaffeesatz ed è piuttosto un carattere tipografico condensato.Regola la dimensione del carattere a seconda del font utilizzato da una pila di font

mio stack del carattere è la seguente:

font-family: 'Yanone Kaffeesatz', arial, serif; 

Questo va bene quando il carattere YANNONE Kaffeesatz rende, ma se non lo fa, Arial è molto più aperto e il titolo si estende su due righe.

La mia domanda è:

E 'possibile utilizzare un diverso font-size a seconda di quale tipo di carattere è reso sulla pagina?

Idealmente supportato su una moltitudine di browser.

Grazie

Tom

+0

Questa è una vittima, ma non riesco a trovare l'originale –

+1

È possibile aggiungere server di rilevamento user agent base, e poi servire una pagina diversa (o solo CSS). IMO questa è l'unica soluzione alquanto elegante. Google ha un elenco di browser e versioni che sono garantiti per funzionare. Se si tratta principalmente di testo statico, puoi semplicemente usare un PNG. –

+0

Il duplicato originale è probabilmente questo: [Modifica corpo dimensione carattere sulla base di Font-famiglia con jQuery] (http://stackoverflow.com/questions/1271477/changing-body-font-size-based-on-font- family-with-jquery) – Lode

risposta

4

No, questo non è possibile. È complesso e difficile trovare il vero font utilizzato da un elenco font-family anche in JavaScript: è impossibile in puro CSS.

Se si desidera percorrere il percorso JavaScript, here è un collegamento a un metodo intelligente per rilevare l'effettiva famiglia di caratteri in JavaScript.

Una volta compreso il carattere utilizzato, è facile regolare element.style.letterSpacing nella quantità richiesta.

+0

Grazie per la risposta. ho avuto la sensazione che questo era il caso. Potrei dover ripensare al mio stack. Avrei potuto fare qualcosa con un overflow o forse consentirne l'esecuzione con grazia su più righe. –

0

Una proprietà che modifica leggermente la dimensione del carattere in base al tipo di carattere è . È CSS3, supportato solo da Firefox.

Ma non penso che tu voglia modificare le dimensioni tanto quanto le proporzioni, rendendo Arial stretto. Spremere un carattere (ad esempio la spaziatura delle lettere) diventa brutto veloce. Invece, dovresti iniziare con più font condensati nel tuo stack.

http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html studia le opzioni di carattere condensato in dettaglio. Uno dei risultati più complicati è font-stretch: condensed che ad es. aiuta ad accedere per es. Arial Narrow su Windows (con Office).

Problemi correlati