Grazie alla direttiva @font-face, infatti, possiamo usare i nostri font preferiti e servirli all’utente in un modo facile e veloce.
Con questa definizione ci si riferisce di solito ai font che l’utente può scaricare per visualizzare una pagina secondo le caratteristiche tipografiche fissate dall’autore nel foglio di stile.
Di norma un kit di font da usare con @font-face comprende la versione TrueType/OpenType, quella WOFF e quella EOT.
---
Esempio:
@font-face {
font-family: ' ArmWrestler' ;
src: url(' armwrestler-webfont.eot' ); /* per IE 5-8 */
src: local(' ?' ), /* direttiva local per IE */
url(' armwrestler-webfont.woff' ) format(' woff' ), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
url(' armwrestler-webfont.ttf' ) format(' truetype' ); /* Opera, Safari */
}
----
Con font-family assegniamo un nome al font; è il nome che useremo successivamente quando dichiareremo nel foglio di stile la font-family; possiamo assegnare qualunque nome, ma è sempre conveniente fare riferimento a quello ufficiale del font.
Subito dopo, con il primo src, definiamo l’URL del font in formato EOT per Internet Explorer 5-8.
Nella riga successiva definiamo un nuovo attributo src, usando prima di tutto la direttiva local tramite la quale facciamo in modo che IE non scarichi anche la versione TTF del font consumando inutilmente banda e allungando i tempi di caricamento della pagina. Nell’ultima versione della sua sintassi ottimizzata per @font-face, Paul Irish consiglia di assegnare come valore della direttiva local uno smiley (per inserirlo rapidamente da tastiera su Windows basterà usare la combinazione ALT + 1 del tastierino numerico).
Infine, impostiamo l’URL del font in formato WOFF e quello per il formato TrueTyp
Ora non ci resta che usare i nostri font nelle dichiarazioni CSS consuete. Nell’esempio abbiamo usato solo questa regola:
body {
font: 14px ArmWrestler,Verdana, Arial, sans-serif;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Font e testo - @font-face - </title>
<style type=" text/css" >
@font-face {
font-family: ' ArmWrestler' ;
src: url(' armwrestler-webfont.eot' ); /* per IE 5-8 */
src: local(' ' ?' ), /* direttiva local per IE */
url(' armwrestler-webfont.woff' ) format(' woff' ), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
url(' armwrestler-webfont.ttf' ) format(' truetype' ), /* Opera, Safari */
}
body {
font: 14px ArmWrestler,Verdana, Arial, sans-serif;
}
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
background-color: hsla(0,100%,100%,0.5);
}
</style>
</head>
<body>
<div id=" box1" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
