CSS: Fontti 2008-08-28 21:36

Katsotaan aluksi kuinka fontin eri ominaisuuksia muutetaan (kirjasinlaji, koko, korostukset, jne) ja kootaan lopuksi kaikki yhden font-ominaisuuden alle.

Fonts

Fontit W3C:n CSS-spesifikaatiossa.

Kirjasinlaji font-family

Fontin määrittämiselle asettaa rajat kulloisenkin käyttäjän koneelle asennetut fontit. Siksi fonttia määritettäessä täytyy antaa myös vaihtoehtoinen fontti ja mahdollisesti fontin tyyppi. Mikäli ensisijaista fonttia ei käyttäjän koneella ole, selain etsii muita vaihtoehtoja järjestyksessä.

Fonttien tyyppejä ovat pääteviivallinen serif (tulostustyyli, leipäteksti), pääteviivaton sans-serif (otsikot, leipäteksti), tasaleveyksinen monospace (tietokonekoodi), tai käsinkirjoitettu cursive (otsikot).

Määritetään uusi oletusfontti Georgia koko sivulle. Georgia on pääteviivallinen fontti, joten annetaan pilkulla erotettuna myös arvo serif, jolloin Georgian puuttuessa käytetään käyttäjän selaimen asetuksissa määriteltyä serif-fonttia, joka yleensä on Times New Roman.

body {
	font-family: Georgia, serif;
}

body-elementille annettu fonttimääritys periytyy (inherit) kaikille sen sisällä oleville elementeille, jos niille ei ole annettu muuta arvoa.

Määritetään oletusfontista poikkeava pääteviivaton fontti Verdana kaikille otsikkotasoille. Vaihtoehtoina Windowsissa tavalliselle Verdanalle annetaan Macin Geneva, ja senkin puuttuessa pääteviivaton oletusfontti, joka yleensä on Arial.

h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Geneva, Arial, sans-serif;
}

Linkit

Common fonts to all versions of Windows & Mac equivalents

Yleisimpiä korvaavia fontteja Windows- ja Mac-ympäristöissä.

Better CSS Font Stacks

CSS-fonttiyhdistelmiä mahdollisimman sopivan vaihtoehtoisen fonttien löytymiseksi. Eri versiot leipätekstille ja otsikoille.

Typetester

Erilaisten fonttiasetusten testaamiseen.

Standard Windows Fonts

Windows käyttöjärjestelmän eri versioiden mukana tulevat fontit.

Fonts

Tavallisimmista fonteista ja niiden samankaltaisuudesta.

21 Typography and Font Web Apps You Can’t Live Without

Lisää typografia- ja fonttityökaluja verkossa.

Kirjasimen koko font-size

Fontin koko määritetään ominaisuudella font-size. Koko sivulle kannattaa määrittää oletusfontti body-elementti valitsimena, ja antaa muut fontikoot suhteessa oletusfonttiin. Arvon voi antaa esimerkiksi pikselikokona, tai suhteessa käyttäjän selaimen oletusfonttikokoon joka on yleensä 16px ellei käyttäjä ole sitä muuttanut.

body {
	font-size: 12px; /* oletusfontiksi */
}

h1 {
	font-size: 150%; /* 1,5 kertaa oletusfonttikoko */
}

h2 {
	font-size: 1.3em; /* 1,3 kertaa oletusfonttikoko */
}

Pikseliarvoiset fonttikoot ovat ongelmallisia, koska Internet Explorer ei selaimen perusasetuksilla skaalaa niiden kokoa. Uusimmassa IE7:ssa on kuitenkin sivun zoomaustoiminto.

Suhteelliset fonttikoot voidaan antaa prosentteina, em-arvoina ja ex-arvoina. Arvo 1.3em merkitsee samaa kuin 130%. ex-arvo suhteuttaa koon kirjasimen pienen x-kirjaimen korkeuteen (x-korkeuteen).

PXtoEM.com: PX to EM conversion made simple.

Muuntaa pikselit em-arvoiksi.

Em Calculator

Muuntaa pikselit em-arvoiksi.

Periytyminen

Fonttikoot periytyvät ympäröivältä elementiltä sen sisältämille elementeille. Normaalisti tämä on hyvä asia, koska esimerkiksi koko sivulle voidaan antaa oletusfontti, johon muiden elementtien fonttikoot voidaan suhteuttaa. Ongelmaksi muodostuvat suhteelliset fonttikoot. Jos esimerkiksi ul-elementille annetaan font-size: 80%, ja se pitää sisällään toisen listan, sen sisältämälle listalle tulee fonttikooksi 64%. Tämä voidaan korjata seuraavasti.

ul { font-size: 80% }
ul ul { font-size: 100% }

Relative font sizes and inheritance

Ratkaisu suhteellisten fonttikokojen periytymisen aiheuttamiin ongelmiin.

Lihavointi: font-weight: normal / bold

Lihavoidaan class-attribuutilla "henkilo" merkityt tekstikohdat font-weight ominaisuudella.

.henkilo {
	font-weight: bold;
}

Otsikkotasot ovat oletuksena lihavoituja. Lihavoinnit voidaan poistaa elementiltä kokonaan, tai esimerkiksi XHTML-asiakirjassa span-elementillä merkatulta osalta.

h2 span {
	font-weight: normal;
}

h3 {
	font-weight: normal;
}

Kursiivi font-style: normal / italic / oblique

Kursivoidaan tekstistä span-elementin class-attribuutilla "paikka" merkityt kohdat käyttämällä ominaisuutta font-style.

.paikka {
	font-style: italic;
}

font-variant

font-variant-ominaisuudella voidaan määrittää pienet kirjaimet pienikokoisiksi suuraakkosiksi.

h1 {
	font-variant: small-caps;
}

Rivikorkeus line-height

line-height-ominaisuutta käytetään rivikorkeuden l. rivivälin muuttamiseksi. Annetulle arvolle ei kannata antaa mitään yksikköä.

body {
	/* body-elementin rivikorkeus periytyy koko sivulle */
	line-height: 1.5; 
}
li {
	/* listariveille pienempi rivikorkeus */
	line-height: 1.2; 
}

Kaikki yhdessä font

Edellämainitut ominaisuudet voidaan koota yhden font-ominaisuuden alle järjestyksessä: font-style font-variant font-weight font-size/line-height font-family.