|
- Download automatico di font tramite
CSS cross-browser -
|
|||
| COSA SERVE PER QUESTO TUTORIAL | |||
| Download | Chiedi sul FORUM | Glossario | cognizioni basiche di CSS e HTML | ||
| Come funziona la direttiva @font-face sui vari browser | |||
L'ORIGINE DEL PROBLEMA E IL SUPPORTO Download dei caratteri secondo gli standard e i vari browser.
Ogni web designer prima o poi nella sua vita ha sognato di poter
includere nelle proprie pagine web un font che non faccia parte dei
classici disponibili di default sui vari computer. Ebbene, la versione
2.0 dello standard CSS del W3C prevedeva la possibilità di definire
famiglie di font personalizzate aggiungendo un riferimento ad un file
che contenesse il font in questione. Tuttavia nella successiva versione 2.1 questa feature è stata rimossa per essere poi definitivamente reintrodotta con
la 3.0. Creare una famiglia di font sui browser maggiormente compatibili con gli standard. Come abbiamo detto, per utilizzare un font personalizzato dobbiamo in sostanza definire una nuova font-family, alla quale poi ci potremo riferire come qualsiasi altra nel resto del CSS. La sintassi per fare questo è la seguente:
@font-face {
font-family: waver;
src: url("waver.ttf") format("truetype");
}
In questa maniera abbiamo creato una nuova famiglia di font chiamata waver, che fa riferimento al file waver.ttf (nella cartella corrente) di formato TrueType. Quindi per riferirci ad essa sarà sufficiente utilizzare il seguente codice:
div#title {
font-family: waver;
}
Si tenga presente che Firefox non permette di scaricare font da altri domini, poiché è considerata una tecnica di cross-site scripting. EMBEDDED OPENTYPE E INTERNET EXPLORERCome convertire TTF in EOT. Internet Explorer non supporta i file TrueType o OpenType ma richiede un apposito formato: l'Embedded OpenType (estensione EOT). Questi font possono essere creati grazie ad uno strumento di conversione rilasciato gratuitamente da Microsoft chiamato Web Embedding Fonts Tool (WEFT). WEFT tuttavia è un software molto invasivo in quanto tenta di imporre la modifica della pagina HTML in cui si vuole inserire il font (con risultati insoddisfacenti e inattesi) mentre invece sarebbe auspicabile avere un piccolo tool da linea di comando che permetta la conversione senza difficoltà. Per questo è nato ttf2eot (incluso anche nell'allegato a questo documento), un semplice comando disponibile per Windows e sistemi UNIX che effettua la conversione senza problemi. Vediamone come richiamarlo, una volta estratto dall'archivio: ttf2eot c:\fonts\waver.ttf c:\fonts\waver.eot Quindi aggiungiamo una direttiva @font-face specifica per IE nel nostro CSS:
@font-face {
font-family: waver;
src: url("waver.eot");
}
Si badi, di non specificare format, in quanto non è supportato da Internet Explorer. Questo è sufficiente: mettere due direttive, una per IE e una per gli altri browser non creerà problemi, in quanto ognuno ignorerà la versione non supportata, ammesso che la definizione per IE venga prima. Riportiamo infine una semplice pagina di esempio:
<html>
<head>
<title>Test font personalizzato</title>
<style type="text/css">
@font-face {
font-family: waver;
src: url(waver.eot);
}
@font-face {
font-family: waver;
src: url(waver.ttf) format("truetype");
}
div#title {
font-family: waver;
}
</style>
</head>
<body>
<div id="title">Titolo</div>
<div>Altro testo normale</div>
</body>
</html>
Se si vuole avere la certezza di non avere conflitti tra la versione del codice per IE e quella per gli altri browser servirsi dei commenti condizionali:
<html>
<head>
<title>Test font personalizzato</title>
<!--[if IE]>
<style type="text/css">
@font-face {
font-family: waver;
src: url(waver.eot);
}
</style>
<![endif]-->
<style type="text/css">
@font-face {
font-family: waver;
src: url(waver.ttf) format("truetype");
}
div#title {
font-family: waver;
}
</style>
</head>
<body>
<div id="title">Titolo</div>
<div>Altro testo normale</div>
</body>
</html>
|
|||
| << INDIETRO | by VeNoM00 | ||