La oss se på de vanligste egenskapene knyttet til skrifttyper.

selector {
  font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
  font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
  font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
  font-style: normal | italic | oblique; /* only these values available */
}

Merk

Alle eksempler vil bli vist med samme tekstinnhold for å gi mulighet til å observere hvordan den samme teksten kan vises på ulike måter.

font-family

Egenskapen font-family definerer hvilken eller hvilke skrifttyper som skal brukes til å vise tekstinnhold. Det er mulig å angi enten ett enkelt skrifttypenavn eller en liste med flere skrifttypenavn adskilt med komma.

font-size

Egenskapen font-size angir skriftstørrelsen for visning av tekstinnhold. Den kan være en fast størrelse målt i px eller en relativ størrelse målt i em eller rem enheter.

font-weight

Egenskapen font-weight bestemmer vekten eller tykkelsen på skrifttypen som brukes til å vise tekstinnhold. Den kan angis som en numerisk verdi (f.eks. 300, 500, 700, ...) eller som et nøkkelord (f.eks. lighter, normal eller bold).

font-style

Egenskapen font-style angir stilen på skrifttypen som skal brukes for tekstinnhold. Dette kan være normal (standardverdi), italic eller oblique.

Pseudo-klasse ::first-letter

Pseudo-klassen first-letter velger og formaterer den første bokstaven i et avsnitt eller en overskrift. For å bruke denne pseudo-klassen, må du sette doble :: etter en selektor og legge til nøkkelordet first-letter.

selector::first-letter {
 /* some styles */
}

Se neste eksempel for å forstå hvordan det fungerer.

Oppsummering

• font-family angir skrifttype eller reserve-skrifttyper for tekst. Du kan oppgi flere skrifttyper for å sikre korrekt visning;
• font-size definerer tekststørrelse ved bruk av absolutte enheter (px) eller relative enheter (em, rem);
• font-weight styrer skriftens tykkelse, enten numerisk (100–900) eller med nøkkelord som normal eller bold;
• font-style bestemmer skriftens stil, som normal, italic eller oblique;
• Pseudo-klassen ::first-letter retter seg mot og formaterer den første bokstaven i en tekstblokk, noe som muliggjør kreative typografiske effekter.