Quando si inizia a creare un layout, è necessario specificare specificamente nel CSS i caratteri utilizzati nella pagina. Spesso, con caratteri diversi, il designer digita non solo il testo principale della pagina, ma anche vari titoli, loghi e monogrammi:
Un buon designer, come un buon progettista di layout, sa che il browser può utilizzare solo i font installati sul computer dell’utente per visualizzare una pagina. Cioè, i caratteri possono essere divisi in due categorie:
- Caratteri che verranno visualizzati senza problemi dalla stragrande maggioranza degli utenti.
- Caratteri che un gruppo abbastanza ampio di utenti non possiede.
Se il designer ha utilizzato caratteri della seconda categoria per creare, ad esempio, un logo o grandi intestazioni statiche, non si può esitare a utilizzare questa tecnica. Lo svantaggio dell'utilizzo di questa tecnica è l'inflessibilità. Se ci sono modifiche nel testo, dovrai rifare l'immagine e modificare il CSS (ad esempio, se le dimensioni della nuova immagine non corrispondono a quella vecchia).
Possiamo dire che il pericolo di utilizzare una tecnica dipende direttamente dalla probabilità di modificare il testo. Pertanto, ad esempio, il testo generale di una pagina non può essere scritto con caratteri non standard! Un designer competente non lo farebbe mai. E se il designer ne incontra uno verde, un buon progettista di layout è semplicemente obbligato a correggere il suo errore: nel layout, sostituisci questo carattere con quello standard più simile.
Ma come si possono distinguere i caratteri del primo gruppo dal secondo? È chiaro che non puoi fare affidamento su un set di caratteri installati direttamente sul tuo computer! Scopriamolo.
Caratteri standard
I caratteri standard sono un insieme di caratteri installati con il sistema operativo. Poiché i sistemi operativi sono diversi, il loro set di caratteri è diverso. Un elenco dei caratteri standard per le diverse versioni di Windows è disponibile, ad esempio, nell'articolo Caratteri standard di Windows e un elenco dei caratteri standard di Mac OS nella pagina Caratteri inclusi con Mac OS. Per quanto riguarda i sistemi operativi Unix/Linux, non hanno un unico set di caratteri. Molti utenti Linux utilizzano il set di caratteri DejaVu, in particolare su Ubuntu sono installati per impostazione predefinita. Secondo le statistiche di http://www.codestyle.org, molti utenti Unix/Linux hanno installato anche URW, Free e altri set di caratteri. Secondo le stesse statistiche, oltre il 60% degli utenti Unix/Linux possiede sul proprio computer i font del set Core Fonts for the Web, che fino al 2002 era ufficialmente disponibile per il download gratuito sul sito Microsoft.
Affinché la pagina venga visualizzata come l'ha concepita il progettista, su qualsiasi sistema operativo è possibile specificare nella proprietà CSS più font, separati da virgole.
Questa proprietà specifica un elenco prioritario di nomi di famiglie di caratteri e/o nomi di famiglie generiche. Secondo le specifiche CSS2, esistono due tipi di nomi di famiglie di caratteri:
- Il nome della famiglia di caratteri che preferisci. Ad esempio, "Times New Roman", "Arial" e altri. I nomi delle famiglie di caratteri contenenti spazi devono essere racchiusi tra virgolette. Se mancano le virgolette, qualsiasi carattere di spazio prima e dopo il nome del carattere viene ignorato e qualsiasi sequenza di spazi all'interno del nome del carattere viene convertita in un singolo spazio.
- Famiglia generica (comune). La specifica definisce le seguenti famiglie generiche:
- serif: caratteri con grazie alle estremità;
- sans-serif: caratteri sans-serif;
- corsivo: caratteri corsivi;
- fantasia - caratteri decorativi;
- monospace - carattere a spaziatura fissa (con lettere della stessa larghezza).
Pertanto, per la progettazione, viene preso un carattere standard dal sistema operativo Windows, ne viene selezionato uno simile per Mac OS e Unix/Linux, viene specificata una famiglia di caratteri comune e il gioco è fatto.
Ma non è così semplice. Esaminiamo più in dettaglio.
Alla ricerca di caratteri sicuri per il Web
Su Internet si è storicamente sviluppato il concetto di web font “sicuri”. Un carattere sicuro è un carattere standard per tutti i sistemi operativi. Poiché allora una simile situazione si può solo sognare Non esistono font assolutamente sicuri!
Alcuni caratteri possono essere definiti sicuri con alcune riserve.
La base per la definizione dei caratteri “sicuri” sono stati i caratteri del sistema operativo Windows più comune, che vengono utilizzati anche in altri sistemi operativi. Un esempio di tale utilizzo sono i già citati Core Fonts per il pacchetto Web Font, che secondo le statistiche sono stati scaricati da molti utenti Unix/Linux.
Questo pacchetto include i seguenti caratteri: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Tutti supportano l'alfabeto cirillico, che è importante per Runet.
Il set di font fornito di serie con Mac OS X (questo sistema operativo è il più utilizzato tra gli utenti Mac OS) include tutti i font del set di font Core per il Web.
Sulla base dei font Windows utilizzati in altri sistemi operativi è stato creato il seguente elenco dei cosiddetti web font “sicuri”:
- Arial
- Arial Nero
- Comic Sans MS
- Courier New
- Georgia
- Impatto
- Times New Roman
- MS Trabucco
- Verdana
Il carattere Webdings contiene icone e non può essere utilizzato per i contenuti. Andale Mono non è molto utilizzato perché non è adatto alla lettura quotidiana dello schermo e non tutti gli utenti Windows lo possiedono.
Ogni utente Windows, Mac OS X e la stragrande maggioranza degli utenti Unix/Linux (ovvero coloro che hanno installato i caratteri Core per il pacchetto Web) dispongono di tutti questi caratteri.
Ma per quanto riguarda il resto? Dopotutto, vuoi che il piano del designer venga visto dal maggior numero possibile di utenti!
Ne parleremo nella seconda parte della pubblicazione.
Quando si inizia a creare un layout, è necessario specificare specificamente nel CSS i caratteri utilizzati nella pagina. Spesso, con caratteri diversi, il designer digita non solo il testo principale della pagina, ma anche vari titoli, loghi e monogrammi.
Un buon designer, come un buon progettista di layout, sa che il browser può utilizzare solo i font installati sul computer dell’utente per visualizzare una pagina. Cioè, i caratteri possono essere divisi in due categorie:
- Caratteri che verranno visualizzati senza problemi dalla stragrande maggioranza degli utenti.
- Caratteri che un gruppo abbastanza ampio di utenti non possiede.
Se il designer ha utilizzato caratteri della seconda categoria per creare, ad esempio, un logo o grandi intestazioni statiche, non si può esitare a utilizzare la tecnica di sostituzione del testo con un'immagine. Lo svantaggio dell'utilizzo di questa tecnica è l'inflessibilità. Se ci sono modifiche nel testo, dovrai rifare l'immagine e modificare il CSS (ad esempio, se le dimensioni della nuova immagine non corrispondono a quella vecchia).
Possiamo dire che il pericolo di utilizzare una tecnica dipende direttamente dalla probabilità di modificare il testo. Pertanto, ad esempio, il testo generale di una pagina non può essere scritto con caratteri non standard! Un designer competente non lo farebbe mai. E se il designer ne incontra uno verde, un buon progettista di layout è semplicemente obbligato a correggere il suo errore: nel layout, sostituisci questo carattere con quello standard più simile.
Ma come si possono distinguere i caratteri del primo gruppo dal secondo? È chiaro che non puoi fare affidamento su un set di caratteri installati direttamente sul tuo computer! Scopriamolo.
Caratteri standard
I caratteri standard sono un insieme di caratteri installati con il sistema operativo. Poiché i sistemi operativi sono diversi, il loro set di caratteri è diverso. Un elenco dei caratteri standard per le diverse versioni di Windows è disponibile, ad esempio, nell'articolo Caratteri standard di Windows e un elenco dei caratteri standard di Mac OS nella pagina Caratteri inclusi con Mac OS. Per quanto riguarda i sistemi operativi Unix/Linux, non hanno un unico set di caratteri. Molti utenti Linux utilizzano il set di caratteri DejaVu, in particolare su Ubuntu sono installati per impostazione predefinita. Secondo le statistiche di http://www.codestyle.org, molti utenti Unix/Linux hanno installato anche URW, Free e altri set di caratteri. Secondo le stesse statistiche, oltre il 60% degli utenti Unix/Linux possiede sul proprio computer i font del set Core Fonts for the Web, che fino al 2002 era ufficialmente disponibile per il download gratuito sul sito Microsoft.
Affinché la pagina venga visualizzata come previsto dal progettista su qualsiasi sistema operativo, è possibile specificare diversi caratteri nella proprietà CSS font-family, elencati separati da virgole.
Questa proprietà specifica un elenco prioritario di nomi di famiglie di caratteri e/o nomi di famiglie generiche. Secondo le specifiche CSS2, esistono due tipi di nomi di famiglie di caratteri:
- Il nome della famiglia di caratteri che preferisci. Ad esempio, "Times New Roman", "Arial" e altri. I nomi delle famiglie di caratteri contenenti spazi devono essere racchiusi tra virgolette. Se mancano le virgolette, qualsiasi carattere di spazio prima e dopo il nome del carattere viene ignorato e qualsiasi sequenza di spazi all'interno del nome del carattere viene convertita in un singolo spazio.
- Famiglia generica (comune). La specifica definisce le seguenti famiglie generiche:
- serif: caratteri con grazie alle estremità;
- sans-serif: caratteri sans-serif;
- corsivo - caratteri corsivi;
- fantasia - caratteri decorativi;
- monospace - carattere a spaziatura fissa (con lettere della stessa larghezza).
I nomi delle famiglie dei clan sono parole chiave e non è necessario racchiuderli tra virgolette.
Pertanto, per la progettazione, viene preso un carattere standard dal sistema operativo Windows, ne viene selezionato uno simile per Mac OS e Unix/Linux, viene specificata una famiglia di caratteri comune e il gioco è fatto.
Ma non è così semplice. Esaminiamo più in dettaglio.
Alla ricerca di caratteri sicuri per il Web
Su Internet si è storicamente sviluppato il concetto di web font “sicuri”. Un carattere sicuro è un carattere standard per tutti i sistemi operativi. Dato che possiamo solo sognare una situazione del genere, non esistono caratteri assolutamente sicuri!
Alcuni caratteri possono essere definiti sicuri con alcune riserve.
La base per la definizione dei caratteri “sicuri” sono stati i caratteri del sistema operativo Windows più comune, che vengono utilizzati anche in altri sistemi operativi. Un esempio di tale utilizzo sono i già citati Core Fonts per il pacchetto Web Font, che secondo le statistiche sono stati scaricati da molti utenti Unix/Linux.
Questo pacchetto include i seguenti caratteri: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Tutti supportano l'alfabeto cirillico, che è importante per Runet.
Il set di font fornito di serie con Mac OS X (questo sistema operativo è il più utilizzato tra gli utenti Mac OS) include tutti i font del set di font Core per il Web.
Sulla base dei font Windows utilizzati in altri sistemi operativi è stato creato il seguente elenco dei cosiddetti web font “sicuri”:
- Arial
- Arial Nero
- Comic Sans MS
- Courier New
- Georgia
- Impatto
- Times New Roman
- MS Trabucco
- Verdana
Il carattere Webdings contiene icone e non può essere utilizzato per i contenuti. Andale Mono non è molto utilizzato perché non è adatto alla lettura quotidiana dello schermo e non tutti gli utenti Windows lo possiedono.
Ogni utente Windows, Mac OS X e la stragrande maggioranza degli utenti Unix/Linux (ovvero coloro che hanno installato i caratteri Core per il pacchetto Web) dispongono di tutti questi caratteri.
Ma per quanto riguarda il resto? Dopotutto, vuoi che il piano del designer venga visto dal maggior numero possibile di utenti!
Caratteri che supportano il cirillico
Una caratteristica specifica di RuNet è il problema con la codifica delle pagine e il supporto del cirillico nei caratteri. Per evitare problemi con varie codifiche di caratteri, le persone intelligenti hanno inventato Unicode, che consente di combinare caratteri di diverse lingue in un unico carattere. Pertanto, per le pagine in lingua russa è necessario utilizzare solo caratteri Unicode che supportano il cirillico.
Di seguito è riportata una tabella delle corrispondenze dei caratteri.
| finestre | Mac OS | Unix/Linux | famiglia ancestrale |
|---|---|---|---|
| Arial Nero | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Arial | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco CI | * (vedi sotto) | corsivo |
| Courier New | * (vedi sotto) | NimbusMono L | Monospazio |
| Georgia | * (vedi sotto) | Libro scolastico del secolo L | Serif |
| Impatto | Carbone C.Y. | * (vedi sotto) | Sans-serif |
| Times New Roman | Tempi C.Y. | Nimbus romano No9 L | Serif |
| MS Trabucco | Helvetica C.Y. | * (vedi sotto) | Sans-serif |
| Verdana | Ginevra C.Y. | DejaVu Sans | Sans-serif |
* nella colonna accanto al carattere significa che il sistema operativo non dispone di equivalenti cirillici nativi del carattere di Windows. Ma allo stesso tempo c'è un'alta probabilità che questo carattere stesso sia installato direttamente nel sistema operativo.
Ad esempio, se il testo principale del layout è Arial, troviamo questo font nella tabella e scriviamo la riga corrispondente in CSS:
corpo ( famiglia di caratteri: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
corpo( carattere - famiglia: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif; |
Questa voce significa che se l'utente ha il carattere Arial (e tutti gli utenti Windows e tutti gli utenti Mac OS X lo hanno), la pagina verrà visualizzata con questo carattere. Se l'utente non dispone di questo carattere, la pagina di un utente Mac OS 9 di lingua russa verrà visualizzata accuratamente nel carattere di sistema standard Helvetica CY e per un utente Unix/Linux verrà visualizzata nel carattere Nimbus Sans L. , che è installato sul 90% degli utenti Unix/Linux. Se gli utenti Unix/Linux appartengono a quel 10% che non dispone di questo carattere, la pagina verrà visualizzata nel carattere serif impostato per impostazione predefinita per la visualizzazione delle pagine Web.
Oltre al fatto che la tabella tiene conto dei font Unix/Linux, c'è anche qualche strana icona CY dopo il solito Helvetica. Scopriamo di cosa si tratta!
Prima del rilascio di Mac OS X, questa riga aveva il seguente significato: per gli utenti Windows, visualizziamo la pagina in Arial, per gli utenti Mac OS 9, nel carattere Helvetica standard e per il resto vediamo la pagina nel sistema carattere sans-serif, configurato per impostazione predefinita nel browser. Ma ancora una volta, una sfumatura importante! Il carattere standard Helvetica di Mac OS 9 non ha il cirillico! Per la pagina in lingua russa, ciò significava quanto segue: per gli utenti Windows visualizziamo la pagina Arial, per gli utenti Mac OS 9 - nel carattere Helvetica standard, che visualizza informazioni illeggibili, e il resto vede la pagina con il sistema sans-serif carattere configurato per impostazione predefinita nel browser.
Per visualizzare correttamente questo set per gli utenti di Mac OS 9, invece di Helvetica non cirillico, è opportuno specificare lo stesso carattere standard di Mac OS 9 Helvetica CY, contenente cirillico.
La lettura dei righelli è cambiata dal rilascio di Mac OS X. Ora esiste un carattere standard comune specificato per Windows/Mac OS X. E se vogliamo che gli utenti di Mac OS 9 siano in grado di vedere l'intenzione del designer, dobbiamo includere un carattere contenente cirillico nella riga del carattere.
Pertanto, anche se non esistono caratteri sicuri, esistono famiglie di caratteri sicure. Sono anche chiamati stack CSS di caratteri. Oltre ai caratteri standard di Windows/Mac OS X, queste righe possono includere anche caratteri equivalenti dal set standard di Mac OS 9 (che non contiene caratteri "sicuri" per impostazione predefinita) e caratteri comuni Unix/Linux.
Qualsiasi progettista di layout prima o poi si imbatte in un momento in cui un designer utilizza un carattere in un layout che non è incluso nell'elenco dei caratteri "sicuri"; Ma questo non è ancora un motivo per dare l’allarme! Ad esempio, i designer utilizzano molto spesso nei layout il carattere Tahoma, che non è incluso in questo elenco. Una linea di caratteri adeguatamente costruita apre la possibilità di utilizzare non solo Tahoma, ma anche altri caratteri. Un numero crescente di designer approfitta di questa opportunità e un progettista di layout competente dovrebbe saperlo.
Di seguito è riportata una tabella aggiuntiva di caratteri che non sono inclusi nell'elenco dei caratteri "sicuri", ma che possono essere utilizzati nei layout.
| finestre | Mac OS | famiglia ancestrale |
|---|---|---|
| Lucida Console | Monaco | Monospazio |
| Lucida Sans Unicode | Lucida Grande | Sans-serif |
| Tahoma | Ginevra C.Y. | Sans-serif |
E se non esistesse l'alfabeto cirillico?
Per i testi in lingua inglese, le tabelle sopra riportate hanno un aspetto leggermente diverso.
| finestre | Mac OS | Unix/Linux | famiglia ancestrale |
|---|---|---|---|
| Arial Nero | Gadget | Nimbus Sans L | Sans-serif |
| Arial | Helvetica | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco | TSCu_Comic | corsivo |
| Courier New | Corriere | NimbusMono L | Monospazio |
| Georgia | * (vedi sotto) | Libro scolastico del secolo L | Serif |
| Impatto | Carbone | Rekha | Sans-serif |
| Times New Roman | Volte | Nimbus romano No9 L | Serif |
| MS Trabucco | Helvetica | Garuda | Sans-serif |
| Verdana | Ginevra | DejaVu Sans | Sans-serif |
Per i caratteri Arial, Courier New e Times New Roman, quando si creano i righelli, è meglio specificare prima il carattere Unix/Linux e poi il carattere Mac OS. Ciò è dovuto ad alcune distorsioni del set di caratteri principali di Linux X11.
I caratteri che non sono inclusi nell'elenco "sicuro", ma che possono essere utilizzati nei layout, sono meglio definiti dagli stack di caratteri CSS basati su questa tabella.
| finestre | Mac OS | Unix/Linux | famiglia ancestrale |
|---|---|---|---|
| Lucida Console | Monaco | - | Monospazio |
| Lucida Sans Unicode | Lucida Grande | Garuda | Sans-serif |
| Linotipia Palatino | Palatino | Garuda** | Sans-serif |
| Tahoma | Ginevra | Kalimati | Sans-serif |
Un trattino nella colonna Unix/Linux indica che gli utenti di questi sistemi operativi molto probabilmente vedranno il carattere predefinito nella pagina.
** In questa riga ha senso posizionare il carattere Garuda prima del Palatino (vedi spiegazione sopra).
Conclusioni:
- Non esistono font assolutamente sicuri. I seguenti caratteri possono essere considerati condizionatamente sicuri:
- Arial
- Arial Nero
- Comic Sans MS
- Courier New
- Georgia
- Impatto
- Times New Roman
- MS Trabucco
- Verdana
- Nell'articolo sono disponibili stack CSS sicuri che tengono conto del supporto per l'alfabeto cirillico nei caratteri.
- Se il supporto per l'alfabeto cirillico non è importante nella pagina, utilizziamo gli stack CSS dell'articolo.
Uno dei compiti principali del web design è scegliere quello giusto caratteri standard. In alternativa sono stati creati servizi di incorporamento di caratteri come Google Web Fonts o Typekit con l'obiettivo di fornire qualcosa di nuovo.
Sono molto facili da usare. Prendiamo come esempio Google Web Fonts.
Scegli il carattere Open Sans, Droid Serif o Lato. Scrivi il codice e incollalo nell'elemento Documento HTML. Sei pronto per fare riferimento ad esso nei CSS! L'intero processo non ha richiesto più di 60 secondi. E tutto è completamente gratuito.
Cosa potrebbe esserci di sbagliato?
Alcuni caratteri potrebbero non essere disponibili per tutti. E questo significa che potrebbero esserci dei problemi. Sei felice di aver scelto un bel carattere per il sito, ma il visitatore della pagina web vede invece una scritta brutta.
Ciò non accadrà se implementi un'opzione di backup.
Quanto è importante utilizzare web font sicuri?
Ogni dispositivo ha il proprio set di caratteri preinstallati. Quale dipende dal sistema operativo. Il problema è che ci sono lievi differenze tra loro.
E i siti web? Come questo? Il carattere visualizzato potrebbe non essere quello originariamente specificato per il sito.
Cosa significa? Diciamo che il designer ha scelto una famiglia di font a pagamento per il sito. Se non li hai installati e non sei fornito da un servizio web speciale, il carattere che vedi è una delle opzioni standard. Ad esempio, Times New Roman.
Pertanto, il testo sullo schermo potrebbe sembrare semplicemente terribile.
E qui caratteri standard per il sito disponibile su tutti i sistemi operativi. Questa è una piccola raccolta disponibile su Windows, Mac, Google, nonché Unix e Linux.
Con l'aiuto di questa selezione, i designer e i proprietari di siti web possono specificare quale carattere deve essere utilizzato come carattere di backup. Ciò ti dà la possibilità di controllare come apparirà la pagina su diversi dispositivi.
Come opzione di riserva, lo sviluppatore seleziona un carattere molto simile a quello originale, ed è proprio questo che verrà mostrato all'utente.
Diamo un'occhiata ad una selezione dei più popolari caratteri standard HTML.
I 15 migliori caratteri sicuri per il Web
Arial
Considerato standard nella maggior parte dei casi. Il carattere più comune " senza grazie"o caratteri sans serif ( che non hanno serif alle estremità delle lettere). Viene spesso utilizzato in Windows per sostituire altri caratteri.
Helvetica
Helvetica è una salvezza per i designer. Questo carattere Web standard funziona quasi sempre ( almeno come rete di sicurezza per altri caratteri).
Times New Roman
Svolge lo stesso ruolo per i caratteri serif di Arial per quelli sans serif. È uno dei più popolari su Dispositivi Windows. Questa è una versione aggiornata del vecchio carattere Times.
Volte
CSS carattere standard Il Times è familiare ai più. Molti lo ricordano a lettere minuscole nelle strette colonne dei vecchi giornali. Il tipo di stampa più comune che è diventato una tradizione.
Courier New
Simile al Times New Roman e utilizzato come variazione dei vecchi classici. È anche considerato un carattere a spaziatura fissa. A differenza dei caratteri serif e sans serif, tutti i caratteri hanno la stessa larghezza.
Corriere
Un vecchio carattere a larghezza fissa utilizzato come fallback su quasi tutti i dispositivi e sistemi operativi.
Verdana
Verdana può essere considerato a buon diritto un vero e proprio web font ( vero carattere web) grazie alle linee semplici che fungono da grazie e alle grandi dimensioni. Le sue lettere sono leggermente allungate, quindi sono facili da leggere sullo schermo.
Georgia
Il carattere web standard Georgia è simile per forma e dimensione al carattere Verdana. I suoi caratteri sono più grandi di altri caratteri della stessa dimensione. Ma è meglio non usarlo in combinazione con altri. Lo stesso Times New Roman al confronto sembra un nano.
Palatino
Il Palatino risale all'epoca rinascimentale. Niente scherzi. Questo è un altro carattere grande perfetto per il web. È comunemente usato nei titoli e nelle pubblicità.
Garamond
Un altro carattere antico apparso nel XVI secolo a Parigi. La sua versione nuova e migliorata è standard sulla maggior parte dei dispositivi Windows. Successivamente questo carattere è stato adottato da altri sistemi operativi.
Bookman
Bookman ( o Bookman vecchio stile) - uno di i migliori caratteri standard per le intestazioni. La sua caratteristica è la leggibilità anche quando si utilizza una dimensione ridotta.
Comic Sans MS
Comic Sans MS è un'alternativa divertente ai caratteri serif.
MS Trabucco
Si tratta di un font a tema medievale originariamente sviluppato da Microsoft a metà degli anni novanta. È stato utilizzato in Windows XP. Oggi viene utilizzato per comporre il testo principale.
Arial Nero
Analogico carattere standard per il sito Arial. È vero, è più grande, più spesso e più resistente. Le sue proporzioni sono simili al carattere Helvetica. Ed è importante. Loro possono sostituire con successo Helvetica senza dover acquistare una licenza.
Impatto
Un altro ottimo font per evidenziare i titoli. Funziona bene con una frase breve composta da più parole, così come con frasi lunghe.
Questo elenco contiene i caratteri comuni a tutti gli attuali sistemi operativi Windows (di fatto, a partire da Windows 98) e i loro equivalenti in Mac OS. Tali caratteri sono talvolta chiamati "caratteri sicuri per il browser" ( caratteri sicuri per il browser). Questo è un piccolo libro di consultazione che utilizzo quando creo pagine Web e penso che sarà utile anche a te.Se sei nuovo nel web design, potresti pensare qualcosa del tipo: “Perché dovrei limitarmi a un set di caratteri così piccolo? Ho una vasta collezione di bellissimi caratteri!” Il fatto è che il browser del visitatore può visualizzare solo i caratteri installati nel suo sistema operativo ( ca. traduttore: Attualmente è già possibile utilizzare praticamente qualsiasi carattere durante la progettazione delle pagine e le sue nuove proprietà @font-face; tuttavia non tutti i browser supportano ancora questa funzione), il che significa che ogni il visitatore della tua pagina deve essere il proprietario dei font che hai scelto. Pertanto, dovresti utilizzare solo i caratteri disponibili su ciascun sistema operativo. Fortunatamente, i CSS hanno una proprietà @famiglia di font, il che rende questo compito più semplice.
Elenco
| Significato @font-family | finestre | Mac | Famiglia |
|---|---|---|---|
| Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | sans-serif |
| "Arial Black", Gadget, sans-serif | Arial Nero | Arial Black, Gadget | sans-serif |
| "Comic Sans MS", corsivo | Comic Sans MS | Comic Sans MS 5 | corsivo |
| "Courier New", Courier, monospazio | Courier New | Corriere Nuovo, Corriere 6 | monospazio |
| Georgia, Serif | Georgia 1 | Georgia | serif |
| Impatto, Carbone, sans-serif | Impatto | Impatto 5, Carbone 6 | sans-serif |
| "Lucida Console", Monaco, monospazio | Lucida Console | Monaco 5 | monospazio |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lucida Sans Unicode | Lucida Grande | sans-serif |
| "Palatino Linotype", "Libro Antiqua", Palatino, serif | Linotipia Palatino, Libro Antiqua 3 | Palatino 6 | serif |
| Tahoma, Ginevra, sans-serif | Tahoma | Ginevra | sans-serif |
| "Times New Roman", Times, serif | Times New Roman | Volte | serif |
| "Trebuchet MS", Helvetica, sans-serif | Trabucco MS 1 | Helvetica | sans-serif |
| Verdana, Ginevra, sans-serif | Verdana | Verdana, Ginevra | sans-serif |
| Simbolo | Simbolo 2 | Simbolo 2 | - |
| Webdings | Webdings 2 | Webdings 2 | - |
| Wingings, "Zapf Dingbats" | Ali 2 | Zapf Dingbats 2 | - |
| "MS Sans Serif", Ginevra, sans-serif | MS Sans Serif 4 | Ginevra | sans-serif |
| "MS Serif", "New York", serif | MS Serif 4 | Nuova York 6 | serif |
1 I font Georgia e Trebuchet MS vengono forniti con Windows 2000/XP e sono inclusi nel pacchetto font di IE (e in effetti vengono forniti con molte applicazioni Microsoft), quindi sono installati su molti computer Windows 98.
2 I caratteri Symbol vengono visualizzati solo in Internet Explorer; in altri browser vengono solitamente sostituiti da un carattere standard (sebbene, ad esempio, il carattere Symbol venga visualizzato in Opera e Webdings in Safari).
3 Il carattere Book Antiqua è quasi identico al Palatino Linotype; Palatino Linotype viene fornito con Windows 2000/XP e Book Antiqua viene fornito con Windows 98.
4 Tieni presente che questi caratteri non sono TrueType, ma bitmap, quindi potrebbero avere un aspetto negativo in alcune dimensioni (sono progettati per essere visualizzati a 8, 10, 12, 14, 18 e 24 pt a 96 DPI).
5 Questi caratteri funzionano solo in Safari in stile standard, ma non funzionano in grassetto o corsivo. Anche Comic Sans MS funziona in grassetto, ma non in corsivo. Altri browser Mac sembrano essere in grado di emulare da soli le proprietà dei caratteri mancanti (grazie a Christian Fecteau per il suggerimento).
6 Questi font sono installati su Mac solo con l'installazione Classic
Schermate
- Mac OS X 10.4.8, Firefox 2.0, ClearType abilitato (grazie a Juris Vecvanags per lo screenshot)
- Mac OS X 10.4.4, Firefox 1.5, ClearType abilitato
- Mac OS X 10.4.11, Safari 3.0.4, ClearType abilitato (grazie a Nolan Gladius per lo screenshot)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType abilitato (grazie a Eric Zavesky per lo screenshot)
- Windows Vista, Internet Explorer 7, ClearType abilitato
- Windows Vista, Firefox 2.0, ClearType abilitato (grazie a Michiel Bijl per lo screenshot)
