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;
}
: