Font-family-ominaisuus

Ominaisuus font-family asettaa fontin tyypin.

Syntaksi

valitsin {
	font-family: fontin nimi;
}

Huomio

Jos fontin nimessä on välilyöntejä, esimerkiksi Times New Roman, se on lainattava yksinkertaisilla tai kaksinkertaisilla lainausmerkeillä.

Huomio

Useita samankaltaisia fontteja voidaan luetella pilkulla erotettuna. Kun selain kohtaa ensimmäisen fontin listassa, se tarkistaa sen saatavuuden käyttäjän tietokoneella. Jos sellaista fonttia ei ole, otetaan seuraava fontti listasta ja myös analysoidaan saatavuutta. Siksi useat fontit lisäävät todennäköisyyttä, että ainakin yksi niistä löytyy asiakastietokoneelta.

Lista päätetään yleensä avainsanalla, joka kuvaa fontin tyyppiä (kaikki fontit kuuluvat johonkin tyyppiin) - serif, sans-serif, cursive, fantasy tai monospace. Jos selain ei löytänyt yhtäkään määritetyistä fonteista käyttäjän tietokoneelta, se valitsee yhden määritetyn tyypin fonteista.

Fonttityypit

Tyyppi	Kuvaus
`serif`	Fontti serifeillä.
`sans-serif`	Fontti ilman serifejä.
`cursive`	Kursiivifontti.
`fantasy`	Dekoratiivinen fontti kauniilla kiemuroilla ja epätavallisilla efekteillä.
`monospace`	Tasalevyinen fontti, jossa jokaisen merkin leveys on sama.

Oletusarvo: selaimessa oletusarvoisesti asetettu fontti. Yleensä tämä on Times New Roman.

Esimerkki

Asetetaan fontille perheeksi Arial:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: Arial;
}

Esimerkki

Asetetaan fontille perheeksi Times New Roman. Koska fontin nimi koostuu useasta sanasta, otamme sen lainausmerkkeihin:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: "Times New Roman";
}

Esimerkki

Asetetaan fontille fontti ryhmästä serif (todennäköisesti valitaan Times New Roman):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: serif;
}

Esimerkki

Asetetaan fontille fontti ryhmästä sans-serif (todennäköisesti valitaan Arial):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: sans-serif;
}

Esimerkki

Asetetaan fontille fontti ryhmästä fantasy (saattaa ei toimi puuttuvan fontin vuoksi):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: fantasy;
}

Esimerkki

Asetetaan fontille fontti ryhmästä monospace (kirjaimista tulee samankokoisia):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: monospace;
}