Tra le novità che offre il CSS3, oggi vediamo come utilizzare @Font-face, una regola con la quale sarà possibile utilizzare all’interno del nostro sito internet un qualsiasi font non standard. Questo è un grosso vantaggio per i web designer perchè non dovranno più adeguardi ai “font standard” quindi potranno esprimere tutta la loro creatività all’interno del sito internet.
E’ possibile operare in due maniere differenti:
1) Incorporare il font nel sito e successivamene associarlo al proprio selettore.
@font-face{ font-family: ‘TradeGothicLTStdLight’; src: url(’/font/TradeGothicLTStdLight.ttf’); }
h2 { font-family: ‘Airstrip_Four’; }
2) Convertire il font attraverso un generatore @Font Face. Questa tecnica leggermente più lunga, permette però un maggior controllo da parte del web designer. Il sistema è comunque semplice perchè basta scegliere un font, convertirlo e successivamente incorporare nel sito la cartella dei font convertiti richiamandoli nell’header del sito.
<link rel="stylesheet" href="/font/stylesheet.css" type="text/css" charset="utf-8" />
@font-face { font-family: 'TradeGothicLTStdLight'; src: url('/font/tradegothicltstd-light-webfont.eot'); src: url('/font/tradegothicltstd-light-webfont.eot?#iefix') format('embedded-opentype'), url('/font/tradegothicltstd-light-webfont.woff') format('woff'), url('/font/tradegothicltstd-light-webfont.ttf') format('truetype'), url('/font/tradegothicltstd-light-webfont.svg#TradeGothicLTStdLight') format('svg'); font-weight: normal; font-style: normal; }
Io amo sempre essere ordinato all’interno della cartella del mio sito ed è per questo che ho inserito il tutto nella cartella font.
Ovviamente (ma poco ci importa) il @Font Face non funziona con il browser Internet Explorer perchè obsoleto.