disign.it | Font non di sistema con i CSS3 | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 3.083 visualizzazioni

Font non di sistema con i CSS3

03/06/2011

Con i CSS3 è possibile incorporare font non di sistema nelle nostre pagine web.

Naturalmente rimane grave il problema di retrocompatibilità, infatti adottando questo metodo tutti i browser non in grado di interpretare CSS3 non applicheranno la regola in questione.

In attesa di uno 'svecchiamento' dei browser montati sui PC degli utenti Internet, rimane consigliabile usare dei Javascript (ad esempio Cufon, di cui ho recentemente parlato) o utilizzare la libreria di font online fornita da Google Font Api.

Ad ogni buon conto vediamo come utilizzare CSS3 per il caricamento di font non di sistema.

 

Come spesso accade abbiamo a che fare con le peculiarità di Internet Explorer, per cui non sarà sufficiente caricare sul webserver il formato TTF (utilizzato da tutti i browser eccetto IE) ma occorerrà caricare anche il formato EOT!

 

Qui potete trovare un generatore online (da leggere bene le specifiche dei diversi formati proposti).

 

Ed ecco finalmente la sintassi da utilizzare con i CSS3:


@font-face { /* definisco la family e il file da utilizzare */
    font-family: 'Cartoon';
    src: url('BD_Cartoon_Shout.eot'); /* formato EOT per Internet Explorer */
    src: local('Cartoon'), url('BD_Cartoon_Shout.ttf') format('truetype'); /* formato TrueType (o OpenType), usando la direttiva local IE non scarica anche la versione TTF */
    }

h1 { /* applico la nuova family creata all'elemento h1*/
font-family: 'Cartoon', serif;
padding: 6px;
text-align: center;
}

← Metodi di colore Illustrator, quello che non vi hanno mai detto! →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.