Font - CSS-trikid | CSS-i almanahh 2025

fontVara CSS on lühem vara, mis ühendab kõiki järgmisi sub-omadusi ühe deklaratsiooni.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Seal on seitse fontalaomadust, sealhulgas:

font-stretch: see omadus määrab fondi laiuse, näiteks tihendatud või laiendatud.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: muudab teksti kursiivis või kaldu.
- normal
- italic
- oblique
- inherit
font-variant: muudab sihtteksti väikesteks suurtähtedeks.
- normal
- small-caps
- inherit
font-weight: määrab fondi kaalu või paksuse.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: määrab fondi kõrguse.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: määrab sisemiste elementide kohal ja all oleva ruumi hulga.
- normal
- number (font-size multiplier)
- percentage
font-family: määrab elemendile rakendatava fondi.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font Shorthand Gotchas

fontVara ei ole nii lihtne, kui teised stenografist omadused, osalt süntaks nõuded, ja osaliselt seetõttu, et pärimise küsimustes.

Siin on kokkuvõte mõnedest asjadest, mida peaksite selle lühikese omaduse kasutamisel teadma.

Kohustuslikud väärtused

Kaks fontstenogrammis olevat väärtust on kohustuslikud: font-sizeja font-family. Kui kumbagi neist pole lisatud, eiratakse kogu deklaratsiooni.

Samuti font-familytuleb see deklareerida kõigist väärtustest viimasena, vastasel juhul ignoreeritakse jällegi kogu deklaratsiooni.

Valikulised väärtused

Kõik ülejäänud viis väärtust on valikulised. Kui kaasate tahes font-style, font-variantja font-weightnad peavad tulema enne font-sizedeklaratsioonis. Kui neid pole, ignoreeritakse neid ja see võib põhjustada ka kohustuslike väärtuste eiramise.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

Ülaltoodud näites on kolm võimalust. Niikaua kui need on eelnevalt määratletud font-size, saab neid paigutada mis tahes järjekorras.

Kaasamine line-heighton samuti valikuline, kuid selle võib deklareerida ainult pärast font-sizekaldkriipsu ja ainult pärast seda:

body ( font: 44px/20px Georgia, sans-serif; )

Ülaltoodud näites line-heighton „20px”. Kui jätate välja line-height, peate ka kaldkriipsu vahele jätma, vastasel juhul ignoreeritakse kogu rida.

Font-stretchi kasutamine

font-stretchVara on uus CSS3 nii et kui seda kasutatakse vanemat brauserit, mis ei toeta font-stretchka fontstenografist, see paneb kogu rida samuti ignoreeritakse.

Spetsifikatsioon soovitab lisada varukoopia ilma selleta font-stretch:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Pärimine lisavarustuse eest

Kui jätate välja mõne optianaalse väärtuse (sealhulgas line-height), ei päri välja jäetud valikud nende vanemelemendilt väärtusi , nagu see on sageli tüpograafiliste omaduste puhul. Selle asemel lähtestatakse need algsesse olekusse.

Näiteks:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

Sellisel juhul pannakse valikulised väärtused (kursiiv, väikesed suurtähed ja paks kiri) elemendi fontdeklaratsioonile . Need kehtivad ka enamiku lapse elementide kohta.

Kuna aga oleme lõiguelementide fontomaduse uuesti deklareerinud, lähtestatakse lõikudel kõik valikud , mis põhjustab stiili, variandi, kaalu ja joone kõrguse algväärtuste taastamise.

Märksõnad süsteemifondide määratlemiseks

Lisaks ülaltoodud süntaksile fontvõimaldab atribuut väärtustena kasutada ka märksõnu. Nemad on:

caption
icon
menu
message-box
small-caption
status-bar

Need märksõna väärtused määravad fondi selle, mida kasutatakse kasutaja operatsioonisüsteemis selle konkreetse kategooria jaoks. Näiteks määrab „pealdise” määramine selle elemendi fondi kasutama sama fonti, mida kasutatakse opsüsteemis pealdiste juhtimiseks (nupud, rippmenüüd jne).

Üks märksõna sisaldab kogu väärtust:

body ( font: menu; )

Teised varem mainitud omadused ei kehti koos nende märksõnadega. Neid märksõnu saab kasutada ainult fontlühikirjeldusega ja neid ei saa deklareerida, kasutades ühtegi üksikut pika käe omadust.