- 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.