Se non conosci il web design, potresti pensare qualcosa del tipo: "Perché dovrei limitarmi a un set di caratteri così piccolo? Ho una vasta collezione di fantastici font!" Il fatto è che il browser del visitatore può visualizzare solo i caratteri installati nel suo sistema operativo ( ca. traduttore: al giorno d'oggi è già possibile utilizzare praticamente qualsiasi tipo di carattere nella progettazione delle pagine utilizzando CSS 3 e la sua nuova 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 caratteri che hai scelto. Pertanto, dovresti utilizzare solo i caratteri disponibili in ciascun sistema operativo. Fortunatamente, i CSS hanno una proprietà @ famiglia di font che rende questo compito più facile.
Elenco
| @ Valore della famiglia di caratteri | 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", Corriere, monospazio | Courier New | Corriere Nuovo, Corriere 6 | monospazio |
| Georgia, grazie | Georgia 1 | Georgia | grazie |
| Impact, 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 | Linotipo Palatino, Libro Antiqua 3 | Palatino 6 | grazie |
| Tahoma, Ginevra, sans-serif | Tahoma | Ginevra | sans-serif |
| "Times New Roman", Times, grazie | Times New Roman | Volte | grazie |
| "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 | Webding 2 | Webding 2 | - |
| Wingdings, "Zapf Dingbats" | Wingdings 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 | New York 6 | grazie |
1 I font Georgia e Trebuchet MS vengono forniti con Windows 2000 / XP e sono inclusi in IE Font Pack (e in effetti vengono forniti con molte applicazioni Microsoft), quindi sono installati su molti computer Windows 98.
2 I caratteri dei simboli vengono visualizzati solo in Internet Explorer, in altri browser vengono solitamente sostituiti con un carattere standard (sebbene, ad esempio, il carattere dei simboli venga visualizzato in Opera e Webdings in Safari).
3 Book Antiqua è quasi identico al Palatino Linotype; Palatino Linotype viene fornito con Windows 2000 / XP e Book Antiqua viene fornito con Windows 98.
4 Notare che questi caratteri non sono TrueType, ma caratteri bitmap, quindi potrebbero sembrare brutti con 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 stile standard in Safari, ma non funzionano in grassetto o corsivo. Comic Sans MS funziona anche in grassetto ma non in corsivo. Altri browser Mac sembrano emulare bene le proprietà mancanti dei caratteri da soli (grazie a Christian Fecteau per il suggerimento).
6 Questi caratteri vengono installati su Mac solo durante 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)
Quando si inizia a comporre il layout, è necessario, in particolare, specificare i caratteri utilizzati nella pagina nel CSS. Spesso il designer digita con caratteri diversi non solo il testo principale della pagina, ma anche varie intestazioni, loghi, monogrammi:
Un buon progettista, come un buon progettista di layout, sa che il browser può utilizzare solo i caratteri installati sul computer dell'utente per visualizzare la pagina. Cioè, i caratteri possono essere suddivisi approssimativamente in due categorie:
- Caratteri che verranno visualizzati senza problemi per la stragrande maggioranza degli utenti.
- Caratteri che un gruppo di utenti abbastanza grande non ha.
Se un designer ha utilizzato caratteri tipografici di tipo 2 per creare, ad esempio, un logo o grandi intestazioni statiche, non dovresti esitare a utilizzare la tecnica. Lo svantaggio dell'uso di questa tecnica è l'inflessibilità. In caso di modifiche al 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 usare la tecnica direttamente dipende dalla probabilità di cambiare il testo. Pertanto, ad esempio, il testo generale della pagina non può essere realizzato con caratteri non standard! Un designer competente non lo farebbe mai. E se un designer diventa verde, un buon designer di layout è semplicemente obbligato a correggere il suo errore: nel layout, sostituisci questo carattere con uno standard più simile.
Ma come distinguere i caratteri del primo gruppo dal secondo? È chiaro che non puoi fare affidamento su un set di font 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, hanno diversi set di caratteri. È possibile trovare un elenco di caratteri standard per diverse versioni di Windows, ad esempio, nell'articolo Caratteri Windows standard e un elenco di caratteri Mac OS standard nella pagina Caratteri forniti con Mac OS. Per quanto riguarda i sistemi operativi Unix/Linux, non hanno un singolo set di caratteri. Molti utenti Linux utilizzano il set di caratteri DejaVu, in particolare su Ubuntu sono installati di default. Secondo le statistiche di http://www.codestyle.org, molti utenti Unix/Linux hanno anche set di caratteri URW, Free e altri installati. Secondo le stesse statistiche, oltre il 60% degli utenti Unix/Linux dispone di caratteri Core per il Web sui propri computer, che fino al 2002 erano ufficialmente disponibili per il download gratuito sul sito Web di Microsoft.
Affinché la pagina venga visualizzata come previsto dal designer, in qualsiasi sistema operativo, è possibile specificare diversi caratteri nella proprietà CSS, separati da virgole.
Questa proprietà specifica un elenco prioritario di nomi di famiglie di caratteri e/o nomi di famiglie generiche. Secondo la specifica CSS2, ci sono due tipi di nomi di famiglie di caratteri:
- Il nome della famiglia di caratteri scelta. Ad esempio "Times new Roman", "Arial" e altri. I nomi delle famiglie di caratteri che contengono spazi devono essere racchiusi tra virgolette. Se mancano le virgolette, qualsiasi 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 monospace (con lettere della stessa larghezza).
Pertanto, per il design, viene preso un carattere standard dal sistema operativo Windows, viene selezionato uno simile per Mac OS e Unix / Linux, una famiglia di caratteri comune è impostata e pronta.
Ma non tutto è così semplice. Scaviamo più in dettaglio.
Trovare caratteri sicuri per il Web
Internet è stato storicamente conosciuto come font Web "sicuro". Un carattere sicuro è un carattere standard su tutti i sistemi operativi. Poiché si può solo sognare un tale stato di cose, allora non esistono font assolutamente sicuri!
Alcuni caratteri possono essere definiti sicuri con alcune avvertenze.
La base per definire i caratteri "sicuri" erano i caratteri del sistema operativo Windows più comune, utilizzati anche in altri sistemi operativi. Un esempio di tale utilizzo è il già citato Core font per il pacchetto di font Web, che, secondo le statistiche, è stato scaricato 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 la runa.
Il set di caratteri incluso nella fornitura standard di Mac OS X (questo sistema operativo è il più comune tra gli utenti di Mac OS) include tutti i caratteri nei caratteri Core per il set Web.
Pertanto, sulla base dei caratteri Windows utilizzati in altri sistemi operativi, è stato formato il seguente elenco di caratteri Web cosiddetti "sicuri":
- Arial
- Arial nero
- Comic Sans MS
- Courier New
- Georgia
- Impatto
- Times New Roman
- Trabucco MS
- Verdana
Il carattere Webdings contiene un set di icone, quindi non può essere utilizzato per il contenuto. Andale Mono non è molto utilizzato perché è poco adatto alla lettura dello schermo di tutti i giorni e non tutti gli utenti Windows lo hanno.
Tutti questi caratteri sono disponibili per ogni utente Windows, utente Mac OS X e la stragrande maggioranza degli utenti Unix/Linux (cioè quelli che hanno i caratteri Core per il Web installati).
Ma per il resto? Dopotutto, vuoi che l'idea del designer sia vista dal maggior numero possibile di utenti!
Leggi questo nella seconda parte della pubblicazione.
Quando si inizia a comporre il layout, è necessario, in particolare, specificare i caratteri utilizzati nella pagina nel CSS. Spesso il designer digita con caratteri diversi non solo il testo principale della pagina, ma anche vari titoli, loghi, monogrammi.
Un buon progettista, come un buon progettista di layout, sa che il browser può utilizzare solo i caratteri installati sul computer dell'utente per visualizzare la pagina. Cioè, i caratteri possono essere suddivisi approssimativamente in due categorie:
- Caratteri che verranno visualizzati senza problemi per la stragrande maggioranza degli utenti.
- Caratteri che un gruppo di utenti abbastanza grande non ha.
Se un designer ha utilizzato caratteri di tipo 2 per creare, ad esempio, un logo o grandi intestazioni statiche, puoi sentirti libero di utilizzare il metodo di sostituzione del testo con un'immagine. Lo svantaggio dell'uso di questa tecnica è l'inflessibilità. In caso di modifiche al 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 usare la tecnica direttamente dipende dalla probabilità di cambiare il testo. Pertanto, ad esempio, il testo generale della pagina non può essere realizzato con caratteri non standard! Un designer competente non lo farebbe mai. E se un designer diventa verde, un buon designer di layout è semplicemente obbligato a correggere il suo errore: nel layout, sostituisci questo carattere con uno standard più simile.
Ma come distinguere i caratteri del primo gruppo dal secondo? È chiaro che non puoi fare affidamento su un set di font 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, hanno diversi set di caratteri. È possibile trovare un elenco di caratteri standard per diverse versioni di Windows, ad esempio, nell'articolo Caratteri Windows standard e un elenco di caratteri Mac OS standard nella pagina Caratteri forniti con Mac OS. Per quanto riguarda i sistemi operativi Unix/Linux, non hanno un singolo set di caratteri. Molti utenti Linux utilizzano il set di caratteri DejaVu, in particolare su Ubuntu sono installati di default. Secondo le statistiche di http://www.codestyle.org, molti utenti Unix/Linux hanno anche set di caratteri URW, Free e altri installati. Secondo le stesse statistiche, oltre il 60% degli utenti Unix/Linux dispone di caratteri Core per il Web sui propri computer, che fino al 2002 erano ufficialmente disponibili per il download gratuito sul sito Web di Microsoft.
Affinché la pagina venga visualizzata come previsto dal designer, in qualsiasi sistema operativo, è possibile specificare diversi caratteri nella proprietà CSS font-family, separati da virgole.
Questa proprietà specifica un elenco prioritario di nomi di famiglie di caratteri e/o nomi di famiglie generiche. Secondo la specifica CSS2, ci sono due tipi di nomi di famiglie di caratteri:
- Il nome della famiglia di caratteri scelta. Ad esempio "Times new Roman", "Arial" e altri. I nomi delle famiglie di caratteri che contengono spazi devono essere racchiusi tra virgolette. Se mancano le virgolette, qualsiasi 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 monospace (con lettere della stessa larghezza).
I cognomi generici sono parole chiave e non devono essere citati.
Pertanto, per il design, viene preso un carattere standard dal sistema operativo Windows, viene selezionato uno simile per Mac OS e Unix / Linux, una famiglia di caratteri comune è impostata e pronta.
Ma non tutto è così semplice. Scaviamo più in dettaglio.
Trovare caratteri sicuri per il Web
Internet è stato storicamente conosciuto come font Web "sicuro". Un carattere sicuro è un carattere standard su tutti i sistemi operativi. Poiché si può solo sognare un simile stato di cose, non esistono font assolutamente sicuri!
Alcuni caratteri possono essere definiti sicuri con alcune avvertenze.
La base per definire i caratteri "sicuri" erano i caratteri del sistema operativo Windows più comune, utilizzati anche in altri sistemi operativi. Un esempio di tale utilizzo è il già citato Core font per il pacchetto di font Web, che, secondo le statistiche, è stato scaricato 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 la runa.
Il set di caratteri incluso nella fornitura standard di Mac OS X (questo sistema operativo è il più comune tra gli utenti di Mac OS) include tutti i caratteri nei caratteri Core per il set Web.
Pertanto, sulla base dei caratteri Windows utilizzati in altri sistemi operativi, è stato formato il seguente elenco di caratteri Web cosiddetti "sicuri":
- Arial
- Arial nero
- Comic Sans MS
- Courier New
- Georgia
- Impatto
- Times New Roman
- Trabucco MS
- Verdana
Il carattere Webdings contiene un set di icone, quindi non può essere utilizzato per il contenuto. Andale Mono non è molto utilizzato perché è poco adatto alla lettura dello schermo di tutti i giorni e non tutti gli utenti Windows lo hanno.
Tutti questi caratteri sono disponibili per ogni utente Windows, utente Mac OS X e la stragrande maggioranza degli utenti Unix/Linux (cioè quelli che hanno i caratteri Core per il Web installati).
Ma per il resto? Dopotutto, vuoi che l'idea del designer sia vista dal maggior numero possibile di utenti!
Caratteri cirillici
Una caratteristica specifica di Runet è il problema con le codifiche delle pagine e il supporto per il cirillico nei caratteri. Per evitare problemi con le varie codifiche dei 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 l'alfabeto cirillico.
Di seguito è riportata una tabella delle corrispondenze dei caratteri.
| finestre | Mac OS | Unix/Linux | Famiglia ancestrale |
|---|---|---|---|
| Arial nero | Helvetica CY | Nimbus sans l | Sans-serif |
| Arial | Helvetica CY | Nimbus sans l | Sans-serif |
| Comic Sans MS | Monaco CY | * (vedi sotto) | corsivo |
| Courier New | * (vedi sotto) | Nimbus Mono L | monospazio |
| Georgia | * (vedi sotto) | Century Schoolbook L | serif |
| Impatto | Carbone CY | * (vedi sotto) | Sans-serif |
| Times New Roman | Orari CY | Nimbus Roman No9 L | serif |
| Trabucco MS | Helvetica CY | * (vedi sotto) | Sans-serif |
| Verdana | Ginevra CY | DejaVu Sans | Sans-serif |
* nella colonna di fronte al carattere significa che il sistema operativo non ha equivalenti cirillici nativi di Windows. Ma allo stesso tempo, c'è un'alta probabilità che questo font 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 nel CSS:
corpo (famiglia dei 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 dell'utente di lingua russa di Mac OS 9 verrà visualizzata accuratamente nel carattere di sistema standard Helvetica CY e per l'utente Unix / Linux verrà visualizzata nel Nimbus Sans L font, che viene installato dal 90% degli utenti Unix/Linux. Se l'utente Unix/Linux rientra nel 10% che non ha questo carattere, la pagina verrà visualizzata con il carattere serif predefinito per la navigazione web.
Oltre al fatto che la tabella tiene conto dei font Unix/Linux, c'è anche una strana icona CY dopo la solita 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 Arial, per gli utenti Mac OS 9, con il carattere standard Helvetica, e gli altri vedono la pagina con il sistema sans- carattere serif impostato per impostazione predefinita nel browser. Ma ancora, una sfumatura importante! Il carattere standard di Mac OS 9 Helvetica 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 standard Helvetica, che mostra informazioni illeggibili, e il resto vede la pagina con il sistema sans- carattere serif impostato per impostazione predefinita nel browser.
Per una corretta visualizzazione di questo set per gli utenti di Mac OS 9 invece di Helvetica non cirillizzato, ha senso specificare lo stesso standard per il carattere Helvetica CY di Mac OS 9 contenente cirillico.
La lettura dei righelli è cambiata dal rilascio di Mac OS X. Un carattere standard comune è ora specificato per Windows/Mac OS X. E se vogliamo che gli utenti di Mac OS 9 siano in grado di vedere l'idea del designer, devono scrivere un carattere contenente cirillico nella riga del carattere.
Pertanto, mentre non esistono caratteri sicuri, esistono righelli di caratteri sicuri. Sono anche chiamati Stack di font CSS... Oltre ai caratteri standard di Windows/Mac OS X, queste linee 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 tipografo prima o poi si imbatte in un momento in cui un designer utilizza un font in un layout che non è incluso nell'elenco di quelli "sicuri"; Ma questo non è un motivo per suonare l'allarme! Ad esempio, i designer usano spesso il carattere Tahoma sui loro layout, che non è incluso in questo elenco. Una linea di caratteri adeguatamente costruita apre la possibilità di utilizzare non solo Tahoma, ma anche altri caratteri. Sempre più designer stanno sfruttando questa opportunità e un designer di layout competente dovrebbe esserne consapevole.
Di seguito è riportata una tabella aggiuntiva di caratteri che non sono inclusi nell'elenco dei "sicuri", ma possono essere utilizzati sui layout.
| finestre | Mac OS | Famiglia ancestrale |
|---|---|---|
| Lucida Console | Monaco | monospazio |
| Lucida Sans Unicode | Lucida grande | Sans-serif |
| Tahoma | Ginevra CY | Sans-serif |
E se senza l'alfabeto cirillico?
Per i testi in lingua inglese, le tabelle sopra 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 | Nimbus Mono L | monospazio |
| Georgia | * (vedi sotto) | Century Schoolbook L | serif |
| Impatto | Carbone | Rekha | Sans-serif |
| Times New Roman | Volte | Nimbus Roman No9 L | serif |
| Trabucco MS | Helvetica | Garuda | Sans-serif |
| Verdana | Ginevra | DejaVu Sans | Sans-serif |
Per i caratteri Arial, Courier New e Times New Roman, è meglio specificare prima il carattere per Unix/Linux e poi per Mac OS durante la composizione dei righelli. Ciò è dovuto a una certa curvatura del set di caratteri principali di Linux X11.
I caratteri che non sono nell'elenco "sicuro" ma che possono essere utilizzati nei layout sono meglio definiti con gli 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 |
| linotipo palatino | Palatino | Garuda ** | Sans-serif |
| Tahoma | Ginevra | Kalimati | Sans-serif |
Un trattino nella casella Unix/Linux indica che è probabile che gli utenti di quei sistemi operativi vedranno il carattere predefinito per la visualizzazione delle pagine sulla pagina.
** In questa linea, ha senso anteporre Garuda a Palatino (vedi spiegazione sopra).
Conclusioni:
- Non ci sono caratteri completamente sicuri. I seguenti caratteri possono essere chiamati condizionalmente sicuri:
- Arial
- Arial nero
- Comic Sans MS
- Courier New
- Georgia
- Impatto
- Times New Roman
- Trabucco MS
- Verdana
- Gli stack CSS sicuri che tengono conto del supporto per il cirillico nei caratteri sono disponibili nell'articolo.
- Se il supporto cirillico non è importante nella pagina, usa gli stack CSS dall'articolo.
I caratteri sono una parte integrante e molto importante del design del sito Web, sottolineandone l'individualità. L'articolo parlerà del collegamento di caratteri standard a una pagina Web, sono anche chiamati caratteri di sistema e nel prossimo articolo daremo un'occhiata più da vicino alla scelta e al collegamento dei caratteri da Google Fonts a un sito WordPress.
Caratteri di sistema, standard e sicuri
Qualsiasi browser visualizza solo i caratteri presenti nel sistema operativo del computer. Pertanto, sono chiamati sistema e vengono installati per impostazione predefinita insieme al sistema operativo.
E sono chiamati caratteri sicuri, perché è più probabile che vengano visualizzati nel browser per la maggior parte dei visitatori del sito.
Ma l'intero problema è che diversi set di caratteri sono installati su diversi sistemi operativi. È possibile visualizzare i set di caratteri forniti insieme al sistema operativo sulle pagine ufficiali di Windows, Mac OS. E in Unix/Linux non esiste alcuno standard.
Affinché la pagina web venga visualizzata secondo l'idea del designer, è stata impostata una proprietà del carattere chiamata font-family in CSS.
La proprietà della famiglia dei font
La proprietà font-family è una famiglia di font raggruppata secondo criteri specifici.
Famiglie generiche:
- serif - caratteri con grazie alle estremità;
- sans-serif - caratteri sans serif;
- corsivo - caratteri corsivi;
- fantasia - caratteri decorativi;
- monospace - carattere monospace (con lettere della stessa larghezza).
Pertanto, i caratteri simili di diversi sistemi operativi vengono semplicemente selezionati e collegati alla pagina Internet separati da virgole.
Ecco un esempio, solo per la percezione visiva. Torneremo su questo esempio quando esamineremo la connessione diretta dei caratteri.
Basta seguire la logica e tutto diventerà cristallino.
Corpo (famiglia di caratteri: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;)
Analizziamo cosa c'è scritto:
- OC Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- La famiglia generica è sans-serif.
I cosiddetti caratteri sicuri
Basato su Windows OC, è stato compilato un elenco di diversi caratteri sicuri.
- Arial
- Arial nero
- Comic Sans MS
- Courier New
- Georgia
- Impatto
- Times New Roman
- Trabucco MS
- Verdana
Tutti questi caratteri sono installati su Mac OS X, Windows e molti utenti Unix/Linux che hanno i caratteri Core per il Web installati.
Per gli altri utenti è prevista una tabella di corrispondenza. Contiene una selezione di caratteri simili appartenenti a una famiglia specifica.
Tabella di corrispondenza e appartenenza dei font a una specifica famiglia:
| finestre | Mac OS | Unix/Linux | Famiglia ancestrale |
|---|---|---|---|
| Arial nero | Helvetica CY | Nimbus sans l | Sans-serif |
| Arial | Helvetica CY | Nimbus sans l | Sans-serif |
| Comic Sans MS | Monaco CY | * (vedi sotto) | corsivo |
| Courier New | * (vedi sotto) | Nimbus Mono L | monospazio |
| Georgia | * (vedi sotto) | Century Schoolbook L | serif |
| Impatto | Carbone CY | * (vedi sotto) | Sans-serif |
| Times New Roman | Orari CY | Nimbus Roman No9 L | serif |
| Trabucco MS | Helvetica CY | * (vedi sotto) | Sans-serif |
| Verdana | Ginevra CY | DejaVu Sans | Sans-serif |
* Quando colleghi i caratteri, puoi tranquillamente fare affidamento su di esso. La tabella supporta caratteri cirillici, alfabeto russo.
Ho preso la tabella stessa in questo articolo.
Collegamento dei caratteri di sistema al sito
Esistono diversi modi per collegare i caratteri di sistema al sito. Inoltre, puoi collegare diversi tipi di carattere a diversi paragrafi. Applica caratteri diversi a parole e frasi specifiche. Tutto questo cercherò di considerare ora.
Quindi mettiamo tutto in ordine.
Collegamento di caratteri in un file CSS
Se hai bisogno di connetterti carattere di base per l'intero documento, devi solo aggiungere il seguente codice al foglio di stile:
Corpo (famiglia di caratteri: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; / * aggiungi il carattere all'intero documento * / dimensione del carattere: 16px; / * imposta inoltre la dimensione del carattere * / carattere -weight: 400; / * imposta il peso del carattere, o invece di 400, imposta il valore su normale * /)
Assegnare un carattere per le intestazioni H1, H2, H3, H4, H5, H6, (qui è lo stesso, basta impostare il valore del peso per evidenziare le intestazioni):
H1, h2, h3, h4, h5, h6 (font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; / * aggiungi carattere alle intestazioni * / font-weight: 600; / * set grassetto del carattere, o invece di 600, imposta il valore - grassetto * /)
Assegniamo un carattere solo ai paragrafi:
P (font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; / * aggiunge font ai paragrafi, può essere applicato a liste li, div, form e altri elementi * / font-weight: normale ; / * imposta il grassetto del carattere, o invece di 600, imposta il valore - grassetto * / font-size: 16px; / * imposta inoltre la dimensione del carattere per i paragrafi * /)
a assegna un carattere solo a un paragrafo specifico, o un blocco, devi prima assegnare una classe a questo blocco nel documento HTML
Ecco un paragrafo con un carattere assegnabile
E nella tabella CSS, scrivi il seguente codice:
Font (font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; / * collega il font a paragrafi specifici, può essere applicato a singoli elenchi li, div, form e altri elementi * / font- peso: normale; / * imposta lo spessore del carattere, o invece di 600, imposta il valore - grassetto * / font-size: 16px; / * imposta inoltre la dimensione del carattere per i paragrafi * /)
Ora, a ogni tag - un elemento html con classe .font (chiamalo come preferisci) verrà assegnato un carattere Arial, con un peso normale (400) e una dimensione di 16 pixel.
Allo stesso modo, puoi assegnare diversi tipi di carattere a elenchi, tabelle, interi div, singole parole o frasi.
Collegamento di caratteri in un documento HTML
I caratteri sono collegati direttamente al documento HTML allo stesso modo di un file CSS, l'unica differenza è nella sintassi. Puoi collegare i caratteri nel titolo del documento - tra i tag
(simile a un file CSS), o inline - assegnazione di proprietà direttamente ai tag html.Includiamo i caratteri nell'intestazione, tra i tag
... Per fare ciò, aggiungi il seguente codice al documento html:
Non mi ripeterò qui. Tutto è simile alla connessione nel file CSS.
Caratteri in linea, direttamente agli elementi del sito. Ecco alcuni esempi:
Allegare il carattere al paragrafo
Ecco un paragrafo con il testo
Evidenzia una parola separata in grassetto e assegna un carattere separato dal carattere principale
Ecco un paragrafo con il testo, e questo è parola da evidenziare in grassetto
Ecco il link
Allo stesso modo, assegniamo i caratteri a qualsiasi tag html.
Tuttavia, è meglio e consigliato dare uno stile agli elementi tramite un file CSS. Per prima cosa, devi solo modellare il CSS una volta e quindi assegnare solo la classe che desideri all'HTML. In secondo luogo, scrivendo stili in linea, viene creato contenuto duplicato. Queste proprietà e classi, a quanto pare, sono indicizzate dai motori di ricerca e ho sentito che il W3C vuole abolire del tutto l'inline. Anche se a volte è più facile scrivere stili in questo modo.
Qualunque cosa. Resta sintonizzato per gli aggiornamenti del sito, sto preparando un articolo sul collegamento di font non standard e originali al sito in modo che vengano visualizzati correttamente in tutti i browser. Ti presenterò anche diversi buoni servizi in cui puoi scegliere caratteri non standard.
