Fonts - CSS-triki | CSS almanahs 2025

fontĪpašums CSS ir ērtākais īpašums, kas apvieno visas šādas apakšgrupas īpašības vienā deklarācijā.

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; ) */

Ir septiņi fontapakšīpašumi, tostarp:

font-stretch: šis rekvizīts nosaka fonta platumu, piemēram, saīsinātu vai izvērstu.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: teksts tiek parādīts kursīvā vai slīpi.
- normal
- italic
- oblique
- inherit
font-variant: maina mērķa tekstu uz maziem burtiem.
- normal
- small-caps
- inherit
font-weight: iestata fonta svaru vai biezumu.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: iestata fonta augstumu.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: nosaka vietas daudzumu virs un zem iekšējiem elementiem.
- normal
- number (font-size multiplier)
- percentage
font-family: nosaka elementam piemēroto fontu.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Fonts Stenograms Gotchas

fontĪpašums nav tik vienkārši kā citi stenogrāfistus īpašības, daļēji tāpēc, ka sintakses prasībām par to, un daļēji dēļ mantojuma jautājumos.

Šeit ir kopsavilkums par dažām lietām, kas jums jāzina, izmantojot šo stenogrāfijas īpašību.

Obligātās vērtības

Divas no vērtībām fontstenogrāfijā ir obligātas: font-sizeun font-family. Ja kāds no šiem elementiem nav iekļauts, visa deklarācija tiks ignorēta.

Turklāt font-familytā ir jādeklarē kā pēdējā no visām vērtībām, pretējā gadījumā atkal visa deklarācija tiks ignorēta.

Izvēles vērtības

Visas piecas pārējās vērtības nav obligātas. Ja deklarācijā esat iekļāvis kādu no font-style,, font-variantun font-weight, tiem jābūt pirms font-sizedeklarācijas. Ja tie nav, tie tiks ignorēti un var arī ignorēt obligātās vērtības.

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

Iepriekš minētajā piemērā ir iekļauti trīs opcijas. Kamēr tie ir definēti iepriekš font-size, tos var izvietot jebkurā secībā.

Iekļaušana line-heightarī nav obligāta, taču to var deklarēt tikai pēc font-sizeslīpsvītras uz priekšu un tikai pēc tās:

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

Iepriekš minētajā piemērā line-heightir “20px”. Ja jūs izlaižat line-height, jums ir jāizlaiž arī slīpsvītra, pretējā gadījumā visa līnija tiks ignorēta.

Izmantojot font-stretch

font-stretchĪpašums ir jauns CSS3, tādēļ, ja tas tiek izmantots vecāku pārlūku, kas neatbalsta font-stretchjo fontstenogrāfija, tas radīs visa līnija ignorēt.

Specifikācija iesaka iekļaut atkāpšanos bez font-stretchšāda veida:

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; )

Mantojums pēc izvēles

Ja jūs izlaižat kādu no optianal vērtībām (ieskaitot line-height), izlaistie opcionāli nemantos vērtības no viņu pamatelementa, kā tas bieži notiek ar tipogrāfiskām īpašībām. Tā vietā tie tiks atiestatīti sākotnējā stāvoklī.

Piemēram:

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

Šajā gadījumā izvēles vērtības (kursīvs, mazie burti un treknrakstā) tiek ievietotas fontdeklarācijā uz elementa. Tie attieksies arī uz lielāko daļu bērnu elementu.

Tā kā mēs esam atkārtoti deklarējuši fontrekvizītu rindkopu elementos, visi opcijas tiks atiestatītas rindkopās, izraisot stila, varianta, svara un līnijas augstuma atgriešanos sākotnējās vērtībās.

Atslēgas vārdi sistēmas fontu noteikšanai

Papildus iepriekšminētajai sintaksei fontīpašums ļauj izmantot arī atslēgvārdus kā vērtības. Viņi ir:

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

Šīs atslēgvārdu vērtības iestata tādu fontu, kāds tiek izmantots lietotāja operētājsistēmā konkrētajai kategorijai. Piemēram, definējot “caption”, šī elementa fonts tiks iestatīts tā paša fonta izmantošanai, kuru operētājsistēmā izmanto parakstu vadīklām (pogas, nolaižamās izvēlnes utt.)

Viens atslēgvārds ietver visu vērtību:

body ( font: menu; )

Pārējie iepriekš minētie rekvizīti nav derīgi kopā ar šiem atslēgvārdiem. Šos atslēgvārdus var izmantot tikai ar fontstenogrāfiju, un tos nevar deklarēt, izmantojot kādu no individuālajām īpašībām ar garām rokām.