Proprieta' Font-Weight: solo un browser la supporta

La proprieta’ CSS 1 font-weight e’ usata per mostrare un carattere in grassetto oppure in maniera regolare. Il codice e’ quello che conosciamo: font-weight:bold e font-weight:normal. Ma le possibili varianti sono molto piu’ di due: ci sono Ultralight, Extralight, Light, Thin, Medium, Book, Semibold, Demibold, Extra-bold, Heavy, Black, Extra-black, Ultra-black, e altre ancora.

Fin dal 1996, i CSS prevedevano di mostrare queste ulteriori opzioni attraverso un valore numerico assegnato a font-weight. questa proprieta’ e’ ancora ignorata da tutti browser ad eccezione di Firefox 3 su Mac OS.

Come dovrebbe funzionare

Oltre a normal e bold, font-weight accetta valori numerici come 100, 200, fino a 900. Questi numeri coprono la scala che va da Ultra-light a Ultra-black, con normal uguale a 400 e bold uguale a 700. Quindi per specificare Light dovremmo scrivere font-weight:200. Ecco una guida piuttosto approssimativa che collega i valori ai nomi:

La scala numerica e’ approssimativa, non c’e’ nessuna definizione ufficiale a tal proposito (decide il produttore del carattere se definirlo Heavy piuttosto che Black).

Cosa accade realmente

Abbiamo una  pagina di prova che usa Myriad Pro, visto che ha molte varianti. Qui abbiamo Light, Regular, Semibold, Bold e Black. Se non avete Myriad Pro installato, vedrete solamente un font monospaced, ma e’ possibile scaricare la pagina di prova e modificarla a piacere con qualunque altro font. Il codice utilizzato e’ piu’ o meno questo:

#one { font-weight:100 }
#two { font-weight:200 } ...
#nine {font-weight:900 }

<p id="one">100 why pangolins dream of quiche</p>
<p id="two">200 why pangolins dream of quiche</p> ...
<p id="nine">900 why pangolins dream of quiche</p>

Firefox 3 su Mac OS renderizza il font come segue:

Firefox 3/Ma OSc: rendering corretto

Come possiamo vedere,  100, 200 e 300 vengono renderizzati come Light, 400 e 500 come Regular, 600 in Semibold, 700 in Bold, e 800 e 900 come Black. Questo e’ il comportamento corretto.

Safari 3.2, Opera 10.00 Alpha, Firefox 3.0 su Windows, e Internet Explorer 8 Beta 2 cadono in errore, anche se ognuno in maniera diversa.

Safari 3.2: 100–500 renderizzato come Regular, 600–900 in Semibold

Opera 10 Alpha: 100–500 renderizzato come Regular, 600–900 in Bold

Firefox 3/Win: 100–500 renderizzato come Regular, 600–900 in Semibold

IE8 Beta 2: 100–500 renderizzato come Regular, 600 in Bold, 700–900 in Semibold

La maggior parte di questi browser supporta parzialmente un valore numerico ma limitatamente a Regular e/o Bold o Semibold.

Un trucco

C’e’ un trucco per aggirare l’ostacolo. Seguendo la guida di Guillermo Esteves, aggiungiamo il nome di alcune famiglie di font. Myriad Pro, usato nel test, ha due nomi per ogni tipo: il nome a schermo, per esempio. Myriad Pro Light e il nome PostScript, per esempio MyriadPro-Light (per visuallizzare i nomi, usiamo uno strumento di management dei font come FontExplorer X). Per far renderizzare bene il font a Opera, IE8, Firefox 2 eFirefox 3/Win, abbiamo bisogno di specificare il suo screen name. Quindi modifichiamo il codice usato nel test:

#one {
  font-weight:100;
  font-family:"Myriad Pro Light", "Myriad Pro"; }

Anche cosi’, non funziona in Safari: il browser di Cupertino ha bisogno del nome PostScript. Quindi il nostro stile va modificato ulteriormente, come possiamo vedere nel nuovo test:

#one {
  font-weight:100;
  font-family:"MyriadPro-Light", "Myriad Pro Light",
    "Myriad Pro"; }

Ci sono parecchi svantaggi usando questo trucco. Il primo e’ chiaramente che dobbiamo specificare almeno tre font-families solo per cambiare la proprieta’ font-weight, ma il principale e’ che font-weight non funzionera’  (ad esclusione di Firefox 3/Mac) quando la famiglia che specifichiamo contiene una sola proprieta’  (font-weight:100; font-family:"MyriadPro-Light", "Myriad Pro Light", "Myriad Pro";). Quindi se abbiamo bisogno una parola in Bold all’ interno di un paragrafo scritto in Light, dovremo specificare di nuovo quale e’  la font-family e il font-weight. Non e’ molto pratico.

La cosa triste e’ che questo bug non e’ stato ancora risolto dopo 13 anni, e che a prescindere dal successo che ottengono nell’ Acid test, questi browser non possono affermare neanche di supportare i CSS  1 correttamente. Speriamo di vedere presto un cambiamento (apparentemente gia’ presente in WebKit). Se Firefox 3/Mac ci riesce non vedo perchè gli altri non possano.

Tradotto con l’esplicito consenso dell’autore.