www.DoZarte.com


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


Quelli a cui è piaciuto hanno letto anche:

Usare font non standard su pagine web
Per chi vuole usare dei font non standard nel proprio sito web, oltre ai sistemi già visti c’è ora anche un servizio gratuito che ci (...)

Fonts2u
Ho già parlato spesso di siti di font gratis e web-font / @font-face… Ci sono vari siti che permettono di scaricare font gratuitamente, come ci sono (...)

Convertire i font – Estrarre font dai Pdf
Online Font Converter è un servizio gratis al 100% che permette di convertire i font da un formato all’altro! converte i caratteri da/a: .dfont .eot .otf (...)

Convertire i font
Avete bisogno di convertire font? Dopo avervi parlato di Online Font Converter, ecco un altro servizio simile… Free Font Converter è un servizio online gratuito che ci (...)

19 font gratis per creativi
Quasi 2 decine di font gratis, per chi vuole fare il creativo ma non vuole mettere mano al portafogli… Font Diavlo, font Sakiane, Garrison extra condensed (...)

Altri visitatori sono arrivati qui cercando:
inserire font su sito web, html come caricare un font nel sito web, scrivere con un font diverso su facebook, uzare ttf.

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

  1. DoZ scrive:

    Font Squirrel è un nuovo sito che ci mostra font gratuiti che possono essere usati anche in progetti commerciali. I Font sono raggrupati in vari stili facili da navigare.
    In più offre dei “kit” di font preconfezionati per l’uso su pagine web, come spiego nell’articolo sul FontFace e come usare qualsiasi font in una pagina web, oltre che a un motore di conversione dei caratteri, sempre per l’utilizzo su internet.
    rothenbg.ttf&size=50&text=&case=mixed&prepend=Font+Squirrel++++++++

  2. DoZ scrive:

    Se vi capita che un font di Google Web Font non funzioni su Internet Explorer…
    Io ho risolto scaricando il font dalla directory di Google, e poi convertendolo in formato EOT.
    Copio il link ad un altro servizio che, come Font Squirrel, serve a convertire font TTF in font EOT: http://www.kirsle.net/wizards/ttf2eot.cgi

  3. DoZ scrive:

    Quali browser supportano il @font-face, e come lo supportano:
    http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support

Di la tua opinione e scrivi qualcosa!

XHTML: Tags concessi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> Attenzione: Per inserire codice html/php o caratteri speciali utilizza Postable oppure HTML Encoder per convertire i caratteri speciali del tuo commento.

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

You can add images to your comment by clicking here.