Share
Il CSS 3 è all'orizzonte e siamo tutti eccitati. Grazie agli ultimi aggiornamenti del browser, gli sviluppatori possono iniziare a lavorare con nuove proprietà che fanno risparmiare tempo, come @ font-face. Sfortunatamente, la disponibilità di queste funzionalità è limitata a una piccola parte della nostra base di utenti complessiva. Almeno per il prossimo anno o giù di lì, avremo bisogno di continuare a utilizzare le alternative Flash e Javascript quando incorporiamo i font.
Fortunatamente, un nuovo concorrente, Cufón, ha reso il processo incredibilmente semplice. Cosa lo rende diverso? Piuttosto che Flash, utilizza una combinazione di canvas e VML per il rendering dei caratteri. In pochi minuti mostrerò come utilizzare qualsiasi font che desideri nelle tue applicazioni web. Eccitato?
Visita il sito Web di Cufón e fai clic con il pulsante destro del mouse sul pulsante "Download" in alto. Scegli "Salva come" e posizionalo sul desktop.
Per funzionare, dobbiamo usare l'utilità di conversione dei font sul sito web. In alternativa, puoi scaricare il codice sorgente e convertire i tuoi font localmente. Ai fini della dimostrazione, ho scelto di usare un carattere odioso: "Jokerman". Nota: utenti Windows: potrebbe essere necessario copiare il carattere dalla cartella "FONT" sul desktop affinché funzioni.
Se lo si desidera, caricare anche i file in corsivo e in grassetto.
Successivamente, dovrai scegliere quali glifi devono essere inclusi. Non essere così veloce semplicemente a "SCEGLI TUTTI". Facendolo, le dimensioni del file JS aumenteranno notevolmente. Ad esempio, probabilmente non abbiamo bisogno di tutti i glifi latini; quindi assicurati che siano lasciati deselezionati. Nel mio caso, ho controllato quelli che vedi qui sotto.
Cufón ti consente di designare un URL specifico per il tuo file, per aumentare la sicurezza. È estremamente importante assicurarsi di disporre dei privilegi appropriati per utilizzare un font. FARE RIFERIMENTO QUI per rivedere i termini. Se vantaggioso, digita l'url del tuo sito in questa casella.
Poiché siamo appena all'inizio, puoi lasciare le ultime due sezioni ai valori predefiniti. Accetta i termini e fai clic su "Facciamolo". Ti verrà quindi presentata una casella di download che ti chiederà dove salvare lo script generato. Ancora una volta, salvalo sul tuo desktop per un facile recupero.
Il prossimo passo è preparare il nostro progetto. Crea una nuova cartella sul desktop, aggiungi un file index.html e trascina i due file Javascript in.
Apri il file indice nel tuo editor di codice preferito, aggiungi i tag HTML di base e quindi fai riferimento ai tuoi due file Javascript appena prima del tag body di chiusura (sei libero di aggiungerli anche alla sezione head).
Ora, dobbiamo decidere quale testo deve essere sostituito. Dato che il nostro documento è ancora vuoto, non esitare a riporlo con tag e testo casuali. Proviamo a sostituire il carattere predefinito in tutti i tag H1 con Jokerman.
Quando chiamiamo il metodo "replace", possiamo aggiungere una stringa contenente il nome del tag che vogliamo sostituire - nel nostro caso, tutti i tag H1. Salva il file e visualizzalo nel tuo browser.
Come sempre, IE ha bisogno di un po 'di più per giocare bene con gli altri. Se si visualizza questa pagina in IE, si noterà un leggero flickr / ritardo prima del rendering del font. Per rimediare, basta aggiungere:
Immaginiamo che tu voglia avere più controllo sul tuo selettore. Ad esempio, forse non vuoi modificare TUTTI i tag H1, ma solo quelli all'interno dell'intestazione del tuo documento. Cufón non ha il proprio motore di selezione integrato. Questa funzione è stata omessa per mantenere le dimensioni del file il più ridotte possibile. Anche se all'inizio potrebbe sembrare una rovina, in realtà è una grande idea. Considerando l'ubiquità dei framework Javascript ultimamente, non è necessario raddoppiare. Esamineremo due metodi per scegliere come target elementi specifici.
Se non utilizzerai un framework JS nel tuo progetto, utilizzeremo semplicemente:
Cufon.replace (document.getElementById ( 'intestazione') getElementsByTagName ( 'H1').);
Il codice sopra afferma "Ottieni l'elemento che ha un id di" intestazione ", quindi trova tutti i tag H1 all'interno di questo elemento e" sostituiscili "con il nostro nuovo carattere.
Per utilizzare il motore di selezione di jQuery, dobbiamo solo importare jQuery prima di Cufón.
Accentsconagua
Cufon.replace ('# header h1'); E 'così semplice! Si prega di notare che è necessario importare jQuery PRIMA del proprio script Cufón affinché questo metodo funzioni.
Che ci crediate o no, hai finito! Con solo poche righe di codice semplice, sei libero di usare qualsiasi font che desideri! Assicurati solo di avere l'autorizzazione e di essere conforme alle licenze di tipo fonderie.
La preoccupazione principale dal punto di vista del tipo di fonderia sembra essere che lo script di carattere tipografico generato da Cufón potrebbe essere utilizzato per decodificare lo stesso tipo di carattere stesso.
-Cameron Moll
Quali sono i tuoi pensieri? Avere un metodo migliore che non mi è familiare?
