sintassi abbreviata "font" : uso delle virgolette quando si definisce "font-family&qu

**myotis** · 13-12-2010, 14:37

Non so a quante persone possano interessare queste mie osservazioni ma vista la cura maniacale con cui sto studiando e lavorando sull'argomento forse non sono del tutto inutili, perlomeno non si tratta di "seghe mentali".

Riguardo la sintassi abbreviata "font", le specifiche W3C indicano che bisogna seguire il seguente ordine:

codice:

font-style font-variant font-weight font-size/line-height font-family

Quindi, per fare un esempio:

codice:

{ font: italic small-caps bold 120%/1.5em Arial, sans-serif; }

E fin qui tutto ok. Ho provato a scambiare l'ordine delle prime 3 proprietà ma fino a quando font-size e font-family sono rispettivamente la penultima e l'ultima proprietà sembra non ci sia alcun problema nè con IE8 nè con Firefox 3.6.13.
Ma non è qui che voglio arrivare.

Le solite specifiche indicano altresì che, qualora si utilizzi in "font-family" il nome di un font costituito da più parole
(es. Times New Roman, Trebuchet MS, ecc.), è necessario porre il nome del font tra virgolette, cosa che già avevo letto nella Guida CSS di Base.

Riporto a tal proposito cosa viene riportato nella Guida:

Anche in questo caso i nomi dei font costituiti da più parole vanno racchiusi tra virgolette.

codice:

p { font: bold 12px/1.5 Georgia, "Times New Roman", serif; }

Come potete vedere vengono indicate le virgolette doppie.

Ho quindi provato tale sintassi (uso Win7).

Risultato?
Sia su IE8 che su Firefox 3.6.13 se inserisco "Trebuchet MS" tra virgolette doppie non funziona e il browser visualizza il suo font standard, nel mio caso Times New Roman.
Se tolgo le virgolette nessun problema invece, il font viene visualizzato correttamente.

Perchè?
Perchè bisogna utilizzare le virgolette singole !!

codice:

font: oblique small-caps bold 150% 'Trebuchet MS', serif;

Provare per credere - eccovi il codice:

codice:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

	<head>

	<title>Sintassi abbreviata: font</title>

	</head>


<body>


<p style="font: oblique small-caps bold 150% "Trebuchet MS", serif;">

font: oblique small-caps bold 150% "Trebuchet MS", serif; - questo non funziona

</p>


<p style="font: oblique small-caps bold 150% Trebuchet MS, serif;">

font: oblique small-caps bold 150% Trebuchet MS, serif; - questo funziona ma non aderisce alle specifiche W3C

</p>


<p style="font: oblique small-caps bold 150% 'Trebuchet MS', serif;">

font: oblique small-caps bold 150% 'Trebuchet MS', serif; - questo funziona e aderisce alle specifiche W3C

</p>


</body>


</html>

Vedrete subito quali esempi funzionano e quali no.

In effetti se si leggono attentamente le specifiche W3C di font-family ci si accorge di questo:

Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

Un po' come accade in JavaScript, bisogna fare attenzione quando si inseriscono delle virgolette in una stringa di testo già delimitata da virgolette
(questa però è una mia personale osservazione e non è attinente all'argomento CSS).

Quindi la Guida CSS di base mi sembra fuorviante a tal proposito.

Spero possa essere utile a qualcuno.

**furbostandby** · 13-12-2010, 17:44

In effetti c'è un'imprecisione, che potrebbe mettere in difficoltà gli utenti alle prime armi.

Communque io ho sempre fatto senza gli apici e funziona lo stesso.

Ciao

**myotis** · 14-12-2010, 20:00

Originariamente inviato da furbostandby
In effetti c'è un'imprecisione, che potrebbe mettere in difficoltà gli utenti alle prime armi.

Communque io ho sempre fatto senza gli apici e funziona lo stesso.

Ciao

Ciao,

in effetti si, ho provato anch'io e anche senza gli apici (o virgolette singole) funziona correttamente, però non aderisce agli standard del W3C.
Alla fin fine non credo sia comunque un grosso problema (smentitemi pure) ma siccome tendo ad essere molto preciso fino ai limiti della pignoleria

ho voluto "spaccare il problema in due".

Ciao!

**furbostandby** · 15-12-2010, 16:07

Un attimo, però adesso ho notato che quello che hai citato tu si riferisce a font-family, e non a font.
Effettivamente se si prova la proprietà font-family accetta anche doppi apici su foglio di stile esterno, non è sbagliato.

**myotis** · 16-12-2010, 14:46

Originariamente inviato da furbostandby
Un attimo, però adesso ho notato che quello che hai citato tu si riferisce a font-family, e non a font.
Effettivamente se si prova la proprietà font-family accetta anche doppi apici su foglio di stile esterno, non è sbagliato.

No, scusa, forse mi sono spiegato male.

Le mie osservazioni riguardano la sintassi abbreviata "font", non ho provato con "font-family", anche se non credo che cambi molto.
Quello che ho sperimentato è semplicemente che se si usano virgolette doppie ci possono essere problemi, tutto qui.

codice:

{ font: bold 120%/1.5em "Times New Roman", serif; }

Poi, come dici tu, anche omettendo gli apici/virgolette il risultato visivo sul browser non cambia e funziona tutto bene.
Ma, se vai a vederti la pagina, le famose specifiche W3C consigliano di inserire virgolette singole:

codice:

{ font: bold 120%/1.5em 'Times New Roman', serif; }

A me questa soluzione piace di più e mi sembra più aderente agli standard, ma alla fine forse si tratta solo di gusti.

Ciao!

Discussione: sintassi abbreviata "font" : uso delle virgolette quando si definisce "font-family&qu

Strumenti discussione

Ricerca discussione

Visualizza

sintassi abbreviata "font" : uso delle virgolette quando si definisce "font-family&qu

Permessi di invio