Quali sono i fallback del carattere CSS

CSS fornisce due tipi di famiglie di carattere i.e. Famiglia di carattere generici e caratteri individuali. Le famiglie generiche hanno famiglie di carattere dall'aspetto simile come Serif (Times New Roman, Georgia e Garamond), Monospace (Courier New, Lucida Console, Monaco), ecc. Mentre il carattere individuale specifica solo una famiglia di carattere particolare come Arial, Calibri, ecc.

Le famiglie di caratteri generici forniscono un meccanismo di fallback che ci consente di specificare un elenco di caratteri simili in modo che se il primo carattere non è disponibile su nessuna piattaforma, il browser può scegliere il secondo carattere e così via.

Questo articolo presenta una comprensione dettagliata delle seguenti terminologie relative ai fallini dei caratteri:

• Quali sono i fallback del carattere in CSS
• La sintassi di base dei fallback del carattere
• Come usare i fallback dei caratteri in CSS

Quindi, senza alcun ritardo, procediamo!

Fallback del carattere

C'è sempre la possibilità che un carattere non si trova su una piattaforma specifica o non sia installato correttamente su un dispositivo. Pertanto, i fallback di carattere sono usati come caratteri di backup i.e. Dobbiamo specificare un elenco di caratteri di backup in modo che se il primo carattere non è disponibile, il browser dovrebbe provare quello successivo e così via. I fallback di carattere sono strutturati con cinque famiglie di carattere generici come menzionato di seguito:

• Caratteri serif in CSS: Specifica alcuni piccoli colpi spigolosi
• Caratteri sans-serif in CSS: Specificare le linee pulite, nessun bordi
• Fonti corsivi in ​​CSS: Specifica uno stile vicino alla scrittura umana
• Fonti fantasy in CSS: Specifica alcuni stili di carattere fantasiosi

È una buona pratica che aggiungere la famiglia dei caratteri generici alla fine dell'elenco.

Sintassi

La sintassi di base dei fallback di carattere è descritta nel seguente frammento:

Qui, nella famiglia dei caratteri, specifichiamo due caratteri, il primo sarà il carattere di prima scelta/web-safe del browser mentre il restante sarà l'elenco dei fallback del carattere.

Come usare i fallback dei caratteri in CSS

I caratteri hanno un grande effetto sull'interfaccia utente di qualsiasi pagina web, quindi la scelta del carattere di fallback più adatto è molto importante.e. Scegliere "Console Lucida" come backup del "Times New Roman" Il carattere non sarebbe una buona scelta. Scegliere uno stile di backup all'interno della stessa famiglia di caratteri sarebbe considerata una buona pratica.e. "Volte" sarà un migliore fallback per il "Times New Roman".

Esempio

Consideriamo il codice di seguito per comprendere il concetto di fallback di carattere in CSS:

Html

Fonts Fallbacks in CSS

Primo paragrafo

Secondo paragrafo

CSS

corpo
Font-Family: Cambria, Cochin, Georgia, Times, "Times New Roman", Serif;

Qui nel codice sopra offerto, il browser proverà prima a specificare lo stile del carattere "Cambria"

• Se è disponibile, l'intero corpo verrà disegnato secondo la "Cambria".
• Se per qualche motivo "Cambria" non è disponibile, il browser utilizzerà la seconda opzione i.e. "Cochin"
• Allo stesso modo il browser utilizzerà un'altra opzione se le opzioni precedenti non funzionano correttamente:

L'uscita sopra verifica che il browser utilizza lo stile "Cambria".

Supponiamo che il primo carattere non funzioni per qualche motivo, quindi il browser utilizzerà l'opzione di fallback come mostrato nella schermata seguente:

Lo stesso codice eseguito, ma questa volta per alcuni motivi lo stile del carattere "Cambria" non è disponibile, quindi il browser utilizza l'opzione di fallback i.e. "Cochin".

Conclusione

I fallback del carattere CSS forniscono un backup per i caratteri i.e. Se un carattere non funziona correttamente, il browser proverà l'altro. Per una buona pratica di codifica scrivi una famiglia di caratteri generici alla fine dell'elenco e scegli il fallback di carattere all'interno della stessa famiglia di caratteri. Questo articolo ha dimostrato ciò che è un fallback, come è strutturato e come usarlo.