Hva er CSS Font Fallbacks

CSS gir to typer fontfamilier i.e. generisk fontfamilie og individuelle skrifter. De generiske familiene har lignende fontfamilier som Serif (Times New Roman, Georgia og Garamond), Monospace (Courier New, Lucida Console, Monaco), etc. Mens den enkelte font bare spesifiserer en bestemt fontfamilie som Arial, Calibri, etc.

De generiske fontfamiliene gir en tilbakeslagsmekanisme som lar oss spesifisere en liste over utseende-lignende skrifter slik at hvis den første skrifttypen ikke er tilgjengelig på noen plattform, kan nettleseren velge den andre skriften, og så videre.

Denne artikkelen presenterer en detaljert forståelse av følgende terminologier relatert til Font Fallbacks:

• Hva er Font Fallbacks i CSS
• Den grunnleggende syntaksen til font -tilbakeslagene
• Hvordan bruke font -tilbakeslag i CSS

Så uten forsinkelse, la oss fortsette!

Font Fallbacks

Det er alltid en sjanse for at en font som ikke finnes på en bestemt plattform, eller at den ikke er installert riktig på en enhet. Derfor brukes font -tilbakeslagene som sikkerhetskopieringsfonter i.e. Vi må spesifisere en liste over sikkerhetskopieringsfonter slik at hvis den første skrifttypen ikke er tilgjengelig, bør nettleseren prøve den neste, og så videre. Font -tilbakeslagene er strukturert med fem generiske fontfamilier som nevnt nedenfor:

• Serif -skrifter i CSS: Spesifiser noen små edgy slag
• Sans-serif-skrifter i CSS: Spesifiser rene linjer, ingen kanter
• Cursive skrifter i CSS: Spesifiser en stil nær menneskelig skriving
• Fantasy -skrifter i CSS: Spesifiser noen fancy fontstiler

Det er en god praksis å legge til den generiske fontfamilien på slutten av listen.

Syntaks

Den grunnleggende syntaks for font -tilbakeslag er beskrevet i følgende utdrag:

Her, i fontfamilien, spesifiserer vi to skrifter, først vil være nettleserens førstevalg/websikker skrift mens de resterende vil være listen over font-fallbacks.

Hvordan bruke font -tilbakeslag i CSS

Fonter har stor innvirkning på brukergrensesnittet til en hvilken som helst webside, så det er veldig viktig å velge den mest passende Fallback -skriften.e. velger “Lucida Console” som en sikkerhetskopi av "Times New Roman" Font ville ikke være et godt valg. Å velge en backup -stil i samme skriftfamilie vil bli betraktet som en god praksis jeg.e. “Tider” vil være en bedre tilbakeslag for "Times New Roman".

Eksempel

La oss vurdere den undergitte koden for å forstå konseptet Font Fallback i CSS:

Html

Fonter Fallbacks i CSS

Første avsnitt

Andre avsnitt

CSS

kropp
Font-Family: Cambria, Cochin, Georgia, Times, 'Times New Roman', Serif;

Her i ovennevnte kode vil nettleseren først prøve å spesifisere "Cambria" -fontstilen

• Hvis den er tilgjengelig, vil hele kroppen bli stylet i henhold til "Cambria".
• Hvis "Cambria" ikke er tilgjengelig, vil nettleseren bruke det andre alternativet I.e. “Cochin”
• Tilsvarende vil nettleseren bruke et annet alternativ hvis tidligere alternativer ikke fungerer som det skal:

Ovennevnte utgang verifiserer at nettleseren bruker "Cambria" -stilen.

Anta at den første skrifttypen ikke fungerer av en eller annen grunn, så bruker nettleseren alternativet Fallback som vist på følgende skjermbilde:

Samme kode utført, men denne gangen på grunn av noen grunner til "Cambria" -fontstilen er ikke tilgjengelig, så nettleseren bruker fallback -alternativet i.e. “Cochin”.

Konklusjon

CSS Font Fallbacks gir en sikkerhetskopi for skriftene i.e. Hvis den ene skriften ikke fungerer ordentlig, vil nettleseren prøve den andre. For god koding praksis, skriv en generisk fontfamilie på slutten av listen og velg Font Fallback i samme skriftfamilie. Denne oppskrivningen demonstrerte hva som er en font tilbakeslag, hvordan den er strukturert og hvordan du bruker den.