| Rakenne: | font-family :
["family-name" | generic-family]* |
|---|---|
| Mahdolliset arvot: |
family-name
|
| Oletusarvo: | Selaimen määrittelemä |
| Tukee: | Kaikki elementit |
| Periytyvyys: | Kyllä |
Fontiksi voidaan määrittää joku tietty fontti tai yleinen fonttiryhmä. Ilmiselvästikin yleisen fonttiryhmän fontti löytyy helpommin kuin jokin tietty fontti. Useita fontteja voidaan määrittää ja jos määrittelee yhden fontin pitää myös määrittää yleinen fonttiryhmä siltävaralta jos fonttia ei löydykään sivun katselijan koneesta.
Esimerkiksi font-family sääntö voi olla seuraavanlainen:
P { font-family : "New Century Schoolbook", Times, Serif }
Huomaa että kaksi ensimmäistä määritystä ovat yksittäisiä fontteja. Molemmat fontit ovat kuitenkin serif fontteja, joten varmistukseksi on määritelty myös yleinen fonttiryhmä siltävaralta jos koneesta ei löydykään em. fontteja vaan joku muu serif-fontti.
Useampi määritys erotetaan toisistaan pilkulla. Jokainen fontin nimi joka sisältää välilyöntejä täytyy laittaa lainausmerkkeihin.
Fontti voidaan myös määritellä font ominaisuudella.
| Rakenne: | font-style :
arvo |
|---|---|
| Mahdolliset arvot: | normal | italic | oblique |
| Oletusarvo: | normal |
| Tukee: | Kaikki elementit |
| Periytyvyys: | Kyllä |
font-style ominaisuus määrää onko teksti normaali, kursivoitu vai oblique (viisto). ( normal | italic | oblique). font-style määritys näyttää esim. tältä:
H1 { font-style : oblique }
P { font-style : normal }
| Rakenne: | font-variant :
arvo |
|---|---|
| Mahdolliset arvot: | normal | small-caps |
| Oletusarvo: | normal |
| Tukee: | Kaikki elementit |
| Periytyvyys: | Kyllä |
font-variant määrää näytetäänkö teksti normaalina vai hieman normaalia tekstiä kookkaammilla isoilla kirjaimilla ( normal | small-caps). Myöhemmissä CSS:n versioissa voi olla muitakin fontin muunnoksia. Fontin muunnoksen esimerkiksi käy:
SPAN { font-variant : small-caps }| Rakenne: | font-weight :
arvo |
|---|---|
| Mahdolliset arvot: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| Oletusarvo: | normal |
| Tukee: | Kaikki elementit |
| Periytyvyys: | Kyllä |
font-weight ominaisuus määrittelee fontin lihavuuden. bolder ja lighter arvot riippuvat periytyneestä fontin lihavuudesta kun muut arvot ovat absoluuttisia.
Huomautus! Kaikilla fonteilla ei ole yhdeksää eri lihavuutta. Vastaava lihavuus tulee valita seuraavasti:
Joitain esimerkkejä font-weight ominaisuudesta:
H1 { font-weight : 800 }
P { font-weight : normal }
| Rakenne: |
font-size : absoluuttinen arvo |
suhteellinen arvo | pituus |
prosentteina |
|---|---|
| Mahdolliset arvot | |
| Oletusarvo: | medium |
| Tukee: | Kaikki elementit |
| Periytyvyys: | Kyllä |
Font-size ominaisuus muuttaa käytettävän fontin kokoa. Absoluuttisia pituuksia (yksikkönä pt ja in) pitää käyttää varovasti johtuen niiden huonosta sopeutuvuudesta eri selain ympäristöihin. Teksti jonka, kooksi on määritelty absoluuttinen arvo voi helposti olla joko liian pientä tai suurta lukijalle.
Seuraavassa muutama esimerkki font-size ominaisuuden käytöstä:
H1 { font-size : large }
P { font-size : 12pt }
LI { font-size : 90% }
STRONG { font-size : larger }Microsoft Internet Explorer käsittelee em ja ex yksikköjä virheellisesti pikseleinä, mikä tekee tekstistä helposti lukukelvotonta. Selain myös käsittelee prosentti arvot suhteellisina valitsimen fontin oletuskokoon, eikä suhtellisina ylempään elementtiin. Tämä tekee säännöistä kuten:
H1 { font-size : 200% }huonoja koska ko. selain tekee tekstin kaksinkertaisella koolla verrattuna H1-elementin (Ykköstason otsikko) fontin oletuskokoon, eikä ylemmän elementin fontin kokoon verrattuna. Tässä tapauksessa ylempänä elementtinä on todennäköisesti BODY, jonka tekstin oletuskoko on medium, jolloin ko. selaimen käyttämä H1-elementin teksin koko olisi todennäköisesti xx-large.
Kyseinen selainversio ei varmaankaan enää ole käytössä, mutta näistä bugeista johtuen font-size ominaisuuden prosenttiarvoja kannattaa käyttää varovasti ja mielellään välttää em ja ex arvojen käyttöä.
| Rakenne: |
font : arvo |
|---|---|
| Mahdolliset arvot: | [
font-style ||
font-variant ||
font-weight ]?
font-size /
[line-height
]?
font-family
|
| Oletusarvo: | Ei määritetty |
| Tukee: | Kaikki elementit |
| Periytyvyys: | Kyllä |
font ominaisuutta käytetään oikotienä fontin eri ominaisuuksille ja line-height ominaisuuteen. Esimerkiksi:
P { font : italic bold 12pt/14pt Times, serif }Määrittää kappaleen tekstin lihavoiduksi ja kursivoiduksi Times tai serif fontiksi 12 pisteen kokoisella fontilla ja 14 pisteen korkuisella rivillä.