Alchimie Grafiche
  • Contattaci: +39 328 1323121
Alchimie Grafiche
  • Home
  • Servizi web
    • Ottimizzazione SEO
    • Campagne Adwords
    • Email Marketing
    • Article Marketing
  • Blog
  • Contatti

TTFGen: plugin jQuery per inserire nuovi fonts in un sito web

Home| Fonts| TTFGen: plugin jQuery per inserire nuovi fonts in un sito web

29
Ago, 2011
By Enrico Rombaldoni
TTFGen: plugin jQuery per inserire nuovi fonts in un sito web
  • Fonts,Web Design
  • Nessun commento

Il web come lo conosciamo noi oggi ha cominciato a svilupparsi in maniera decisa durante i primi anni del decennio scorso. Da allora i web designers hanno visto aumentare a dismisura le loro potenzialità creative: loghi, banner e qualsiasi altro segno grafico può oggi essere implementato con enorme facilità all’interno di una pagina web.

In particolare per quel che riguarda l’utilizzo dei fonts per il web e la scrittura digitale, HTML5 e CSS3 hanno in pratica raso al suolo ogni tipo di tecnica consolidata in precedenza. Ad esempio utilizzando una semplice proprietà CSS (@font-face) è possibile inserire fonts in qualsiasi sito internet di vostra creazione utilizzando file TrueType (.ttf) o OpenType (.otf).

Parallelamente negli ultimi l’enorme sviluppo di jQquery ha reso possibile anche metodi alternativi all’uso dei CSS: il plugin TTFGen in particolare vi permette di includere in una pagina web qualsiasi tipo di fonts. Questo ottimo plugin (TrueType Font Generator) genera in modo automatico immagini statiche di testo a seconda dei parametri che gli vengono assegnati. In pratica un semplice script jQuery richiama il rendering in Php dell’immagine, utilizzando file di tipo TTF per generare l’immagine stessa.

< script type=”text/javascript” >
$(document).ready(function() {
$(‘.ttfTitle’).ttfgen( {fsize: 22, font: ‘Arial’, width: 700, margin: 1, fgColor: ‘#ffffff’} );
$(‘.ttfDesc’).ttfgen( {fsize: 14, font: ‘Calibri’, margin: 1, fgColor: ‘#CCCCCC’} );
}
< /script >

…

< h1 class=”ttfTitle” >For every element with a class name of ttfTitle, a font size of 22 pixels
will be used, among other attributes. < /h1 >
< h2 class=”ttfDesc” >The elements themselves will be replaced with an IMG tag that will render 
an image of the font with the specified attributes. < /h2 >

Questo script utilizza funzionalità aggiuntive di jQuery per la ricerca degli elementi ttfTitle e ttfDesc e meta-data per l’attribuzione di alcune proprietà come la dimensione e il colore del font. Tuttavia è possibile assegnare tali valori anche con i CSS:

< script type=”text/javascript” >
$(document).ready(function() {
$(‘.myHeader’).ttfgen();
}
< /script >
< style=”text/css” >
.myHeader {
font-size: 48px; color: red; font-family: ‘arial’; width: 700px; text-align: center;
}
< /style >
…

< h1 class=”myHeader ttfgen” >For every element with a class name of ttfTitle, a font size of 22 pixels will be used, among other attributes. < /h1 >

Questo metodo è al momento sicuramente più sicuro rispetto ad un utilizzo di puro CSS3, in quanto non dà problemi di compatibilità. Tuttavia i nuovi browser implementeranno ben presto le nuove proprietà del CSS3 e quindi sarà più semplice “caricare” i vostri fonts.

About Enrico Rombaldoni

Lascia un commento Annulla risposta

Web Hosting

Categorie Articoli

  • Apple
  • Applicazioni
  • Arte
  • Biglietti da Visita
  • Brochure
  • Campagne pubblicitarie
  • Cataloghi
  • Colore
  • Comunicazione
  • Contest
  • Corsi
  • Cover
  • Curriculum
  • Domini e Hosting
  • Drupal
  • E-Commerce
  • eBay
  • Ebook
  • Email Marketing
  • Facebook
  • Flyers
  • Fonts
  • Fotografia
  • Freelancers
  • Grafica
  • Grafica Teorica
  • Icone
  • Immagini
  • Infografiche
  • Inviti
  • Joomla
    • Template
  • Keynote
  • Landing Page
  • Locandine
  • Loghi
  • Magento
  • Marketing
  • Mockup
  • Newsletter
  • Opuscoli
  • Packaging
  • Photoshop
  • Powerpoint
  • Presentazioni
  • Prestashop
  • Promozioni
  • Recensioni
  • Senza categoria
  • SEO
  • T-shirt
  • Template
  • Textures
  • Traduzioni
  • Tumblr
  • Twitter
  • Video
  • Wallpaper
  • Web Design
    • JQuery
    • Mobile
    • Risorse
    • Tools
  • Wordpress
    • Javascript
    • Plugin
    • Temi

Archivio Articoli

logo

Ultime dal blog

19 Maggio 2017 | Enrico Rombaldoni Redazione (e non...

La nostra particolarità è la passione. Il testo di un

28 Luglio 2016 | Federico Antonioni Temi WordPress...

La leggenda narra che il termine “grunge” fu utilizzato per

Contatti

  • Alchimie Grafiche
    Via Cà Lupo, 16A
    61043 Cagli, Pesaro
    Italia
  • Telefono: +39 328 1323121
  • info@alchimiegrafiche.com

Social Networks

© 2015 Alchimie Grafiche | Cagli, Pesaro | Tutti i Diritti Riservati | P.IVA 02167200415 | Privacy & Cookies | Contatti
Gestisci Consenso Cookie
Per fornire le migliori esperienze, utilizziamo tecnologie come i cookie per memorizzare e/o accedere alle informazioni del dispositivo. Il consenso a queste tecnologie ci permetterà di elaborare dati come il comportamento di navigazione o ID unici su questo sito. Non acconsentire o ritirare il consenso può influire negativamente su alcune caratteristiche e funzioni.
Funzionale Sempre attivo
L'archiviazione tecnica o l'accesso sono strettamente necessari al fine legittimo di consentire l'uso di un servizio specifico esplicitamente richiesto dall'abbonato o dall'utente, o al solo scopo di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.
Preferenze
L'archiviazione tecnica o l'accesso sono necessari per lo scopo legittimo di memorizzare le preferenze che non sono richieste dall'abbonato o dall'utente.
Statistiche
L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente per scopi statistici. L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente per scopi statistici anonimi. Senza un mandato di comparizione, una conformità volontaria da parte del vostro Fornitore di Servizi Internet, o ulteriori registrazioni da parte di terzi, le informazioni memorizzate o recuperate per questo scopo da sole non possono di solito essere utilizzate per l'identificazione.
Marketing
L'archiviazione tecnica o l'accesso sono necessari per creare profili di utenti per inviare pubblicità, o per tracciare l'utente su un sito web o su diversi siti web per scopi di marketing simili.
Gestisci opzioni Gestisci servizi Gestisci fornitori Per saperne di più su questi scopi
Visualizza le preferenze
{title} {title} {title}