Svojstvo CSS Font koristi se za kontrolu izgleda teksta. Korištenjem svojstava CSS fonta možete promijeniti veličinu teksta, boju, stil i više. Već ste naučili kako podebljati ili podcrtati tekst. Ovdje ćete također znati kako promijeniti veličinu fonta koristeći postotak.
Ovo su neki važni atributi fonta:
1) Boja CSS fonta
Boja CSS fonta je samostalni atribut u CSS-u iako se čini da je dio CSS fontova. Koristi se za promjenu boje teksta.
Postoje tri različita formata za definiranje boje:
- Po imenu boje
- Po heksadecimalnoj vrijednosti
- Po RGB-u
U gornjem primjeru definirali smo sve te formate.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Testirajte sada Izlaz:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) Veličina CSS fonta
CSS svojstvo veličine fonta koristi se za promjenu veličine fonta.
Ovo su moguće vrijednosti koje se mogu koristiti za postavljanje veličine fonta:
| Vrijednost veličine fonta | Opis |
|---|---|
| xx-mali | koristi se za prikaz iznimno male veličine teksta. |
| x-mali | koristi se za prikaz ekstra male veličine teksta. |
| mali | koristi se za prikaz male veličine teksta. |
| srednji | koristi se za prikaz teksta srednje veličine. |
| velika | koristi se za prikaz velike veličine teksta. |
| x-veliki | koristi se za prikaz iznimno velike veličine teksta. |
| xx-veliki | koristi se za prikaz iznimno velike veličine teksta. |
| manji | koristi se za prikaz relativno manje veličine teksta. |
| veći | koristi se za prikaz relativno veće veličine teksta. |
| veličina u pikselima ili % | koristi se za postavljanje vrijednosti u postocima ili u pikselima. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Testirajte sada
Izlaz:
Ova veličina fonta je izuzetno mala.
Ova veličina fonta je izuzetno mala
Ova veličina fonta je mala
Ova veličina fonta je srednja.
Ova veličina fonta je velika.
Ova veličina fonta je iznimno velika.
Ova veličina fonta je izuzetno velika.
Ova veličina fonta je manja.
Ova veličina fonta je veća.
Ova veličina fonta postavljena je na 200%.
Veličina ovog fonta je 20 piksela.
4) CSS stil fonta
CSS Svojstvo stila fonta definira koju vrstu fonta želite prikazati. Može biti kurziv, koso ili normalan.
concat nizovi java
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Testirajte sada Izlaz:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) CSS varijanta fonta
CSS svojstvo varijante fonta navodi kako postaviti varijantu fonta elementa. Može biti normalno i s malim slovima.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Testirajte sada Izlaz:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Težina CSS fonta
CSS svojstvo težine fonta definira težinu fonta i određuje koliko je font podebljan. Moguće vrijednosti težine fonta mogu biti normalno, podebljano, podebljano, svjetlije ili brojevi (100, 200..... do 900).
Ovaj font je podebljan.
Ovaj font je podebljaniji.
Ovaj font je svjetliji.
Ovaj font ima težinu od 100.
Ovaj font ima težinu od 200.
Ovaj font ima težinu od 300.
Ovaj font ima težinu od 400.
Ovaj font ima težinu od 500.
Ovaj font ima težinu od 600.
Ovaj font ima težinu od 700.
Ovaj font ima težinu od 800.
Ovaj font ima težinu od 900.
Testirajte sadaIzlaz:
Ovaj font je podebljan.
Ovaj font je podebljaniji.
Ovaj font je svjetliji.
Ovaj font ima težinu od 100.
Ovaj font ima težinu od 200.
Ovaj font ima težinu od 300.
Ovaj font ima težinu od 400.
Ovaj font ima težinu od 500.
Ovaj font ima težinu od 600.
Ovaj font ima težinu od 700.
Ovaj font ima težinu od 800.
Ovaj font ima težinu od 900.