Načrtovanje in razvoj spletnih aplikacij

Pisava v CSS

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

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

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.