CSS tarjoaa monia ominaisuuksia fontin asettamiseen. Nämä vaihtelevat fontista ja fonttityylistä varjoihin.
CSS-fonttiominaisuuksiin kuuluvat fontin tyyppi, fonttityyli ja fonttivahvuus. Nämä ominaisuudet ovat tietysti hyödyllisiä pääasiassa HTML-elementeille, joissa tekstiä on (p, i jne.). Niitä voidaan myös käyttää taulukoissa.font-family-ominaisuudella voidaan määrittää käytettävä fontti.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Seuraava näkyy selaimessa seuraavasti:
Tavallisia fontteja ovat esimerkiksi Arial, Helvetica ja Times Roman. CSS-ominaisuudella font-family määritetään halutut fontit. Jos annetaan useita fontteja, järjestyksellä on merkitystä. Jos ensimmäinen ilmoitettu fontti on käytettävissä, sitä käytetään. Halutut fontit erotetaan toisistaan pilkuilla. Viimeisenä ohjeena on yleensä ns. geneerinen fonttiryhmä. Tällaisen geneerinen fonttiryhmän avulla selaimet voivat valita fontin, joka on ainakin oletetusti samanlainen.
• serif = sangeilla varustettu fontti
• sans-serif = sans-serif-fontti
• cursive = käsinkirjoitus-fontti
• fantasy = fantasia-fontti
• monospace = tasalevyinen fontti.
Fonttityyli
Ominaisuuden font-style avulla voit määrittää fonttityylin. Valitun fontin salliessa voit pakottaa kursivoidun tekstin käyttäen arvoa italic.
Toiset fontit voi kallistaa käyttämällä oblique -ominaisuutta.
Seuraava CSS-ominaisuus, joka vaikuttaa fonttiin, on font-variant. Sen avulla voidaan määrittää ns. isokirjaimet.
Isokirjaimet määritellään asettamalla font-variant-ominaisuudelle arvo small-caps.
Fonttikoko
Fonttikoon määrittämisessä tärkeää on käyttää ominaisuutta font-size. Fonttikokoja voi määrittää monissa erilaisissa yksiköissä.
• EM
• REM
• Pikseli
• Prosentti
• Avainsanat
Avainsanoja ovat seuraavat vaihtoehdot:
• xx-small – erittäin pieni
• x-small – pieni
• small – pieni
• smaller – pienempi kuin ylemmän tason elementissä
• medium – keskikoko
• large – suuri
• x-large – erittäin suuri
• xx-large – erittäin suuri
• larger – suurempi kuin ylemmän tason elementissä
Tässä esimerkki fonttikoon määrittelystä:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Näin se näyttää selaimessa:
Ota huomioon, että fonttikoon määrittäminen on hyvin monimutkaista, koska eri mittayksiköillä on omat etunsa ja haittansa.
Selvän käsityksen siitä, milloin käyttää parhaiten kutakin mittayksikköä, löydät sivustolta http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Kaikille niille, jotka eivät halua lukea sitä, suosittelen käyttämään suhteellisia arvoja kuten em ruudun esittämiseen. Tulostusasetteluihin sen sijaan käytetään absoluuttisia arvoja kuten pt.
Fonttivahvuus
Jatketaan ns. fonttivahvuuksilla. Tällä määritellään fontin paksuus ja vahvuus. Tähän käytetään ominaisuutta font-weight.
.fett {
font-weight:bold;
}
Tällä syntaksilla merkitty teksti näkyy lihavoituna.
Mahdollisia arvoja ovat bold (lihavoitu), bolder (erityisen lihavoitu), lighter (ohuempi) ja normal. Lisäksi sallitut numerot ovat 100, 200, 300, 400, 500, 600, 700, 800 ja 900. Nämä vaihtelevat ylimääräisen ohuen (100) ja erityisen lihavan (900) välillä.
Määritellään määritelmät yhteen
Fonttimääritelmissä myös ominaisuus line-height on tärkeä, jonka avulla riviväli voidaan määrittää. Palaan myöhemmin yksityiskohtaisemmin tähän ominaisuuteen. Tässä vaiheessa se on mainittava vain, koska se vaikuttaa seuraavaksi esitettyyn font-ominaisuuteen.
Voit yhdistää tähän mennessä esitellyt tiedot fontin esittämisestä yhdessä. Tällä tarkoitetaan yleistä font-ominaisuutta. Se sisältää seuraavat yksittäiset tiedot tai sulkee ne mukaan.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-familyfont-ominaisuuden avulla voit yhdistää erilaisia fonttimuotoiluja. Voit määrittää aiemmin mainitut ominaisuudet, mutta et ole pakotettu käyttämään kaikkia. Pakollisia ovat kuitenkin fonttikoon ja fonttiperheen ominaisuudet.
Kiitos lyhyemmän kirjoitustyylin CSS-tiedostot pysyvät lyhyempinä ja selkeämpinä.
Seuraavan näytöksen järjestys on kuitenkin säilytettävä. Jos kaksi ominaisuutta font-size ja line-height ovat merkittyinä, ne on erotettava kauttaviivalla. Jos tällä tavalla annetaan vain yksi arvo, se tarkoittaa font-sizea.
Esimerkki:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust on kehitetty mahdollistamaan fonttikokojen lähes samankokoisen esittämisen. Eri fontit, joilla on sama korkeus, voivat poiketa toisistaan x-korkeuden suhteen. Kuitenkin fontit, joilla on suurempi x-korkeus, ovat helpommin luettavissa. Tästä syystä dokumentti saattaa olla huonosti luettavissa, jos alkuperäistä fonttia ei ole ja se korvataan toisella, jolla on pienempi x-korkeus. font-size-adjust avulla tätä eroa voidaan tasata.
Esimerkki:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
Seuraavassa opetusohjelmassa opit muita tapoja, joilla voit säätää verkkosivustosi ulkoasua.
