Päivitetty: 10.03.2003.

Fontti

CSS:n fontti eli kirjaisin ominaisuudet (Font properties) mahdollistavat fontin helpomman ja huomattavasti monipuolisemman määrittelemisen kuin perinteinen HTML.


Fontti

font-family

Määrittää käytettävän fontin ja/tai fonttiperheen.

Yhteensopivuus:  CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: [[<fontti> | <fontti-perhe>],]*[<fontti> | <fontti-perhe>]
Oletusarvo: Oletusfontti
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei
<fontti>
Fontti eli kirjaisin voi olla mikä tahansa TrueType -fontti, mutta kannattaa kuitenkin välttää erikoisia valintoja. Jos fontin nimessä on välilyöntejä tulee nimi ympäröidä lainausmerkeillä esim: "Arial Narrow".

Mutta jos sääntö on rivinsisäinen, eli siinä käytetään HTML-elementin style-attribuuttia, täytyy fontin nimi ympäröidä vain yksinkertaisia lainausmerkkejä ( ' ' ) käyttäen. Eli esim:
<P STYLE="font-family: 'Times New Roman', Times">
.

Voit antaa useita fontteja pilkulla erotettuna, jolloin selain käyttää niistä ensimmäisen löytämänsä.
<fontti-perhe>
Fonttiperhe sisältää tietyn tyylisiä fontteja, joita selain käyttää automaattisesti. Huomaa, että käytettävä fontti voi vaihdella käyttöjärjestelmästä, selainversiosta ja asennetuista fonteista riippuen. CSS1 tukee seuraavia fonttiperheitä:

Serif (esim. Times)
Sans-Serif (esim. Helvetica)
Cursive (esim. Zapf-Chancery)
Fantasy (esim. Western)
Monospace (esim. Courier)

font-family esimerkki

font-family: serif

font-family: sans-serif

Lisää esimerkkejä.

!IE 5 ei osaa näyttää fantasy fonttia oikein, ellei sitä käytetä otsikoissa.

<< Alkuun


font-style

Määrittää tekstin kursivoinnin.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: normal | italic | oblique
Oletusarvo: normal
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei

font-style esimerkki

font-style: italic

font-style: oblique

!'Oblique' ei toimi NN 4.x selaimissa, joten käytä arvoa 'italic'.

<< Alkuun


font-variant

Muuttaa teksti kapitaaliksi.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: normal | small-caps
Oletusarvo: normal
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei

font-variant esimerkki

small-caps normal

<< Alkuun


font-weight

Tekstin paino eli lihavointiarvo.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Oletusarvo: normal
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei
Normal
Tekstiä ei lihavoida, vastaa arvoa 400.
bold
Lihavoitu teksti. Vastaa arvoa 700 ja HTML:n <b>-elementtiä.
bolder
Tekee tekstistä astetta paksumpaa.
lighter
Tekee tekstistä astetta ohuempaa.
100 - 900
100 on kevein ja 900 raskain. Väliarvot (esim. 550) eivät ole sallittuja.

font-weight esimerkki

font-weight: bold

Lisää esimerkkejä

!Harvasta fontista on olemassa yhdeksää (100-900) eri paksuus arvoa.

<< Alkuun


font-size

Tekstin koko.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <Absoluuttinen koko> | <Suhteellinen koko> | <Pituus> | <%>
Oletusarvo: medium
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Suhteessa ympäröivän elementin kokoon
<Absoluuttinen koko>
Ovat avainsanoja: xx-small, x-small, small, medium, large, x-large ja xx-large.
<Suhteellinen koko>
Voivat olla avainsanoja smaller ja larger. Smaller pienetää fonttia js larger suurentaa sitä.
<Pituus>
Suhteellisia pituuksia (em, ex, px) tai absoluuttisia pituuksia (in, mm, cm, pt ja pc)
<%>
Prosentti on suhteessa emoelementin kokoon.

font-size esimerkki

Font-size: 20pt

Lisää esimerkkejä.

!Katso lisätietoja mitoista CSS:n yksiköt -kohdasta.

<< Alkuun


font

Font on pikakirjoite, jolla voidaan määritellä seuraavien CSS ominaisuuksien arvot: font-style, font-variant, font-weight, font-size, font-family sekä line-height.

Yhteensopivuus: CSS1 ja CSS2 (IE4, ja Opera 4.0)
Sallitut arvot: [ <font-style> || <font-variant> || <font-weight> ] ? <font-size> [ / <line-height>] ? <font-family>
Oletusarvo: Ei ole käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Käytössä <font-size> ja <line-height> arvoilla
Sääntö voidan antaa muodossa:
'font-style', 'font-variant' ja 'font-weight' (mikä vain voidaan jättää pois ja järjestys on vapaa).
'font-size' (pakollinen) / 'line-heigh' (kauttaviivalla erotettu korkeus on valinnainen)
'font-family' (pakollinen)

font esimerkki

Sääntö:
Font: italic 1.2em/1.6em "Times New Roman"

Tulos:

Esimerkki tuottaa tämän näköistä tekstiä.

Lisää esimerkkejä.

!Järjestyksen kanssa pitää olla todella tarkkana, muuuten sääntö ei toimi. Onkin ehkä helpompaa (ja jopa nopeampaa) käyttää vain yllä esiteltyjä ominaisuuksia.

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!