Egenskapen font-size

Egenskapen font-size setter skriftstørrelsen på teksten. Verdien til egenskapen er enhver enhet for størrelser (som regel px, em eller rem) eller spesielle nøkkelord (brukes svært sjelden).

Syntaks

cssvelger {
  font-size: verdi;
}

Verdier i form av nøkkelord

Standardverdi: medium.

Eksempel

La oss sette skriftstørrelsen for avsnitt til 20px:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-size: 20px;
}

Результат:

Eksempel

I dette eksemplet er størrelsen for avsnittet satt til 16px, og for span inni det - 150%. I dette tilfellet vil skriftstørrelsen for span være 150% av sin forelder, dvs. avsnittet, og dens faktiske størrelse vil være 16px * 150% = 24px:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

Eksempel

I dette eksemplet er størrelsen for avsnittet satt til 16px, og for span inni det - larger. I dette tilfellet vil skriftstørrelsen for span være større enn forelderens (avsnittet):

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

Eksempel

Vær oppmerksom på at skrifter med forskjellig font-family og samme font-size visuelt kan være helt forskjellige i størrelse (for å løse dette problemet, se egenskapen font-size-adjust).

I eksemplet nedenfor er font-size satt til 16px for begge avsnitt, men forskjellig font-family:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: