24 maggio 2010

Come usare caratteri particolari solo in una porzione del testo di un articolo.

In articoli precedenti ho illustrato come utilizzare caratteri inusuali per il nostro blog attraverso i font di Kernest o quelli messi recentemente a disposizione da Google (Google Font Directory). Prendiamo adesso il caso particolare in cui si voglia mostrare titolo e testo dell'articolo del blog in caratteri standard ma che, ogni tanto, per ravvivare il sito, si abbia la necessità di postare una frase, un paragrafo o comunque una porzione di testo con font particolari.

Può essere una funzionalità utile per esempio nei blog di poesie o in siti che usano molto le citazioni. Per l'installazione dei caratteri vi rimando all'articolo "Come usare i nuovi caratteri di Google". Ricordo che bisogna selezionare i font che ci piacciono, acquisirne il codice e incollarlo nel modello sopra la riga </head>.

Per esempio per codice dei font Tangerine dobbiamo incollare la riga 

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

tangerine

Dopo aver salvato il modello, se si vuole scrivere una parte del post con questi caratteri è sufficiente andare in Modalità HTML e incollare il seguente codice

<span style="font-family: Tangerine; font-size: 18px;color: #003366">Inserisci il testo qui</span>

dove il colore del testo e le dimensioni dei caratteri possono essere scelte a piacere e al posto di "Inserisci il testo qui" si mette la porzione dell'articolo di cui si vogliono cambiare i caratteri; può essere anche formattata con paragrafi, salti di riga, grassetto, ecc

famiglia-caratteri speciali

Questo può essere fatto con l'editor di Blogger o anche con Windows Live Writer (cliccando su Origine). Andate a guardarvi la demo di "Tanto gentil e tanto onesta pare" per avere un'idea delle enormi potenzialità di questo strumento.

Naturalmente possono essere caricati tutti i caratteri che si vuole e richiamarli semplicemente specificando la font-family. Se il modello di Blogger non vi salva la riga dei font, inserite una slash finale nel codice come mostrato nello screenshot e come già accennato nell'articolo linkato.




Nessun commento:

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.