Lastnosti CSS, ki jih lahko definiramo pisavi
font-family
Lastnost font-family
določa pisavo. Ločimo 5 družin pisav, ki jih lahko uporabimo v CSS:
- Serif
- Sans-Serif
- Monospace
- Script
- Fantasy
Genrična pisava | Pisava | Opis |
---|---|---|
Serif | Times New Roman Georgia |
Serifne pisave imajo ob koncu znakov majhne črte, ki navidezno označujejo vrstico |
Sans-serif | Arial Verdana |
Sans-serif pisave nimajo črtic, so lažje berljive na zaslonih |
Monospace | Courier New Lucida Console |
Vsi znaki pisave imajo enako širino |
Script | Cursive | Redko uporabljena pisava, uporablja se le za estetske dodatke |
Fantasy | Comic Sans Forte |
Redko uporabljena pisava, uporablja se le za estetske dodatke |
Razlika med pisavama Sans-serif in Serif
Na računalniških zaslonih je pisava tipa sans-serif lažje berljiva, kot pisava tipa serif!
Pisava Monospace ima vse znake enake širine
Pisavo definiramo tako, da v CSS določimo lastnost font-family
za posamezno značko.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Pri tem smo določili, da brskalnik za privzeto pisavo uporabi Verdana. Če pisave Verdana ni na voljo, bo uporabil Arial, sicer pa bo uporabil katerokoli pisavo iz družine Sans-serif. Taka definicija je potrebna zaradi raznolikosti brskalnikov, operacijskih sistemov in predvsem različnih tipov pisav, ki jih le-ti uporabljajo.
Pri pisavah, ki imajo ime sestavljeno iz več besed, moramo uporabiti narekovaje ""
:
body {
font-family: "Times New Roman", Times, serif;
}
Priporočene kombinacije pisav si lahko ogledate na w3schools.
Katero pisavo torej uporabiti?
- za uporabo na zaslonu so priporočjive pisave iz družine Sans-Serif
- družino pisav Serif naj bi se uporabljalo za tiskanje
- Monospace pisave so pogosto uporabljane za prikaz izvorne kode in skript
- pisave iz družin Fantasy in Script so najredkeje uporabljane, največkrat le za estetske dodatke
font-size
Lastnost font-size
določa velikost pisave. Vrednost lastnosti font-size
ja lahko absolutna ali relativna.
Absolutna velikost pisave:
- določa točno velikost besedila
- ne omogoča uporabnikom nastavljanje velikosti besedila v vseh brskalnikih
- če poznamo medij in njegovo velikost, kjer bo spletna stran prikazana, potem je smiselna uporaba absolutnih vrednosti
Relativna velikost pisave:
- določa velikost relativno glede na druge elemnte
- uporabnik v brskalnikih lahko spreminja velikost besedila
Določimo lahko naslednje vrednosti velikosti pisave:
Vrednost | Opis |
---|---|
medium | Srednja velikost pisave, to je privzeta vrednost |
xx-small | Zelo zelo majhna pisava |
x-small | Zelo majhna pisava |
small | Majhna pisava |
large | Velika pisava |
x-large | Zelo velika pisava |
xx-large | Zelo zelo velika pisava |
smaller | Manjša pisava glede na velikost nadrejenega elemnta |
larger | Večja pisava glede na velikost nadrejenega elemnta |
length | Velikost pisave v mm, cm, in, pt, pc, em, ex, px |
% | Velikost pisave v % glede na velikost nadrejenega elemnta |
initial | Ta vrednost naj bo privzeta |
inherit | Vrednost podeduje od nadrejenega elementa |
Primer absolutnega določanja velikosti pisave:
<h1>Glavni naslov</h1>
<h2>Podnaslov</h2>
<p class="prvi">To je prvi odstavek.</p>
<p class="drugi">To je drugi odstavek.</p>
<p class="tretji">to je tretji odstavek.</p>
<p class="cetrti">to je četrti odstavek.</p>
h1 { font-size: 1.5cm }
h2 { font-size: 12mm }
.prvi { font-size: 9mm }
.drugi { font-size: 7mm }
.tretji { font-size: 0.2in }
.cetrti { font-size: 0.1in }
Glavni naslov
Podnaslov
To je prvi odstavek.
To je drugi odstavek.
To je tretji odstavek.
To je četrti odstavek.
Primer relativnega določanja velikosti pisave:
h1 { font-size: 2em }
h2 { font-size: 1.5em }
.prvi { font-size: 1em }
.drugi { font-size: 0.8em }
.tretji { font-size: 1ex }
.cetrti { font-size: 0.8ex }
Glavni naslov
Podnaslov
To je prvi odstavek.
To je drugi odstavek.
To je tretji odstavek.
To je četrti odstavek.
h1 { font-size: 200% }
h2 { font-size: 150% }
.prvi { font-size: 100% }
.drugi { font-size: 80% }
.tretji { font-size: 50% }
.cetrti { font-size: 30% }
Glavni naslov
Podnaslov
To je prvi odstavek.
To je drugi odstavek.
To je tretji odstavek.
To je četrti odstavek.
font-weight
Lastnost font-weight
določa poudarjenost pisave.
Običajno poudarjenost pisave podajamo z absolutnima vrednostma normal
in bold
. Če pa pisava pozna več stopenj poudarjenosti, izberemo vrednost z devetstopenjke lestvice, kjer 100
pomeni najmanj, 900
pa najbolj poudarjeno. Vrednosti normal
ustreza vrednost 400
, vrednosti bold
pa 700
.
Vrednost | Pomen |
---|---|
normal | običajno |
bold | krepko |
bolder | bolj krepko |
lighter | manj krepko |
100 200 300 400 500 600 700 800 900 |
krepko stopnje 100 do 900, 400 je vrednost normal, 700 je krepko |
initial | ta vrednost naj bo privzeta |
inherit | vrednost podeduje od nadrejenega elementa |
Primer:
<p>
<span style="font-weight:normal">običajno, </span>
<span style="font-weight:bold">krepko, </span>
<span style="font-weight:lighter">manj krepko, </span>
<span style="font-weight:bolder">bolj krepko, </span><br />
<span style="font-weight:100">100, </span>
<span style="font-weight:200">200, </span>
<span style="font-weight:300">300, </span>
<span style="font-weight:400">400, </span>
<span style="font-weight:500">500, </span>
<span style="font-weight:600">600, </span>
<span style="font-weight:700">700, </span>
<span style="font-weight:800">800, </span>
<span style="font-weight:900">900, </span>
</p>
običajno,
krepko,
manj krepko,
bolj krepko,
100,
200,
300,
400,
500,
600,
700,
800,
900,
font-style
Lastnost font-style
določa stil pisave.
Vrednost | Pomen |
---|---|
normal | običajno besedilo |
italic | nagnjeno besedilo |
oblique | nagnjeno besedilo |
initial | ta vrednost naj bo privzeta |
inherit | vrednost podeduje od nadrejenega elementa |
Primer:
<p claas="normal">To je bičajno besedilo oblike "normal".</p>
<p class="italic">To je nagnjeno besedilo oblike "italic".</p>
<p class="oblique">To je nagnjeno besedilo oblike "oblique".</p>
.normal { font-style: normal }
.italic { font-style: italic }
.oblique { font-style: oblique }
To je bičajno besedilo oblike "normal".
To je nagnjeno besedilo oblike "italic".
To je nagnjeno besedilo oblike "oblique".
font-variant
Lastnost font-variant
določa način izpisa besedila z malimi velikimi črkami.
Vrednost | Pomen |
---|---|
normal | običajno besedilo |
small-caps | male velike črke |
initial | ta vrednost naj bo privzeta |
inherit | vrednost podeduje od nadrejenega elementa |
<p claas="normal">To so običajne črke "normal".</p>
<p class="small-caps">To so male velike črke "small-caps".</p>
<p class="normal">To so običajne velike črke "normal".</p>
.normal { font-variant: normal }
.small-caps { font-variant: small-caps }
To so običajne črke "normal".
To so male velike črke "small-caps".
TO SO OBIČAJNE VELIKE ČRKE "normal".
line-height
Lastnost line-height
določa najmanjšo višino vrstice besedila.
Vrednost | Pomen |
---|---|
normal | običajna višina vrstice |
število | višino vrstice je zmnožek števila in vrednosti višine vrstice |
dolžina | fiksna višina vrstice v mm, cm, in, pt, pc, em, ex, px |
% | višina vrstice v % glede na velikost pisave |
initial | ta vrednost naj bo privzeta |
inherit | vrednost podeduje od nadrejenega elementa |
Primer določitve višne vrstice:
<p claas="normal">Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost normal.</p>
<p claas="visina_2">Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 2.</p>
<p claas="visina_50px">Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 50px.</p>
<p claas="visina_130">Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 130%.</p>
<p claas="visina_15em">Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 1.5em.</p>
.normal { line-height: normal }
.visina_2 { line-height: 2 }
.visina_50px { line-height: 50px }
.visina_130 { line-height: 130% }
.visina_15em { line-height: 1.5em }
Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost normal.
Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 2.
Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 50px.
Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 130%.
Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 1.5em.
font-face
Pravilo @font-face
omogoča prenos in uporabo poljubne pisave.
@font-face {
font-family: DeliciousRoman;
src:url(fonts/Delicious-Roman.otf);
}
p {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}
font
Lastnost font
uporabljamo kot bližnjico za nastavitev vseh lastnosti pisave.
Za vrednost lastnosti font
naštejemo vrednosti posameznih lastnosti pisave v predpisanem vrstnem redu. Najprej navedemo vrednosti za font-weight
, font-style
in font-variant
v poljubnem vrstnem redu. Če vrednosti katere od teh lastnosti ne navedemo, bo dobila svojo privzeto vrednost. Nato moramo navesti vrednost lastnosti font-size
, ki ji lahko na koncu dodamo še vrednost lastnosti line-height
(ločimo ju z znakom /
), čisto na koncu pa moramo navesti še vrednost lastnosti font-family
.