La regola "@ font-face" in CSS (Cascading Style Sheets) consente di caricare file di font sul server e li incorporare nei vostri fogli di stile. Questa tecnica per l'incorporamento dei font non standard nel vostro sito web non richiede JavaScript e lavorerà in Internet Explorer 6 a 8 fino a quando si utilizza un file di font EOT (Embedded OpenType). È possibile utilizzare più tipi di file per ogni tipo di carattere per aumentare il supporto cross-browser.

istruzione

1 Carica i font che si desidera utilizzare per il tuo account Web hosting. Utilizzare un programma FTP o accedere al pannello di controllo del tuo account e di utilizzare il suo strumento di upload di file. È possibile utilizzare i caratteri con le seguenti estensioni: EOT, WOFF e TTF. Quando si scarica un font che è disponibile in versioni multiple di file, caricare tutti loro per aumentare la compatibilità.

2 Aprire il file del foglio di stile in Blocco note o un editor di codice. Aggiungere un paio di righe vuote alla parte superiore del file e iniziare a scrivere il codice lì. Aggiungere una regola "@ font-face" per ogni tipo di carattere che si desidera incorporare:

@carattere tipografico {

}

3 Dare ad ogni carattere incorporato un nuovo nome di famiglia:

@carattere tipografico {

font-family: "Nome font qui";

}

Qualunque nome assegnato il tipo di carattere nella regola "@ font-face" diventerà il nome utilizzato in altre regole di stile.

4 Impostare la proprietà "src" in regola "@ font-face" per il percorso dei file di font sul server. Aggiungere un percorso di file per ogni versione del file che hai caricato se hai caricato più versioni. Aggiungere il formato di ogni file di font accanto al percorso del file:

@carattere tipografico {

font-family: "Nome font qui";

src: URL ( 'path / to / myfont.eot #') formato ( 'EOT'),

URL('path/to/myfont.woff') format('woff'),

URL ( 'path / to / myfont.ttf') formato ( 'TrueType'),

URL ( 'path / to / myfont.otf') formato ( 'OpenType');

}

Separata ogni percorso di file e la coppia di dichiarazione formato con una virgola. Seguire l'esempio di cui sopra per i tipi di file che si intende utilizzare solo su tuo sito web.

5 Impostare una regola di stile di utilizzare i nuovi font nello stesso modo si usa un font Web standard come Arial o la Georgia:

h1 {

font-family: "Nome font qui";

}

Consigli e avvertenze

• Aggiungere un carattere di ripiego, ovunque si utilizzano i tipi di carattere "@ font-face" in regole di stile: H1 {font-family: "Font Name Here", Arial, sans-serif; }
• Utilizzare un servizio come Google Web Fonts o Font Squirrel per generare i @ font-face. Entrambi i servizi generano codice per voi, e Google offre una varietà di tipi di carattere ospitate non sarà necessario caricare.
• Anche se il supporto del browser per "@ font-face" risale a Internet Explorer 5, il supporto per ogni tipo di file varia tra i browser e versioni di browser. Prova in più browser per i migliori risultati.