Šriftas - CSS-gudrybės | CSS almanachas 2025

fontCSS nuosavybė yra sutrumpinimas turto, kuris jungia visas šias sub-savybės į vieną deklaraciją.

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

Yra septyni fontsub-ypatybės, įskaitant:

font-stretch: ši ypatybė nustato šrifto plotį, pvz., sutrumpintą ar išplėstą.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: tekstas atrodo kursyvu arba įstrižai.
- normal
- italic
- oblique
- inherit
font-variant: pakeičia tikslinį tekstą į mažas raidutes.
- normal
- small-caps
- inherit
font-weight: nustato šrifto svorį arba storį.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: nustato šrifto aukštį.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: nustato vietos kiekį virš ir žemiau įterptųjų elementų.
- normal
- number (font-size multiplier)
- percentage
font-family: apibrėžia elementui taikomą šriftą.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Šriftas trumpasis Gotchas

fontTurtas yra ne taip paprasta, kaip kitų stenografistų savybių, iš dalies dėl to, kad sintaksės reikalavimus už jį, ir iš dalies dėl paveldėjimo klausimais.

Čia pateikiama kai kurių dalykų, kuriuos turėtumėte žinoti, naudodamiesi šia trumpinio savybe, santrauka.

Privalomos vertybės

fontPrivalomos dvi iš stenogramoje pateiktų verčių : font-sizeir font-family. Jei bet kuris iš šių variantų nebus įtrauktas, visa deklaracija bus ignoruojama.

Be to, font-familyturi būti deklaruota paskutinė iš visų verčių, nes priešingu atveju, visa deklaracija bus ignoruojama.

Neprivalomos vertės

Visos kitos penkios vertės yra neprivalomos. Jei įtraukiate bet kurį iš font-style,, font-variantir font-weight, jie turi būti font-sizenurodyti deklaracijoje. Jei jų nėra, jie bus ignoruojami ir taip pat gali būti ignoruojami privalomi dydžiai.

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

Pirmiau pateiktame pavyzdyje yra trys pasirinkimo variantai. Jei jie yra apibrėžti anksčiau font-size, juos galima išdėstyti bet kokia tvarka.

Įtraukti line-heighttaip pat yra neprivaloma, tačiau ją galima deklaruoti tik po font-sizepasvirojo brūkšnio ir tik po jo:

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

Ankstesniame pavyzdyje line-heightyra „20px“. Jei praleisite line-height, taip pat turite praleisti pasvirąjį brūkšnį, kitaip visa eilutė bus ignoruojama.

Naudojant „font-stretch“

font-stretchTurtas yra naujas CSS3, todėl, jei jis naudojamas senesnės naršyklės, kuri nepalaiko font-stretchį fontsutrumpinta, tai sukels visą eilutę turi būti ignoruojamas.

Specifikacija rekomenduoja įtraukti atsarginę versiją be 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; )

Paveldimumas už pasirinkimą

Jei praleisite bet kurią iš optinių verčių (įskaitant line-height), praleistos parinktys nepaveldės vertybių iš jų pirminio elemento, kaip dažnai būna tipografinių savybių atveju. Vietoj to, jie bus atstatyti į pradinę būseną.

Pavyzdžiui:

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

Šiuo atveju pasirinktinės vertės (kursyvas, mažos raidės ir paryškintos) dedamos ant elemento fontdeklaracijos . Tai taip pat bus taikoma daugumai vaikų elementų.

Tačiau kadangi mes pakartotinai deklaravome fontpastraipos elementų ypatybę, visi parinktys bus iš naujo nustatyti pastraipose, todėl stilius, variantas, svoris ir linijos aukštis bus grąžinti į pradines vertes.

Raktiniai žodžiai apibrėžiant sistemos šriftus

Be pirmiau nurodytos sintaksės, fontnuosavybė taip pat leidžia naudoti raktinius žodžius kaip reikšmes. Jie yra:

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

Šios raktinių žodžių vertės nustato šriftą, kuris naudojamas vartotojo operacinėje sistemoje konkrečiai kategorijai. Pavyzdžiui, apibrėžiant „antraštę“, tame elemente bus nustatytas šriftas naudoti tą patį šriftą, kuris operacinėje sistemoje naudojamas antraštėms valdyti (mygtukai, išskleidžiamieji meniu ir kt.).

Vienas raktinis žodis apima visą vertę:

body ( font: menu; )

Kitos anksčiau paminėtos savybės negalioja kartu su šiais raktiniais žodžiais. Šie raktiniai žodžiai gali būti naudojami tik su fonttrumpiniu ir negali būti deklaruojami naudojant jokias atskiras ilgų rankų savybes.