Pisave (ang. Font Family)

Pisave določajo krepkost, velikost in slog besedila. V CSS obstajata dva načina pisav, to sta generic family, in font family. Generic family je skupina pisav s podobnim videzom, na primer Serif ali Monospace, medtem ko je font family posebna. Vanjo štejemo pisave kot so Times New Roman ali Arial.

Font Family PRIMER

V spletu ni priporočljivo uporabljati več različnih pisav naenkrat, lahko uporabimo eno pisavo za glave, in drugo za odstavke. Zakaj toliko pisav? Če brskalnik ne podpira ene, potem poskusi z naslednjo, in tako naprej, kar je v današnjih časih v bistvu nemogoče.

Vrednost OPIS
normal besedilo je prikazano z normalno pisavo
italic besedilo je prikazano poševno
oblique besedilo je naslonjeno (oblique in italic sta si izredno podobni poševni pisavi, zato sem uporabil besedo naslonjeno)

V spletu je priporočljivo uporabljati standardno velikost, lahko se spremeni za kakšen primer (glave iste pisave in odstavki drugačna), seveda ko uporabimo hover bomo s tem zamenjali tako barvo kot pisavo, samo spreminjanje velikosti ni praksa na spletu. Odzivnost je mogoče nastaviti z enoto vw, kar pomeni viewport width oziroma širina vidnega polja.

S pomočjo atributa font-size lahko spreminjamo velikost pisave, z atributom font-style spremenimo slog pisave v normal ali italic. Dober atribut je tudi font-weight s katerim lahko odebelimo (ang. Bold). Lastnost bold lahko izberemo iz seznama, lahko pa tudi vpišemo s številkami. Številka 100 bo pisava tanka, in potem nadaljujemo z številko 200, 300 ... do zadnje 600, ki predstavlja najdebelejšo pisavo.

Pisavo lahko tudi obarvamo, kot tudi ozadje besedila, s pomočjo atributov color: imeBarve za besedilo, in background-color: imeBarve za ozadje. Tudi atribut hover je dober, saj ko gremo čez besedilo, se bo to besedilo spremenilo.

Font Variant določa v kakšni pisavi naj bo besedilo prikazano, in velikost črk kot so male ali večje. Pri izbiri majhnih črk se vse male črke pretvorijo v velike, vendar se velike črke pojavijo v manjši velikosti. Če želimo, da so tudi velike črke povečane uporabimo font-variant: small-caps;. Za vse male/velike črka pa uporabimo font-variant: all-small-caps;

    
    <style>
        p.fonts {
            font-family: "Roboto Light", "Arial Narrow", "Times New Roman", "Berlin Sans FB Demi";
            font-size: 16px;
            color: blue;
            background-color: yellow;
            font-weight: 100;
            font-style: normal;
        }

        p.font {
            font-family: "Book Antiqua", "Calibri Light", "Georgia", "Verdana";
            font-size: 26px;
            color: darkblue;
            background-color: skyblue;
            font-weight: 600;
            font-style: italic;
        }

        p.font:hover {
            color: #000000;
            background-color: #ffa500;
            font-variant: all-small-caps;
            padding: 20px 10px;
        }

        p.fonts:hover {
            font-variant: all-petite-caps;
            color: black;
            background-color: skyblue;
            font-size: 24px;
            font-style: italic;
            font-weight: 600;
        }
    </style>

    <p class="font">Prvi paragraph ima nastavljene štiri pisave, te so Book Antiqua, Calibri Light, Georgia in
        Verdana.</p>
    <p class="fonts">Drugi paragraph ima vključuje tudi štiri pisave. Te so: Roboto Light, Arial Narrow, Times
        New Roman in Berlin Sans FB Demi.</p>
    

Prvi paragraph ima nastavljene štiri pisave, te so Book Antiqua, Calibri Light, Georgia in Verdana.

Drugi paragraph ima vključuje tudi štiri pisave. Te so: Roboto Light, Arial Narrow, Times New Roman in Berlin Sans FB Demi.

Pregledali smo vse glavne lastnosti pisave, in kaj lahko z njo delamo. Hvala za obisk in srečno.