Kirjasimen ominaisuudet

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

Seuraavissa luvuissa käydään läpi erilaisia kirjasimen ominaisuuksia. Kirjasimen ulkonäköön voidaan vaikuttaa ominaisuuksien font-family, font-style, font-variant, font-weight, font-size ja font avulla.

font-family

font-family-ominaisuudella voidaan vaikuttaa pelkästään kirjasimen ulkoasuun. Ominaisuuden avulla voidaan määritellä kirjasintyyppi, jolla elementin sisällä oleva teksti näytetään. font-family-ominaisuudelle annetaan ensin kirjoittajan ehdottamat kirjasintyypit. Selain näyttää elementin sisällön ensimmäisen kirjasintyypin mukaan, jonka se tunnistaa annetusta kirjasintyyppilistasta. Kirjasintyyppejä voidaan antaa useampiakin pilkulla toisistaan erotettuna. Jos selain ei tunnista yhtään määritellyistä kirjasintyypeistä, niin sille voidaan kertoa yleinen kirjasinperhe, jonka mukaan selain valitsee käytettävän kirjasimen.

font-family: [[<kirjasintyyppi> | <yleinen-kirjasinperhe>],]* [<kirjasintyyppi> | <yleinen-kirjasinperhe>];

font-family-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

<kirjasintyyppi> voi olla mikä tahansa kirjasintyyppi, kuten esimerkiksi Times, Times New Roman tai Courier.

<yleinen-kirjasinperhe> voi olla jokin seuraavista:

• serif (esimerkiksi Times)

• sans-serif (esimerkiksi Helvetica)

• cursive (esimerkiksi Zapf-Chancery)

• fantasy (esimerkiksi Western)

• monospace (esimerkiksi Courier)

Seuraavassa esimerkissä on yksinkertainen kirjasintyypin ja yleisen kirjasinperheen määritys. Määrityksessä kirjasintyypiksi määritellään verdana, mutta jos selain ei löydä kyseistä kirjasintyyppiä, niin se näyttää elementin sisällön jollakin sans-serif-kirjasinperheen kirjasimella.

font-family: verdana, sans-serif;

Seuraavassa esimerkissä on määritelty useita vaihtoehtoisia kirjasintyyppejä, joita käytetään esiintymisjärjestyksessä. Jos yhtään kirjasintyypeistä ei löydy, käytetään jotakin serif-perheen kirjasinta. Kirjasintyyppi täytyy laittaa lainausmerkkien sisään, jos kirjasintyypin nimestä löytyy välilyönti.

font-family: Verdana, "Times New Roman", Times, "New York", serif;

font-style

font-style-ominaisuudella voidaan määritellä esitettävän kirjasimen tyyli. font-style voi saada arvon normal, italic ja oblique. Arvolla normal teksti näytetään ilman korostuksia, arvolla italic teksti näytetään kursivoituna ja arvolla oblique teksti näytetään vinona. Käytännössä arvot italic ja oblique eivät paljoakaan eroa toisistaan.

font-style: normal | italic | oblique;

font-style-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä kirjasin on määritelty kursivoiduksi.

font-style: italic;

font-variant

font-variant-ominaisuudella voidaan kirjasimen kirjoitusasu muuttaa kapiteelikirjaimiksi eli kirjoitusasultaan isoiksi kirjaimiksi, jotka ovat pienten kirjainten kokoisia. font-variant-ominaisuus voi saada arvon normal tai small-caps. Arvolla normal kirjasin näytetään normaalina, mutta arvolla small-caps kirjasin näytetään kapiteelikirjaimina.

font-variant: normal | small-caps;

font-variant-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

font-weight

font-weight-ominaisuudella kirjasimelle voidaan määritellä kirjasimen korostus. Mahdollisia arvoja font-weight-ominaisuudella ovat normal, bold, bolder, lighter sekä muutama erilainen numeerinen arvo. Arvo bold lihavoi kirjasimen ja arvo bolder on hieman heikompi lihavointi kuin bold. Vastaavasti arvo lighter keventää kirjasinta hieman. bolder ja lighter arvot toimivat suhteellisesti perittyihin arvoihin nähden, mutta eteenpäin perittäessä ne tulkitaan kiinteiksi numeroarvoiksi. Numeeriset arvot vastaavat tekstimuotoisia arvoja seuraavasti. Arvo 400 vastaa arvoa normal ja arvo 700 vastaa arvoa bold.

font-weight: normal | bold | bolder | lighter | 100 | 200
| 300 | 400 | 500 | 600 | 700 | 800 | 900;

font-weight-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

Esimerkki font-weight-ominaisuuden käytöstä. Esimerkissä strong-elementin sisällä oleva teksti näytetään hieman lihavoituna.

strong {
  font-weight: bolder;
}

font-size

Kirjasinkoko voidaan määritellä font-size-ominaisuuden avulla. Kirjasinkoko voidaan määrittää sekä absoluuttisesti että suhteellisesti.

font-size: <absoluuttinen_koko> | <suhteellinen_koko> | <pituus> | <prosentti>;

Font-size-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

<absoluuttinen_koko> voidaan määrittää arvojen xx-small, x-small, small, medium, large, x-large ja xx-large avulla. Arvoilla voidaan määritellä esimerkiksi tekstin kokoa normaalista eli medium-arvosta poikkeavaksi. Tekstin kokoa muutetaan absoluuttisilla arvoilla aina noin puolitoistakertaiseksi edelliseen kokoon nähden. Seuraavassa esimerkissä kirjasinkoko määritellään absoluutttisesti normaalia kokoa suuremmaksi. Jos arvon medium kirjasinkooksi on määritelty 10 pt:tä, niin seuraava esimerkin suurempi arvo large muuttaa tekstin koon 15pt:een.

font-size: large;

<suhteellinen_koko> voidaan määrittää arvoilla larger ja smaller. Suhteellisilla arvoilla voidaan määritellä kirjasimen koko suhteessa ylemmän tason kappaleeseen. Seuraavassa esimerkissä muutetaan kirjasimenkokoa suhteellisesti ylemmän tason elementin kokoon nähden. body-elementille on määritelty kirjasimen kooksi medium. Jos body-elementin sisään tulevalle p-elementille määritellään kirjasinkooksi larger, niin p-elementin koko nostetaan absoluuttiseksi arvoksi large.

p {
  font-size: larger;
}

<pituus> voidaan määritellä luvussa esitetyllä tavalla suhteellisia ja absoluuttisia pituusmittoja käyttäen. Kirjasinkoolle ei kuitenkaan sallita negatiivisia arvoja. Seuraavassa esimerkissä käytetään ainoastaan suhteellisia pituusyksikköjä kirjasimen koon muuttamiseen.

Seuraava esimerkki muuttaa kirjasinkokoa ylemmän tason elementin kirjasinkokoon nähden puolitoistakertaiseksi.

font-size: 1.5em;

Seuraava esimerkki muuttaa kirjasinkokoa ylemmän tason elementin pienen kirjaimen kirjasinkokoon nähden kaksinkertaiseksi.

font-size: 2ex;

Seuraava esimerkki muuttaa kirjasinkoon kaksikymmenkertaiseksi katselulaitteen kuvapisteen kokoon nähden.

font-size: 20px;

font

font-ominaisuuden avulla voidaan muuttaa kaikkia edellä käsiteltyjä kirjasimen ominaisuuksia seuraavan syntaksin mukaisessa järjestyksessä.

font: [ <font-style> || <font-variant> || <font-weight> ] ? <font-size> [ / <line-height> ] ? <font-family>;

font-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä p-elementille on määritelty seuraavat ominaisuudet. font-style-ominaisuus on italic, mutta font-variant- ja font-weight-ominaisuudet on jätetty määrittelemättä kokonaan. font-size-ominaisuuden arvoksi on asetettu 1.5em ja line-height-ominaisuuden eli rivinkorkeudeksi arvoksi on määritelty 2em. font-family-ominaisuuden arvoksi on määritelty Palatino, serif.

p {
  font: italic 1.5em/2em Palatino, serif;
}

Seuraava esimerkki on täsmälleen sama kuin edellä, mutta jokainen ominaisuuden arvo on määritelty erikseen.

p {
  font-style: italic;
  font-size: 1.5em;
  line-height: 2em;
  font-family: Palatino, serif;
}

Seuraavaan esimerkkiin on koottu erilaisia kirjasimen määrittämisessä käytettäviä ominaisuuksia.

h1 {
  font-family: verdana, arial, helvetica, sans-serif;
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 2em;
}

p {
  font-family: "Times New Roman", times, serif;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  font-size: 150%;
}

strong {
  font-family: Courier, monospace;
  font-style: normal;
  font-variant: small-caps;
  font-weight: 900;
  font-size: xx-large;
}

Seuraavassa esimerkissä edellisen esimerkin kirjasimen määritykset on toteutettu font-ominaisuuden avulla.

h1 {
  font: italic small-caps bold 2em verdana, arial, helvetica, sans-serif;
}

p {
  font: normal normal 400 150% "Times New Roman", times, serif;
}

strong {
  font: normal small-caps 900 xx-large Courier, monospace;
}

Kuva 1: Esimerkki kirjasimen ominaisuuksien käytöstä.