Fino adesso, si poteva specificare un carattere (proprietà css font-family) solo con un nome specifico (es: arial, verdana…)o di una famiglia generica (es: serif), font comuni pre-installati con la maggiorità dei sistemi operativi.
Un nuovo modulo dei CSS3 è il Web Fonts in quale possiamo trovare la proprietà @font-face.
Anche se questa proprietà CSS faceva parte delle specifiche CSS2, solo adesso con lo sviluppo dei CSS3, il suo supporto dai browser ha iniziato ad essere preso in considerazione.
Per quella ragione è considerata da tanti come una nuova proprietà CSS3.
Il @font-face permette di visualizzare un font ‘non-comune’ nella pagina.
L’idea è che grazie al @font-face, si può specificare un url ad un font che sarà scaricato e installato per renderlo disponibile a l’uso nella pagina.
Al momento, il @font-face è supportato da Safari3.1+ e Firefox3.5+ (Aggiornato in Maggio 2009).
Inizierò per trovarmi un font decorativo che carico sul mio server.
Attenzione: ai copyright prima di scegliere un font e al peso del font stesso
Per quest’esempio, ho scelto il font ‘El Diablo’ creato da Derek Clark.
Nel CSS, creo una nuova famiglia di font e richiamo l’url usando, appunto, la proprietà @font-face in questa maniera:
@font-face{
font-family: ‘Eldiablo’;
src: url(’/eldiablo.ttf’);
}
font-family: descrizione del font (per logica il suo nome)
src: url al font
Cosi facendo, rendo il font disponibile a l’uso nella mia pagina HTML per un qualsiasi elemento.
Applicherò questo font ad un titolo/elemento <h1> usando il nome del font-family.
Aggiungo la regola css:
h1 {
font-family: ‘Eldiablo’;
}
L’HTML usato completo di css:
<head>
<title>CSS3 web fonts</title>
<style type="text/css">
@font-face{
font-family: ‘Eldiablo’;
src: url(’/eldiablo.ttf’);
}
h1 {
font-family: ‘Eldiablo’;
}
</style>
</head>
<body>
<h1>Font Face</h1>
</body>
L’immagine di preview del font:
Il risultato della prova di @font-face:
font face
Dopo varie prove (come detto prima) la proprietà @font-face funziona solo su Safari 3.1 (ultima versione attuale).
Una cosa da notare: la versione Safari3.1 per Windows richiede un URL di tipo assoluto.
@font-face{
font-family: ‘Eldiablo’;
src: url(’http://www.onsitus.it/css3/web-fonts/eldiablo.ttf’);
}
Ho creato una pagina di prova con differenti caratteri con un immagine di preview del font seguito dell’esempio usando la proprietà css3 @font-face.
Guarda la pagina di prova per il font-face >>
Ultimo aggiornamento Maggio 2009: compatibile con Firefox3.5+
{ 2 trackbacks }
{ 4 comments… read them below or add one }
Hi!
I want to extend my SQL capabilities.
I red so many SQL books and would like to
read more about SQL for my occupation as db2 database manager.
What can you recommend?
Thanks,
Werutz
How are you ?
The interesting name of a site - css.flepstudio.org
I at night 5 hours
looked in a network So I have found your site
The interesting site but does not suffice several sections!
However this section is very necessary!
I have added you in elected!
Forgive I is drunk :))
Well, I wish you a good hangover then
and thanks for the visit.
Keep coming back.;)
Peccato che sia una tecnologia ancora poco accessibbile. Avete mai sentito parlare della tecnologia sIFR ??