Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

Fontin ominaisuudet

CSS tarjoaa merkintäkieltä huomattavasti edistyneempää fonttimäärityksien hallintaa, vaikkei se poistakaan fontteihin liittyvää problematiikkaa. CSS:n fonttimäärityksien suurin etu on siinä, että HTML:n väheksyttäviksi julistetut fonttielementit voidaan syrjäyttää.

Font Family

Font Family -ominaisuudella ilmoitetaan toivottu kirjasintyyppi.

Huomiot

• Kirjasintyyppejä voidaan ilmoittaa tärkeysjärjestyksessä ja pilkulla erotettuina useita samassa ilmoituksessa. Tällöin asiakasohjelma käyttää ensimmäistä tunnistamaansa kirjasintyyppiä, tai lopulta omaa oletusfonttiansa.
• Välilyöntejä sisältävät fonttinimet on sijoitettava lainausmerkkeihin.
• Suositeltavaa on päättää ilmoitus aina yleiseen kirjasinperheeseen.

Esimerkit

<h2 style="font-family:fantasy">
H2-elementti - fantasy-kirjasinperheen fontilla,
tai selaimen oletusfontilla.
</h2>

<div style="font-family:'Arial Rounded MT Bold',Arial,sans-serif">
DIV-elementti - sans-serif-fontilla,
mielummin paksummalla Arialilla.
</div>

<p style="font-family:'Comic Sans MS',cursive">
P-elementti - tällainen kevyehkö?
</p>

<pre style="font-family:monospace">
Tässä tarvitaan tasaleveyksellistä fonttia.
</pre>

Font Size

Font Size -ominaisuudella ilmoitetaan toivottu kirjasinkoko, joko mittana, prosenttiarvona, absoluuttisena-, tai suhteellisena kokona.

Huomiot

• Absoluuttista, tai suhteellista kokoa ilmaisevien avainsanojen käyttö on ongelmallista, koska lopullinen tulostuskoko ja eri kokojen välinen suhde jää eri asiakasohjelmien erilaisten ratkaisujen varaan.
• Nyrkkisääntö, joka suosii suhteellisia mittoja absoluuttisten sijaan pätee myös fontin kokoa määritellessä. Asiakasohjelmavirheiden takia ex-mittaa kannatta kuitenkin välttää. Kaikenkaikkiaan prosenttiarvot lienevät kaikista paras tapa vaikuttaa fontin kokoon.

Esimerkit

<h2 style="font-size:medium">
H2-elementti, jonka fonttikokoa on piennetty absoluuttisella
<span style="font-size:larger">medium</span>-avainsanalla.
</h2>

<div style="font-size:80%">
DIV-elementti - fonttikoko 80%.
</div>

<p style="font-size:0.5em">
P-elementti - näkyykö tätä ollenkaan?
</p>

<pre style="font-size:14pt">
Tähän tahdotaan fontille absoluuttinen mitta.
</pre>

Font Style

Font Style -ominaisuudella ilmoitetaan toivottu kirjasintyyli, joko normaali, vino tai kursiivi.

Huomiot

Kirjasintyylit vaikuttavat kirjasinperheen sisällä asiakasohjelman fonttitietokannan puitteissa, jossa tyypillisesti fonttityylit merkitään fonttinimien mukaan seuraavasti:

Merkitään oblique-tyyliksi fonttinimet, jotka sisältävät jonkun seuraavista sanoista:

oblique

slanted

incline

Merkitään italic-tyyliksi fonttinimet, jotka sisältävät jonkun seuraavista sanoista:

italic

cursive

kursiv

Esimerkit

<h2 style="font-style:normal">
Fonttityyliksi toivotaan
<span style="font-style:oblique">normaalia</span>.
</h2>

<div style="font-family:sans-serif;font-style:oblique">
Löytyyköhän
<span style="font-style:italic">oblique</span>-tyylistä
Sans-Serif-fonttia?
</div>

<p style="font-style:italic">
Totutusta poikkeava
<em style="font-style:normal">ulkoasu</em>
hinnalla millä hyvänsä!</p>

<pre style="font-style:oblique">
Vääntyyköhän tämä vinoon?
</pre>

Font Variant

Font Variant -ominaisuudella ilmoitetaan toivottu fonttimuunnelma, joko normaali, tai pienet kapiteelit.

Huomiot

• Pienet kapiteelit ovat pienaakkosista muodostettuja suuraakkosia. Asiakasohjelmat voivat simuloida Font Variant -ominaisuutta käyttämällä (parhaassa tapauksessa skaalattuja) suuraakkosia.
• Muita mahdollisia fonttimuunnelmia ei voi ilmoittaa.

Esimerkit

<p>Tämä on ihan tavallinen tekstikappale.</p>

<p>TÄMÄ ON IHAN TAVALLINEN TEKSTIKAPPALE SUURAAKKOSILLA.</p>

<p style="font-variant:small-caps">Tämä on tekstikappale
Font Variant -ominaisuudella.</p>

<p style="font-variant:small-caps">Font Variant -ominaisuus
<em>pitäisi myös periytyä</em>.</p>

<p style="font-variant:small-caps">Font Variant -ominaisuuden
periytyminen ei aina ole <span style="font-variant:normal">
toivottua</span>.</p>

Font Weight

Font Weight -ominaisuudella ilmoitetaan toivottu fontin painotus kirjasintyypin suomissa mahdollisuuksissa.

Huomiot

• Arvot bolder (painavampi) ja lighter (kevyempi) suhteutetaan emoelementistä periytyneeseen fonttipainotukseen. Muut arvot ovat absoluuttisia.
• Harvasta kirjasintyypistä löytyy yhdeksää eri painotusta, joten esim. arvot 100 - 300 saattavat kaikki viitata samaan painoarvoon. Lukuarvot saattavat myös tuottaa epätoivottuja tuloksia, jos annettua arvoa ei kirjasintyypistä löydy.
• Avainsana normal vastaa arvoa 400 ja bold vastaa arvoa 700.

Esimerkit

<h3 style="font-family:Arial">Lista
<span style="font-weight:bolder">Font-Weight</span>
-lukuarvoista <span style="font-weight:lighter">
Arialilla</span>:</h3>

<ul style="font-family:Arial">
	<li style="font-weight:100"> 100 </li>
	<li style="font-weight:200"> 200 </li>
	<li style="font-weight:300"> 300 </li>
	<li style="font-weight:400"> 400 </li>
	<li style="font-weight:500"> 500 </li>
	<li style="font-weight:600"> 600 </li>
	<li style="font-weight:700"> 700 </li>
	<li style="font-weight:800"> 800 </li>
	<li style="font-weight:900"> 900 </li>
</ul>

Font

Font on pikakirjoitusominaisuus, jolla voidaan yhdistää kaikki fontin ominaisuudet ja rivikorkeus yhdeksi ilmoitukseksi.

Huomiot

• Yksittäisten fonttiominaisuuksien alkuarvo astuu voimaan, jollei jotain ominaisuutta ilmoiteta.
• Ominaisuudet erotetaan toisistaan välilyönnillä. Ilmoitusjärjestys on vapaa.

Esimerkit

<p style="font:italic normal bold 14pt/16pt arial,sans-serif">
Tässä on ilmoitettu kaikki ominaisuudet. 
<var>Normal</var> jää implisiittisesti Font-Variantin arvoksi.</p>

<p style="font:12pt/20pt cursive">
Tässä on ilmoitettu ainoastaan fontin- ja rivin korkeus,
sekä kirjasintyyppi. Tyyli, muunnelma ja painoitus saavat
arvoksi <var>normal</var>.</p>