Vivi i caratteri di prova sul browser facilmente con Font Dragr

La tipografia contribuisce all'esperienza di lettura di un sito, motivo per cui i web designer trascorrono molto del loro tempo a trovare grandi caratteri che si adattino al design del loro sito web.

L'applicazione di caratteri personalizzati sulla tua pagina Web richiede diversi passaggi. Selezioniamo un font, quindi lo convertiamo in un formato compatibile con il Web e quindi lo aggiungiamo alle regole di stile. È tutt'altro che efficace, soprattutto quando devi ripetere il processo più volte, con più font. Ecco un'alternativa: Font Dragr.

Font Dragr offre un nuovo modo rivoluzionario per testare i caratteri sui browser. Trascina semplicemente il carattere dalla raccolta di caratteri sulla pagina e il carattere su quella pagina cambierà automaticamente al carattere scelto. Controlliamolo.

Font Dragr è sviluppato da Ryan Seddon utilizzando la regola @font-face, l'API HTML5 Drag-n-Drop e anche l'accesso offline applicationCache, che ci consente di utilizzarlo senza la connessione Internet dopo una visita iniziale.

Supporta vari tipi di file di font tra cui TrueType (TTF), OpenType (OTF), Scalable Vector Graphics (SVG) e Web Open Font Format (WOFF). Utilizzando Font Dragr, puoi testare i caratteri in due modi:

1. Il metodo predefinito

Visita FontDragr, quindi trascina e rilascia il font in qualsiasi punto della pagina. Troverete due schede: Editor e scheda Galleria .

La scheda Editor ti aiuterà a testare i tuoi font in termini di:

• Confronto delle dimensioni del corpo
• Scala di grigi
• Dimensione del font
• Campione di testo
• Personaggi

Il testo sulla pagina è completamente modificabile in modo da poter testare qualsiasi testo desiderato.

Se hai bisogno di alcuni font da sperimentare, puoi provare a utilizzare uno dei 9 elencati nella pagina Galleria per sperimentare.

2. Utilizzo del Bookmarklet

In alternativa, c'è il bookmarklet da usare. Basta trascinare il bookmarklet nella barra dei segnalibri, quindi fare clic su di esso mentre ci si trova su una pagina Web che si desidera testare. Facciamo una demo con hongkiat.com. Il seguente screenshot è il sito prima di agire.

Dopo aver cliccato sul bookmarklet, apparirà un'intestazione (vedi sotto). Nella casella di testo Selettore, puoi specificare gli elementi HTML su cui vuoi testare il carattere. Il selettore predefinito è p, ma puoi testare body, h1, h2 ecc.

Quindi, trascina e rilascia il font nell'intestazione FontDragr.

Il testo interessato cambierà automaticamente per riflettere il carattere che hai scelto di testare. In questo scatto di seguito, il carattere che è stato modificato è contrassegnato con la casella rossa.

Il bookmarklet, purtroppo, non funziona su Facebook e tutti i siti con protocollo HTTPS . Inoltre, l'intestazione visualizzata può essere nascosta o rimossa solo se si ricarica la pagina Web.

Inoltre, la funzionalità di trascinamento della selezione sembra funzionare solo in Firefox 3.6+ e Chrome.

Incartare

Se hai mai usato altri servizi webfont simili come FontFonter, FontFriend, Web Fonts Preview o FontPrep (solo per Mac), probabilmente troverai Font Dragr il più completo e facile da usare. Ma non fidarti della nostra parola, provalo e lasciaci un commento su come l'app ha funzionato (o meno) per te.

Numero più regolare di transizione con l'odometro

Uno dei modi efficaci per rendere più interessante la presentazione di informazioni numeriche è l' aggiunta di un'animazione di transizione . La creazione di un'animazione di transizione può essere eseguita con javascript, ma la codifica richiederà molto tempo. Per un'alternativa più rapida, prova l'Odometro.L

(Consigli tecnici e di design)

Includi file HTML in un altro utilizzando l'importazione HTML

HTML è la lingua standard che forma una pagina Web, ma non è facile da estendere o da mantenere. Abbiamo bisogno di un altro linguaggio come livello che ci consenta di generare HTML in modo dinamico . HTML Import è un nuovo modulo standard che cerca di rendere l'HTML più flessibile.L'importazione HTML ci consente di includere un file HTML in un altro file HTML. Po

(Consigli tecnici e di design)