Come usare qualsiasi font su una pagina web anche se non è installato /3

Come usare qualsiasi font su una pagina web anche se non è installato /3 , script  , fontface1

Nonostante altre soluzioni per usare qualsiasi font su una pagina web anche se questo non è installato nel sistema operativo dell’utente/navigatore, si stanno “pian piano” affermando delle soluzioni che possiamo trovare incorporate direttamente all’interno dei browser.

Il supporto per la regola @font-face permette di usare una particolare sintassi all’interno dello stile CSS di una pagina html, richiamando un file TTF (True Type font) opure OTF (Open Type Font) tramite una semplice riga di codice.
Il supporto per questa regola è disponibile però non in tutti i browser attualmente usati: Firefox 3.5, Safari 3.1 e Opera 10 (ed ovviamente le versioni successive) supportano la regola @font-face.

In Google Chrome il supporto della regola @font-face ci sarebbe, ma è stato disabilitato per questioni di sicurezza; sembra però che nelle versioni future il supporto alla regola verrà riattivato nella configurazione di default.

Per Microsoft Internet Explorer il discorso è – come sempre! – diverso: il supporto per la regola @font-face c’è addirittura dalla versione 4 di Explorer (!), ma il supporto per i font TTF e OTF è sostituito dal supporto per i font EOT (Embedded OpenType), che è un tipo di font studiato e sviluppato da Microsoft per l’uso sul web.

L’uso della regola @font-face, come detto, è molto semplice…

All’interno di un foglio di stile, ogni uso della regola definisce il nome di una famiglia di caratteri da usare, il file del font da caricare e le caratteristiche dello stile (come grassetto, corsivo, ecc.):

@font-face {
font-family: Carattere personale;
src: url(SEVESBRG.TTF);
}
body {
font-family: Carattere personale, verdana, arial;
}

Tramite l’uso di “font-weight” e “font-style” si possono definire gli stili diversi di un medesimo font, andando ben oltre la combinazione di grassetto/corsivo, in quanto i valori di Font-Weight possono essere arrivare fino a 9.

Siccome lo scaricamento di un font richiede banda e tempo – perché il file in sé ha un certo peso in termini di kb – si può scegliere di usare una sintassi che faccia in modo di usare per primi i font installati localmente e, se assenti, di scaricarli dal server, :

src:
local("Helvetica Neue Bold"),
url(HelveticaNeueBold.ttf);

Il nome esatto da usare per richiamare un carattere è solitamente formato dal nome della famiglia più il nome dello stile.
In Mac OsX è possibile risalire a questi semplicemente accedendo FontBook e cliccando su Show Font Info.
su Windows questo è possibile scaricando il programma gratuito Font properties extension; con il programma installato, il pannello informazioni aperto su un file TTF o OTF permette di accedere alle informazioni del singolo carattere; il nome da usare è indicato alla voce Font Name.

Risorse e Link

Se comunque non volete stare lì a studiarvi tutti i vari metodi per convertire ed usare un font TTF in un sito web, c’è un sito che offre un servizio online gratuito molto bello: vi permette di caricare uno (o più) file TTF, dopodiché potrete scaricare la versione convertita di questo font – ovvero font in formato EOT, WOFF, CFF e SVG – ed un file HTML comprensivo di stile CSS che vi mostra come implementare il font in una pagina web in una maniera “a prova di proiettile”!
link: Font Face Generator

Per ulteriori e maggiori informazioni: mozilla , w3c
Per aggiornamenti sulla compatibilità offerta dai browser: webfonts

Altri sono arrivati qui cercando:
aggiungere un font pagina web dove scaricare, html inserire font non installato, inserire una font dedicata in una pagina web.

3 pensieri su “Come usare qualsiasi font su una pagina web anche se non è installato /3”

Lascia un Commento

L'indirizzo email non verrà pubblicato.

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.