Font-familie - CSS-tricks

Anonim

Den font-familyegenskab definerer skrifttype, der anvendes på den valgte enhed. Den valgte skrifttype er ikke et enkelt skrifttypeansigt, men en "familie" og kan derfor være afhængig af andre typografiske egenskabsværdier for at vælge det rigtige ansigt inden for familien.

body ( font-family: Arial, Helvetica, sans-serif; )

En værdi kan være en af ​​følgende:

  • Et fontfamilienavn, der matcher en skrifttype, der er indlejret på siden eller tilgængelig på brugerens system.
  • En række efternavne adskilt med kommaer, som kan omfatte et generisk efternavn

Hvis der bruges flere familienavne, vælger browseren det første, den finder enten integreret på siden ved hjælp af @font-faceeller installeret på brugerens operativsystem.

For font-familyder er ingen specifik standard eller startværdi; den oprindelige værdi afhænger altid af browseren og / eller operativsystemet.

Generiske efternavne

Hvis der anvendes flere værdier til en enkelt erklæring, anbefales det at have en generisk familie, der sidst er opført som et tilbagefald for at sikre den bedste typografiske oplevelse:

code ( font-family: Courier, Monaco, monospace; )

I ovenstående eksempel er "Courier" og "Monaco" ægte familienavne på egentlige skrifttyper, mens "monospace" kun er en generel reference til enhver skrifttype, der er installeret på brugerens system, der er monospaced.

Hvis de to første ikke findes installeret, vælger browseren den bedste mulighed, men kun fra monospace-skrifttyper. Uden den generiske familie ville skrifttypen være standard til hvad der er standardskrifttypen på brugerens system (sandsynligvis en serif eller sans-serif), hvilket ville være uønsket.

Generiske familienavne omfatter serif, sans-serif, cursive, fantasy, og monospace.

Hvis et efternavn matcher et generisk efternavn, skal familienavnet anføres for at angive, at det ikke er generisk.

Navne på flere ord

Hvis et efternavn indeholder flere ord adskilt af mellemrum, anbefales det at anføre efternavnet i anførselstegn (enkelt eller dobbelt):

code ( font-family: "Times New Roman", Georgia, serif; )

Dette er ikke altid nødvendigt, men det er generelt sikrere at inkludere citaterne for ethvert familienavn, der har mellemrum eller specialtegn.

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Arbejder Arbejder Arbejder Arbejder Arbejder Arbejder Arbejder