HOWTO - Usa caratteri ricchi nel tuo web design - 💡 Fix My Ideas

HOWTO - Usa caratteri ricchi nel tuo web design

HOWTO - Usa caratteri ricchi nel tuo web design


Autore: Ethan Holmes, 2019

Solo due tipi di caratteri Web cross-browser Se si desidera scegliere i caratteri che avranno un aspetto simile nella maggior parte dei browser moderni, sono disponibili due opzioni: Georgia e Verdana. Sì, ci sono alcuni altri tipi di carattere, come Times, Arial, Helvetica, ecc., Che sono disponibili su tutte le piattaforme, ma tendono ad apparire davvero belli su una piattaforma e davvero scadenti in un'altra. Oppure hanno un bell'aspetto in entrambi, ma la crenatura o l'altezza della lettera saranno diverse per la stessa esatta dimensione del carattere.

Il web è un noioso mondo a due caratteri.

Ecco la cosa però. Georgia e Verdana sono caratteri di schermo davvero decenti. Per i grandi blocchi di copia del corpo, ti forniscono un'opzione di tipo serif e sans-serif di tutto rispetto. Quando si tratta di titoli o elementi di navigazione, tuttavia, spesso si desidera qualcosa che si distingua dal resto della copia sulla pagina.

Fonts in GIF: The Old Way La soluzione tipica è creare i titoli e i pulsanti di navigazione in Photoshop, quindi tagliare le immagini GIF per il posizionamento nella pagina web. Ciò ti consente di utilizzare qualsiasi carattere che desideri, assicura che le cose appaiano esattamente uguali in tutti i browser e richiede uno sforzo extra straordinario.

Se vuoi inserire titoli appariscenti sui post del tuo blog, questo metodo ti avrà probabilmente in un grande camice bianco con maniche lunghe extra prima di un mese. Peggio ancora, ehi, alcuni di noi hanno un bell'aspetto in bianco: se usi le immagini per la navigazione o i titoli, il testo non è selezionabile, non è adatto alla ricerca e probabilmente è un fastidio per le persone che usano gli screen reader per navigare nel tuo sito.

sIFR: The Better Way sIFR è un piccolo hack Flash / CSS / Javascript creato da Shaun Inman e gestito da Mike Davidson e Mark Wubben. Utilizza le funzionalità di incorporamento e rendering dei font di Flash per posizionare qualsiasi tipo di tipografia nel tuo sito. Ciò che lo rende diverso dal metodo GIF è che sviluppi il tuo sito con HTML semplice, applica normali classi CSS e se il tuo browser supporta Javascript e Flash, sIFR sostituisce il testo a caricamento della pagina con il carattere tipografico desiderato.

sIFR è pensato per rimpiazzare brevi passaggi di un semplice testo del browser con il testo reso nel carattere tipografico scelto, indipendentemente dal fatto che i tuoi utenti abbiano o meno il font installato sui loro sistemi. Compie questo usando una combinazione di javascript, CSS e Flash. Ecco l'intero processo:

  1. Una normale pagina HTML (X) viene caricata nel browser.
  2. Viene eseguita una funzione javascript che controlla innanzitutto che Flash sia installato e quindi cerca i tag, gli ID o le classi che hai designato.
  3. Se Flash non è installato (o, ovviamente, se javascript è disattivato), la pagina HTML (X) viene visualizzata come normale e non si verifica più nulla. Se Flash è installato, javascript attraversa la sorgente della tua pagina misurando ogni elemento che hai designato come qualcosa che desideri "sIFRed".
  4. Una volta misurato, lo script crea filmati Flash delle stesse dimensioni e li sovrappone agli elementi originali, pompando il testo del browser originale come una variabile Flash.
  5. Actionscript all'interno di ciascun file Flash quindi disegna quel testo nel carattere tipografico scelto con una dimensione di 6 punti e lo ridimensiona fino a quando non si adatta perfettamente al filmato Flash.

In sostanza, puoi fare in modo che i titoli sul tuo sito vengano visualizzati con qualsiasi tipo di carattere che desideri semplicemente aggiungendo poche righe di Javascript al modello di pagina. I motori di ricerca e gli screen reader continueranno a vedere il normale testo HTML, è comunque possibile utilizzare i caratteri tradizionali nelle classi CSS in modo che si degradino con grazia su browser non supportati e l'altro 95% dei browser renderà il tuo sito esattamente come lo hai progettato, indipendentemente dalla piattaforma. Oh, e puoi anche selezionare il tuo testo di fantasia.

Sul serio? Flash può essere usato per migliorare il web design e promuovere gli standard web, l'accessibilità e l'indicizzazione ... Questo è stato disponibile per un paio d'anni, ma sono ancora lasciato a grattarmi la testa.

Collegamenti: Tipografia accessibile per le masse - Link Scarica sIFR - Link sIFR Documentazione Wiki - Link Pagina di esempio sIFR - Link



Si Può Essere Interessati

TechShop e Fujitsu lanciano Mobile Makerspace per la formazione degli studenti

TechShop e Fujitsu lanciano Mobile Makerspace per la formazione degli studenti


Annunciando la Guida ai regali per Ultimate Makers 2014

Annunciando la Guida ai regali per Ultimate Makers 2014


Recensione: Stampante 3D CoLiDo Print-Rite

Recensione: Stampante 3D CoLiDo Print-Rite


Recensione: stampante 3D Idea Builder

Recensione: stampante 3D Idea Builder






Messaggi Recenti