Quali sono i tipi di carattere Web sicuri?

Praticamente tutti i personal computer ha una serie di font installati. Questi caratteri sono generalmente messi lì dal produttore del computer o il set di caratteri di default per il sistema operativo che il computer sta utilizzando. E 'possibile installare i font aggiuntivi sul proprio.

Tuttavia, non tutti i font sono creati uguali. I diversi computer possono avere insiemi molto diversi di font installati, e la maggior parte degli utenti occasionali non conoscere la differenza. Quando si progetta una pagina web, è necessario tenere questo in mente. Se si decide di utilizzare un tipo di carattere nella pagina che un visitatore non ha, che tipo di carattere renderà diverso (e spesso spiacevolmente) sul computer del visitatore.

Quindi, come si fa a fare in modo che i caratteri che starà bene su il maggior numero di computer out there? Semplice: utilizzare font Web sicuro. L'informatica si evolve, le considerazioni per il Web non abbiano avuto effetto per i moderni sistemi operativi e browser web. Tra queste considerazioni è una lista di font Web sicuri che i designer Web possono utilizzare per assicurarsi che i loro caratteri rendere correttamente. Font Web sicuri sono una serie di font molto comune che vengono installati sul computer quasi tutti là fuori. Alcuni (davvero) computer meno recenti non possono avere alcuni dei caratteri che noi consideriamo Web sicuro oggi, ma sono una minoranza.

Chi dovrebbe utilizzare Web Fonts sicuro?

Ogni web designer dovrebbe utilizzare font Web sicuro. Ci sono alcuni casi in cui si desidera utilizzare una speciale, non-Web-font cassetta di sicurezza, ma questi casi sono rari (e vedremo in casi come questo un po '). Si desidera assicurarsi che i caratteri sono sempre facilmente leggibile dagli utenti. Mantenendo i caratteri leggibili con font Web sicuro, è mantenere lettori e rendere il sito più accessibile a una gamma più ampia di persone.

Credo che la migliore risposta alla domanda "chi deve usare i font Web sicuro" può essere riassunta in una sola parola: "tu".

Perché utilizzare i caratteri web sono sicuri?

Come spiegato in precedenza, se si utilizza un font sulla tua pagina che il visitatore non è installato, il browser verrà a prendervi un carattere di ripiego che non si intenda appariranno sulla tua pagina. Spesso, il risultato è un testo brutta che non è affatto piacevole da leggere.

Se un visitatore non può leggere fluidamente il tuo sito, allora lui o lei non può ottenere le informazioni da lei fornite, e questa è la ragione per intero i tuoi visitatori sul tuo sito! Anche se il testo sul vostro sito è brutto e qualcuno decide di trascinarsi attraverso di essa per il contenuto, sarà ancora aspetto sgradevole e si manterrà meno lettori. Un sito web con i lettori non è uno spreco.

Utilizzando i caratteri Web sicuro è solo una parte di un più ampio insieme di pratiche di progettazione che mantenere il vostro sito user-friendly. Non ceppo occhi di un lettore, non rendere le informazioni difficili da trovare, e assicurarsi che possono progredire attraverso il vostro sito e dei contenuti, senza dover pensare a questo proposito. (Potete leggere un articolo dettagliato su costruire la vostra tipografia qui.) Se in qualsiasi momento qualcuno guarda il tuo sito e prende anche un millesimo di secondo per pensare: "Uh, che è un testo brutto," hai urtato l'esperienza. Idealmente, l'incontro con tutto il tuo sito deve essere liscia come la seta, e l'utilizzo di un font Web sicuro è una grande parte del conseguimento di tale obiettivo.

Quando usare i font Web sicuro?

Come regola generale, utilizzare sempre i font Web sicuro per il contenuto della pagina.

Dove sono i font web sicuri applicabile?

I vostri header di testo, link e contenuti dovrebbero utilizzare font Web sicuro. Se si prevede di utilizzare il testo normale per il vostro logo, si dovrebbe anche usare un font Web sicuro per questo. In effetti, una delle poche eccezioni a usare i font Web sicuro è che se si decide di utilizzare il testo in immagini. Se si prevede di utilizzare le immagini di alcuni dei tuoi testi, quindi è sicuro di utilizzare altri tipi di carattere, perché le immagini appariranno lo stesso sul computer del visitatore come fa da solo. Tuttavia, non si dovrebbe mai usare le immagini per tutto il testo. Immagini per il testo deve essere usato con parsimonia. Loghi e intestazioni possono utilizzare le immagini. Tutto il testo che è contenuto o meno normali, anche se, dovrebbe utilizzare un tipo di carattere Web sicuro.

Come faccio a utilizzare i font Web sicuro, e quali sono sicuri?

Includono caratteri Web sicuro nella vostra CSS con le regole famiglia di caratteri o font-. (Ho incluso quelli più utili per voi qui sotto).

Ci sono un buon numero di tipi di carattere Web sicuro. Molti di loro sono molto simili ad altri tipi di carattere Web sicuro, e in pratica sono sostanzialmente gli stessi. Una regola CSS per la vostra famiglia di font, per esempio, può apparire come segue:

 : Arial , Helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif; 

Il primo carattere elencato, Arial, è un carattere estremamente comuni disponibili sul maggior parte dei computer, in modo da poter tranquillamente scommettere che sarà visualizzato correttamente sullo schermo di un visitatore quando si visita il sito. In rari casi, un computer non può avere Arial installato, però. Vecchi computer Apple, per esempio, non può avere Arial, così come molti altri caratteri. Helvetica, però, è ampiamente installato tra i computer Apple, e sembra molto simile ad Arial, Helvetica così è elencato secondo. Quando un browser non riesce a trovare il font prima elencati, si cerca il font prossimo in ordine. In questo caso, Helvetica saranno utilizzati quando Arial non è installato.

E, in casi estremamente rari, alcuni computer possono non avere Arial o Helvetica installato. In questo caso, "sans-serif" viene utilizzato. Questo è un ripiego, font di default che il browser Web verrà utilizzato, se non riesce a trovare uno dei caratteri elencati in precedenza.

Ci sono quattro tipi (o famiglie) di font Web sicuro: serif, sans serif, cursive, e monospace. Ognuno di questi ha il proprio carattere di ripiego (come i sans-serif sopra). Il fallback per ogni famiglia, rispettivamente, sono: serif, sans-serif, cursive, e monospace. Troverete che le norme di carattere quasi sempre comprendono una di queste ricadute, e sempre per ultimo.

I font sono elencati in formato CSS in modo da poter facilmente copiare e incollare loro se non avete voglia di scrivere fuori. Questo è probabile che come si potrà osservare i caratteri maggior parte del tempo, comunque.

Serif Web Safe Fonts

L'arte del web design ha molti orientamenti generali che hanno preso piede come il Web è diventato più saldamente radicata nel Web 2.0 impostazione. Abbiamo altri articoli che trattano quando utilizzare serif e sans serif, in modo che tutti voglio dire è che, in generale, serifs sono stati generalmente utilizzati principalmente per le rubriche. Di seguito sono riportati i tipi di carattere Web sicuro che è possibile utilizzare per il «grazie».

Sans Serif Web Safe Fonts

Serifs Sans sono tipicamente utilizzati per la maggior parte dei contenuti di un sito web.

Monospace Safe Web Fonts

Caratteri a spaziatura fissa sono utili quando si desidera assicurarsi che tutti i personaggi di linea con esattamente la stessa larghezza. Contiene porzioni di codice o di dati tabulari senza l'utilizzo di una tabella si usa bene per i caratteri a spaziatura fissa.

"Corsiva" Safe Web Fonts

Attualmente, non ci sono molti Web sicuro caratteri corsivi. C'è un "corsivo" di ripiego, come sans-serif, serif e monospace, ma per la maggior parte dei casi questo è molto utilizzato. C'è qualche discussione se Comic Sans MS è una partita compatibile con il tipo di carattere corsivo di ripiego. Alcuni pensano Comic Sans MS appartiene a sans serif, e altri dicono che è il carattere più vicino ad un normale "corsiva"-come la sensazione che si può attualmente ottenere in un font Web sicuro.

In ogni caso, corsiva e Comic Sans MS sono generalmente evitate. Personalmente, la mia opinione è che si dovrebbe evitare entrambi questi del tutto.

In alcuni casi, è possibile utilizzare altri caratteri?

Sì, ci sono alcune eccezioni al "sempre usare i font Web sicuro" regola. A volte a causa di circostanze fuori dal tuo controllo, è semplicemente necessario utilizzare un tipo di carattere che non è considerato Web sicuro. Un client, per esempio, può avere un business che ha utilizzato lo stesso font per i segni della loro azienda, i marchi e loghi per oltre un secolo. Portando un business come quello per il Web senza perdere la sua lunga l'integrità e il riconoscimento del marchio sarebbe probabilmente impossibile con un font Web sicuro.

O, forse, come progettista, vuole sperimentare con il design e prendere le cose al bordo sanguinamento. Ho sempre creduto che la vera arte e la sperimentazione sta nella capacità dell'artista di vedere al di là del normale campo di applicazione e passo da prassi standard. Se si condivide questa idea, allora senza dubbio ad un certo punto si sta andando a cercare il modo di armeggiare con i non-Web-font sicuri nelle vostre pagine.

Qui di seguito sono i modi migliori per utilizzare non-Web-font sicuro nella tua pagina, e ancora li rendono correttamente maggior parte dei computer in circolazione.

Fornire download per gli utenti

Se si desidera utilizzare un carattere molto specifico per il tuo sito, è possibile includere un link al file di font nella tua pagina. In questo modo, i visitatori possono scaricare e installare il tipo di carattere, quindi visita la pagina e vedere il tipo di carattere resi correttamente senza inconvenienti reale.

Questo è un sacco di lavoro da aspettarsi il visitatore a fare, però, solo per vedere il vostro sito, come li volete vedere. Il visitatore di solito non vogliono fare niente di speciale solo per visualizzare una pagina web. Richiedono che qualcuno passare attraverso la briga di scaricare e installare un font solo per vedere il vostro sito è un ottimo modo per perdere visitatori. Quote sono, la maggior parte dei visitatori non si sa nemmeno da dove iniziare a installare il tipo di carattere, comunque.

Ci sono anche alcuni potenziali problemi legali se si prende questa strada. Se non sono la persona che ha creato il tipo di carattere, quindi molto probabilmente non hai i diritti legali di distribuirlo.

A causa di questi difetti principali, questo metodo è ampiamente evitato.

Utilizzare le immagini

Quando si utilizza un editor di immagini come Photoshop, The GIMP, o anche MS Paint, è possibile creare immagini che utilizzano qualsiasi tipo di carattere che ti piace. Mettere l'immagine sulla tua pagina e sarà lo stesso aspetto sul computer di un visitatore, come fa sul vostro. Di seguito una immagine che utilizza tre non-Web-font sicuro che si pre-installato sul mio MacBook.

Se si, come visitatori di questo sito, sono su un Mac, un PC Windows, nel vostro gusto preferito di Linux, o anche navigare su qualcos'altro, come un PDA o un iPhone, i caratteri sopra visualizzati correttamente. Ciò è vero anche se il vostro PC non dispone di questi caratteri installati.

Questo è un ottimo modo per visualizzare qualsiasi tipo di carattere che ti piace per il vostro logo, pubblicità, o alcune delle intestazioni. Tuttavia, non si può contare su immagini di contenuto effettivo. Un visitatore non può evidenziare il testo con il mouse, il che significa che se si desidera copiare e incollare il testo da qualche parte (ad esempio, per inviare il vostro nome aziendale ad un amico), non possono farlo. Inoltre, il testo in immagini non possono essere letti da lettori di schermo, che alcune persone disabili utilizzare per navigare in Internet. Qualsiasi testo che hai nel tuo immagini non saranno accessibili a queste persone. Inoltre, alcune persone sfogliare con le immagini spento o hanno le loro immagini bloccate da un terzo, come in alcuni uffici aziendali che utilizzano un server proxy. Infine, i motori di ricerca non possono leggere correttamente e il testo catalogo all'interno delle immagini.

Tutti in tutto, qualsiasi testo si utilizza nelle immagini servono principalmente come decorazione mirato. Non vi è alternativa se: l'uso di una tecnica di sostituzione dell'immagine.

Tecniche Immagine sostitutiva

Ci sono tecniche che si possono utilizzare nel CSS e (X) HTML, che ti consente di utilizzare le immagini al posto del testo normale, pur mantenendo l'accessibilità del tuo sito e compatibilità con i motori di ricerca. Si noti l'intestazione di cui sopra, che recita "le tecniche di sostituzione Immagine" è un'immagine. Esso utilizza un carattere chiamato Rockwell (che venne anche installato sul mio MacBook) e il tipo di carattere è verde piuttosto che il nero tipico abbiamo usato.

Questa intestazione utilizza una tecnica di sostituzione dell'immagine chiamata singolo pixel Sostituzione. Utilizza i CSS e (X) HTML per visualizzare l'immagine, ma se qualcuno ha CSS disattivata, l'immagine non verranno pubblicati. Per risolvere questo problema, vi è un elemento nascosto span che ancora perfettamente visualizzare il testo di "tecniche di sostituzione immagine" per questa intestazione.

Come per i lettori di schermo e altre situazioni in cui le immagini potrebbero non essere raggiungibile, si trova a 1-pixel con un testo alt che recita "le tecniche di sostituzione dell'immagine". In questo modo, non ci stanno danneggiando l'accessibilità e la lettura dello schermo sarà ancora prendere il testo come lo intendiamo noi.

Uno degli svantaggi solo per utilizzare questa tecnica è che aggiunge alcuni elementi estranei al tuo (X) HTML. Essi non danno nulla, ma lo fanno aggiungere più grosso per il vostro lavoro e la dimensione del file del documento. Rende anche più difficile da seguire quando si legge il codice del tuo sito. Anche ancora, è un modo fantastico per aggiungere tipografia ricco al tuo sito.

Il lettore attento può avere già preso uno sguardo a questa sezione di questo articolo per ottenere uno sguardo al CSS che ho usato qui. Si prega di notare che ho dovuto modificare la tecnica un po 'per l'utilizzo su WPDFD dato che ha già pre-stili esistenti. Se volete provare questa tecnica di sostituzione di immagini sul vostro sito, mi permetta di fornire il codice migliore con cui lavorare.

Io dò anche voi che le immagini con cui lavorare. In primo luogo, scaricare e salvare questi. (Clic destro e salvare).

• spacer.gif - Sì, so che i sentimenti di carattere generale su spacer.gif. Let's keep it tra noi, solo per questa volta.
• irt.gif. Questa è l'immagine di intestazione.

In secondo luogo, aggiungere il codice al tuo file CSS.

  # header ( 
  :  250px ; width: 250px; 
  :  30px ; height: 30px; 
  :  url(irt.gif) ; background-image: url (irt.gif); 
  ) 
  # header (span 
  :  none ; display: none; 
  ) 

Infine, attuare la sostituzione dell'immagine con questo in (X) HTML:

  Tecniche Immagine sostitutiva 

Visualizzarlo in un browser, e si dovrebbe vedere l'effetto sul lavoro. È possibile trovare un elenco delle tecniche di sostituzione dell'immagine sopra a mezzoblue, che è dove mi è stato introdotto per questa particolare tecnica di sostituzione delle immagini.

Uso sIFR

sIFR (Scalable Inman Flash Replacement) è forse il modo più comune di utilizzare ricchi, i caratteri belli sulla tua pagina. Infatti, è possibile vedere un esempio di essa nella parte superiore di ogni articolo WPDFD. Titolo di questo articolo, il "conoscere Web Fonts Safe", viene visualizzato per la maggior parte degli utenti in un font chiamato Interstate, che non è in genere un carattere Web sicuro.

Ci sono solo pochi passi per la creazione di sIFR, tra cui un processo chiamato "font tuning" (non preoccupatevi, non è difficile), ma ancora tiene generalmente anche un web designer esperto sviluppatore di circa 10 minuti per configurarlo in tutta un sito che prima non usarlo.

È facile da impostare, però, ei suoi benefici sono molteplici. Esso prevede scalabile, testo accessibile in un font di tua scelta facendo cadere un elemento Flash con uno sfondo trasparente al posto del testo originale. Se un visitatore del sito non ha i javascript, Flash, o sia installato, il testo è ancora visualizzato sulla vostra pagina in uno stile CSS, l'intestazione normale.

Personalmente, sIFR è il metodo vorrei raccomandare se si vuole davvero rafforzare la tipografia del tuo sito. E 'importante notare, però, che sIFR non devono essere utilizzati per il contenuto principale del tuo sito. Usalo per le intestazioni, citazioni, slogan, e altri piccoli, ma significativi, frammenti di testo.

Attualmente, sIFR 2 è la norma, ma sIFR 3 è in fase di beta testing. Quando sIFR 3 è in fase beta e non ho avuto il tempo di giocare con lui, sono fermamente intenzionato a coprire questo argomento in maggior dettaglio. Nel frattempo, se gli interessi sIFR voi, ma non volete passare attraverso tutti i setup, si potrebbe voler dare un'occhiata a uno strumento che fa tutto per te.

Così là lo avete!

Bene, è venuto su questa pagina e leggere questo articolo in modo da poter rimanere informato sui font Web sicuro, e ora lo sapete tutti gli aspetti più importanti di essi. E 'probabilmente una buona idea per un segnalibro per questa pagina in modo da poter avere una lista di font Web sicuro a portata di mano in ogni momento.

D. Rodriguez