[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]

Tekstin perusmäärittelyt

Elementille BODY laitetaan yleensä fonttityyppi ja sen koko, esim. ([M][S][Pw]):

body
{font-family: Algerian, "Times New Roman",serif;
/* huomaa lainausmerkit, jos fontin nimessä on tyhjää tilaa - ilman niitä selain ei välttämättä osaa etsiä haluttua fonttityyppiä */
font-size:small;}
/* perusfontiksi suositellaan relatiivista fonttikokoa */

Selain etsii tärkeysjärjestyksessä fontit. Kaksi ensimmäistä on tiettyjä asennettuja fonttityyppejä. Kolmas (serif) on ns. yleinen fonttiperhe (generic font family ja yleiset fonttiperheet ovat serif, sans-serif, cursive, fantasy ja monospace. Selaimet voivat päättää tietyin kriteerein, mitä fonttia käyttävät ja saattavat tarjota eri fontteja.

W3C: CSS2: 15 Fonts, 15.2.6 Generic font families[Pw].

Erityisesti otsikoissa voi käyttää hyvinkin monenlaisia ominaisuuksia. Olen seuraavaan esimerkkiin koonnut suuren joukon ominaisuuksia ja mainitsen, mitkä niistä kuuluvat vain CSS2:een ([M][S][Pw]):

h2
{color: #660033;
/* tekstin väri ns. keyword-arvona */
font-family: Algerian, "Times New Roman",serif;
font-weight: bold; /* miten paksua fonttia käytetään - tässä ns. keyword-arvona */
font-size: 18pt; /* absoluuttisella yksiköllä määritelty fonttikoko */
font-style:oblique; /* standardin mukaan tekee normaali fontin tietokoneella viistoksi (slant) - melkein sama kuin italic (oletuksena normal) */
font-variant:small-caps; /* kaikki kirjaimet ovat isoja kirjaimia, mutta pienet kirjaimet näytetään vähän matalampina */
text-transform:capitalize; /* hieman edellisen kaltainen - sanan ensimmäinen kirjain on aina iso kirjain (muut arvot ovat lowercase ja uppercase); huomaa, että lowercase (pienet kirjaimet) kumoaa edellisen määrittelyn */
text-decoration: overline; /* muut mahdolliset arvot: none, underline, line-through, blink; ominaisuus ei automaattisesti periydy */ font-stretch:wider; /* em. arvon pitäisi leventää fonttityyppiä (CSS2) */
text-shadow: 5px 5px red; /* tekstin varjostus (CSS2) */ }

Selainkohtaisia huomautuksia:

  1. font-variant:small-caps toimii MS IE Windows -selaimissa oikein vasta 6.0:ssa.

  2. text-decoration: blink toimii vain Netsape, Mozilla Gecko ja Opera 5.x+ -selaimissa.

  3. font-stretch ja text-shadow ominaisuudet eivät toimi missään testaamassani selaimessa.

Fonttimääreiden kohdalla huomionarvoista on font-weight. Periaatteessa fonttiperheeseen voi kuulua yhdeksän eri fontinpaksuutta ja ne merkitään 100-900 (esim. font-weight:600). Millään tuntemallani fontilla näin ei ole kuitenkaan asianlaita ja mikä arvo puuttuu otetaan lähin sopiva arvo (lisäksi on huomattava, että normal=400 ja bold=700). Väliaikaiseen koon muuttamiseen voi käyttää myös avainsanoja lighter ja bolder, joita en suosittele perusmääreiksi.

Fontin ominaisuudet voidaan määritellä myös ns. pikakirjoitteena, jossa mukana on myös line-height ominaisuus ([M][S][Pw]):

... {font: normal small-caps 120%/120% fantasy;} /* malli fontin pikakirjoitemäärittelystä; ensimmäinen prosenttiluku tarkoittaa fontin korkeutta ja toinen rivikorkeutta (line-height ominaisuus voidaan määrittää muista vastaavan kaltaisista ominaisuuksista poiketen ilman mittayksikköä: 1.2 = 1.2em); erillismäärittelyjä on kuitenkin mielestäni tässä tapauksessa helpompi hallita */

Selainkohtaisia huomautuksia:

  1. Ominaisuuksilla line-height:1.2em ja line-height:120% on Mozilla Gecko -selaimissa ero silloin, kun fonttia skaalataan. Prosenttiarvo skaalautuu, mutta em-arvo ei.

  2. Eräät tekstiin vaikuttavat ominaisuudet eivät toimi juuri millään selaimella. Mielestäni näitä ei kannata käyttää, vaikka uusimmat selaimet hallitsevat ne kaikki: word-spacing, letter-spacing, white-space, word-wrap. Letter-spacing on näistä käyttökelpoisin, sillä sitä tukee monet selaimet ([M][S][Pw]).

[Alku]