Fontti CSS-temppuja

fontOmaisuus CSS on lyhenne ominaisuus, joka yhdistää kaikki seuraavat osa-ominaisuudet yksittäisellä ilmoituksella.

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

Alakiinteistöjä on seitsemän font, mukaan lukien:

font-stretch: tämä ominaisuus määrittää kirjasimen leveyden, kuten tiivistetyn tai laajennetun.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: Teksti näkyy kursiivilla tai viistolla.
- normal
- italic
- oblique
- inherit
font-variant: muuttaa kohdetekstin pieniksi.
- normal
- small-caps
- inherit
font-weight: määrittää fontin painon tai paksuuden.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: asettaa fontin korkeuden.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: määrittää inline-elementtien ylä- ja alapuolella olevan tilan määrän.
- normal
- number (font-size multiplier)
- percentage
font-family: määrittää elementille käytetyn fontin.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Fontti Lyhyt Gotchas

fontKiinteistö ei ole niin yksinkertaista kuin muut pikakirjoitteena, mikä johtuu osittain syntaksin vaatimuksia, ja osittain perintö kysymyksiä.

Tässä on yhteenveto joistakin asioista, jotka sinun tulisi tietää, kun käytät tätä lyhytominaisuutta.

Pakolliset arvot

Kaksi fontlyhytarvon arvoista on pakollisia: font-sizeja font-family. Jos jompikumpi näistä ei sisälly, koko ilmoitus jätetään huomioimatta.

Lisäksi font-familyon ilmoitettava viimeisenä kaikista arvoista, muuten taas koko ilmoitus jätetään huomioimatta.

Valinnaiset arvot

Kaikki muut arvot ovat valinnaisia. Jos lisäät jonkin font-style, font-variantja font-weightniiden on tultava ennen font-sizeilmoituksessa. Jos niitä ei ole, ne jätetään huomiotta ja ne voivat myös aiheuttaa pakollisten arvojen ohittamisen.

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

Edellä olevassa esimerkissä on mukana kolme vaihtoehtoa. Niin kauan kuin nämä on määritelty aiemmin font-size, ne voidaan sijoittaa mihin tahansa järjestykseen.

Sisällyttäminen line-heighton myös valinnainen, mutta se voidaan ilmoittaa vasta font-sizeeteenpäin viivan jälkeen ja vain sen jälkeen:

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

Yllä olevassa esimerkissä line-heighton "20px". Jos jätät pois line-height, sinun on jätettävä pois myös kauttaviiva, muuten koko rivi jätetään huomioimatta.

Kirjasimen venytys

font-stretchOmaisuus on uusi CSS3 joten jos sitä käytetään vanhempaa selainta, joka ei tue font-stretchvuonna fontpika, se aiheuttaa koko linjan oteta huomioon.

Spec suosittelee varauksen sisällyttämistä ilman font-stretch, kuten tämä:

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

Perintö optioille

Jos jätät minkä tahansa optianaaliarvosta (mukaan lukien line-height), pois jätetyt optiot eivät peri arvoja vanhemmilta elementeiltä, kuten usein tehdään typografisten ominaisuuksien kanssa. Sen sijaan ne palautetaan alkuperäiseen tilaansa.

Esimerkiksi:

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

Tässä tapauksessa valinnaiset arvot (kursiivi, pienet kirjaimet ja lihavoitu) sijoitetaan elementin fontilmoitukseen . Nämä koskevat myös useimpia lapsielementtejä.

Koska olemme kuitenkin fontilmoittaneet uudelleen kappaleelementtien ominaisuuden, kaikki vaihtoehdot nollataan kappaleissa, mikä saa tyylin, muunnelman, painon ja viivan korkeuden palaamaan alkuperäisiin arvoihinsa.

Avainsanat järjestelmän fonttien määrittelyyn

Yllä olevan syntaksin lisäksi fontominaisuus sallii myös avainsanojen käytön arvoina. He ovat:

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

Nämä avainsanan arvot asettavat fontin sille, jota käytetään käyttäjän käyttöjärjestelmässä kyseisessä luokassa. Esimerkiksi "caption" -asetuksen määrittäminen asettaa kyseisen elementin fontin käyttämään samaa fonttia, jota käytetään käyttöjärjestelmässä tekstitysohjaimissa (painikkeet, pudotusvalikot jne.).

Yksi avainsana sisältää koko arvon:

body ( font: menu; )

Muut aiemmin mainitut ominaisuudet eivät ole kelvollisia näiden avainsanojen yhteydessä. Näitä avainsanoja voidaan käyttää vain fontlyhytkirjoitusten kanssa, eikä niitä voida ilmoittaa millään yksittäisillä pitkäikäisillä ominaisuuksilla.