font-size diversi per font diversi

[andreaaloi]

Buona domenica a tutto il forum!
Il mio quesito è piuttosto semplice: siccome a parità di font-size alcuni font risultano essere più piccoli di altri, vorrei poter impostare, per ogni font "alternativa" di un dato elemento, la dimensione "alternativa". Mi spiego meglio:

p.banner
{
font-family:Kunstler Script,Verdana;
font-size:50pt;
}

Scrivendo questo nel mio CSS, se l'utente possiede il carattere "Kunstler Script" vedrà il logo del mio sito scritto in tale carattere, a dimensione 50pt, per un'altezza di circa una sessantina di pixel. Tuttavia, se l'utente non possiede "Kunstler Script", il banner si vedrà in Verdana 50pt, che è mooooolto più grande (e soprattutto più largo!). Siccome ho progettato il mio sito al pixel, e siccome il banner in questione risiede in un frame di dimensioni fisse, capirete che m'interessa che il banner, sia esso visualizzato in "Kunstler Script" o in "Verdana", non sfori in altezza o in larghezza. Di qui la necessità di porre una condizione del tipo: "se usi Kunstler Script, il font-size deve essere di 50pt; se usi Verdana il font-size deve essere di 30pt".
Non sono molto esperto di CSS, qualcuno sa se la cosa è fattibile?
Ringrazio anticipatamente!

Andrea

[dandyna]

perché non fai il banner col logo in una immagine? così non c'è il problema del font.

[Ugly Mau]

Purtroppo non è fattibile, non puoi impostare una dimensione per un carattere "principale" e quelli sostitutivi.
Ancora meno mettere del "condizioni", il CSS non è un linguaggio di scripting



oaiC

[andreaaloi]

Per Dandyna: il banner sarebbe la cosa più semplice ed immediata, quindi... la scarto!
Adoro complicarmi la vita...

Per Ugly Mau:
> Ancora meno mettere del "condizioni", il CSS non è un linguaggio di scripting

Grande! Seppur inconsciamente, mi hai dato un preziosissimo spunto: lo scripting! Lo so che qui si parla di CSS, ma permettetemi un piccolo OT per spiegare come ho risolto:

p.banner
{
font-family:Kunstler Script,Verdana;
}

poi, nella pagina:

<script language="javascript">
var fSize;
if (document.all) fSize='50pt';
else fSize='30pt';
document.write('<p class="banner" style="font-size:'+fSize+';">Banner</p>');
</script>

La spiegazione: "if (document.all)" serve per testare se il browser dell'utente è Internet Explorer 4+; in tal caso si imposta la stringa "fSize" a '50pt', altrimenti a '30pt'. Poi si effettua un document.write() aggiungendo allo stile di classe "banner" la dimensione contenuta in fSize. Direte voi: cosa c'entra il browser? Non era una questione di font? In effetti lo è, ma Internet Explorer, a differenza di Netscape, sa interpretare gli embedded fonts che si possono creare con Microsoft WEFT (per chi fosse interessato, buona lettura: http://www.microsoft.com/typography/...g/default.aspx) quindi se l'utente sta usando IE, sono sicuro che vedrà il banner in font Kunstler Script, e quindi lo stampo a schermo a dimensione 50pt. Altrimenti l'utente ha Netscape, dunque non vedrà il carattere Kunstler Script (a meno che non ce l'abbia installato sul proprio PC) bensì Verdana, quindi basta una dimensione di 30pt. Se l'utente, oltre ad avere Netscape, possiede anche il font Kunstler Script, lo visualizzerà a dimensione 30pt. Pazienza. In ogni caso non sfora dai bordi del frame, che ha un'altezza sufficiente per poter tranquillamente contenere un banner in Kunstler Script 50pt.
Spero che questo thread possa essere d'interesse per qualcuno!

Andrea

[Ugly Mau]

Non so se ho capito bene quello che ti serve...

Ma se il problema era impostare una dimensione diversa per IE, potevi fare:

font-size: 30pt !important;
font-size: 50pt;

IE non riconosce il "!important" mentre i browsers si*
E' anche una soluzione validabile W3C




* battuta sarcastica visto che odio IE


oaiC

[andreaaloi]

Mmm, interessante, non lo sapevo di questo comando !important, a cosa servirebbe in realtà (oltre a creare una distinzione tra i browser e i non-browser )?
Comunque sì, hai capito: chi ha IE probabilmente visualizzerà il font "Kunstler Script" (grazie a Microsoft WEFT, una tecnologia sviluppata per i non-browser) e quindi voglio che lo veda di dimensione 50pt; chi, al contrario, usa un browser, vedrà il testo in font Verdana, e quindi deve visualizzarlo di dimensione 30pt (perché Verdana è intrinsecamente più grande e largo, a parità di dimensione, di "Kunstler Script"). Chi, infine, è così sfigato da avere Netscape e "Kunstler Script", vedrà il banner in "Kunstler Script", 30pt.
Un dubbio: ma dichiarando il css così

p.banner
{
font-family:Kunstler Script,Verdana;
font-size: 30pt !important;
font-size: 50pt;
}

non c'è il rischio che "valga" l'ultimo valore di font-size impostato (quindi in questo caso 50pt), e che entrambi NS e IE utilizzino 50pt per il paragrafo di classe "banner"?
Grazie per le dritte!

Andrea

[Ugly Mau]

"!importat" sta a indicare che la definizione ha la priorità rispetto alle altre, anche se è definita una seconda molta (una seconda volta senza !important si intende)

IE non riconosce !important, quindi è come se non ci fossi, prende sempre l'ultima definizione

Però non vorrei che nel prossimo IE7 venga risolto questo bug, non so se questa soluzione vada bene al caso tuo...

oaiC