U ovom postu ćemo napisati upute za promjenu fonta i njegove boje na web stranici.
Uvođenjem HTML5, ispravan način konfiguriranja web fontova je korištenje kaskadnih stilskih listova.
Stari način korištenja ugrađenih atributa stila ili navodnika fontova je zastario i ne bi se trebao više koristiti.
Korištenje CSS-a za jednu upotrebu
Ako planirate promijeniti izgled i boju web fonta samo jednom, konfigurirajte njegova svojstva u oznaci elementa.
Pomoću atributa style možete koristiti porodicu fontova za navođenje izgleda i boje fonta, kao što je prikazano u sljedećem primjeru.
<p style="font-family: Robot; color: Red; font-size : 15px;">Ovaj tekst ima font Robot, crven je i 15 piksela.</p>
Koristite CSS za jednu ili više stranica
Prilagođeni font za jednu stranicu
Možete umetnuti kôd između <style></style> u zaglavlju stranice kako biste promijenili izgled teksta u različitim elementima.
Donji okvir sadrži uzorak koda, jednom pozvan, promijenit će izgled fonta u Roboto i obojati ga crvenom bojom.
Kao što vidite, naziv klase smo definirali kao “mojfont”.
<style type="text/css">
.mojfont {
font-family: Roboto;
color: Red;
font-size: 15px;
}
</style>
Jednom definiran, ovaj stil možete primijeniti na većinu elemenata na stranici dodavanjem klase “mojfont”.
Prilagođeni font za mnoge stranice
Uvoz vanjskih CSS datoteka je vrlo koristan jer omogućuje korisnicima promjenu pravila za više stranica istovremeno.
Sljedeći odjeljak prikazuje primjer stvaranja osnovne CSS datoteke koja može promijeniti font i boju većine elemenata.
Datoteka se može učitati na više web stranica ili čak na cijele stranice.
@charset "utf-8";
.mojfont {
font-family: Roboto;
color: Red;
}
Nakon stavljanja prethodnog teksta u .css datoteku, nazovimo je osnovni.css, možete je povezati sa bilo kojom drugom stranicom koristeći redak sličan sljedećem primjeru.
<link rel="stylesheet" Type="text/css" href="https://www.mllapan.com/osnovni.css">
Koristite oznaku fonta
Iako je zastarjela, oznaka HTML-a <font> i dalje se može koristiti i možda će se morati koristiti s određenim web uslugama.
Kada koristite oznaku FONT, morate uključiti atribut face koji opisuje font koji ćete koristiti.
U sljedećem primjeru koristimo Roboto font i heksadecimalni kod boje #ff0000 (crveno).
<font color="#ff0000" face="Roboto" size="15">Poseban primjer fonta.</font>
