logo

CSS podebljani tekst

The težina fonta Svojstvo u CSS-u koristi se za postavljanje težine ili debljine fonta. Određuje koliko su tanki ili debeli znakovi u tekstu. The težina fonta Svojstvo ovisi ili o težinama koje je odredio preglednik ili o dostupnim fontovima u obitelji fontova. Ovo CSS svojstvo definira tanke do debelih znakova.

Prihvaća unaprijed definirane numeričke vrijednosti ili vrijednosti ključnih riječi. Dostupne ključne riječi koje možemo koristiti s ovim svojstvom su normalno, podebljano, svjetlije i podebljano . Numerička vrijednost može biti 100, 200, 300, ........., do 900. Veća numerička vrijednost predstavlja podebljaniju težinu fonta od nižih numeričkih vrijednosti.

Sintaksa

 font-weight: normal | bold | bolder | lighter | number | initial | inherit; 

The broj u gornjoj sintaksi predstavlja numeričke vrijednosti. Numerička vrijednost 400 jednaka je vrijednosti ključne riječi normalan , i vrijednost 700 jednaka je vrijednosti ključne riječi podebljano .

The normalan strong> vrijednost definira normalne znakove, a podebljano vrijednost specificira debele znakove. The odvažniji vrijednost predstavlja podebljani font-weight, a upaljač vrijednost predstavlja manju težinu fonta od težine naslijeđene od roditelja.

Pogledajmo kako podebljati tekst u CSS-u pomoću ilustracije.

Uvod

CSS je poznat kao moćan alat za razvoj web stranice. Uz pomoć toga, možemo stilizirati HTML sadržaj na mnogo načina. Jedno od najčešćih svojstava oblikovanja web stranice je korištenje svojstva težine fonta. Uz pomoć podebljanog teksta možemo naglasiti ključne informacije i vizualni kontrast, a također poboljšava čitljivost sadržaja.

Razumijevanje svojstava težine fonta

U CSS-u postoji svojstvo Font-Weight koje se koristi za definiranje težine ili debljine fonta. Također određuje stupanj podebljanosti ili svjetline teksta, pri čemu prihvaćanje veće vrijednosti označava podebljeniju težinu fonta. Svojstvo font-weight prihvaća različite vrijednosti, kao što su numeričke vrijednosti i vrijednosti ključnih riječi.

Raspon numeričkih vrijednosti je između 100 i 900, s koracima od 100. Na primjer, ako uzmemo vrijednost težine fonta kao 400, onda je to normalno, dok se vrijednost težine fonta od 700 smatra podebljanom. Podebljano, podebljano, svjetlije i Neke često korištene vrijednosti ključnih riječi.

Kako stvoriti podebljani tekst pomoću CSS-a

Možemo stvoriti podebljani tekst u HTML-u uz pomoć CSS-a. Možemo koristiti ugrađena, unutarnja ili vanjska svojstva stila fonta.

1. Kako možemo stvoriti podebljani tekst s ugrađenim stilom

Uz pomoć ugrađenog stila, svojstvo težine fonta možemo koristiti izravno za određeni HTML element. Uzmimo primjer.

HTML kôd:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

Izlaz

Kako podebljati tekst u CSS-u

Obrazloženje:

U gornjem kodu upotrijebili smo ugrađeni CSS i primijenili svojstvo font-weight kao podebljano.

nadjačavanje metode u Javi

2. Kako možemo stvoriti podebljani tekst s unutarnjim stilom

Ovdje moramo napisati CSS svojstvo unutar oznake head s oznakom stila. Uzmimo primjer:

HTML kôd:

 Document p { font-weight: bold; } <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

Izlaz

Kako podebljati tekst u CSS-u

Obrazloženje:

U gornjem kodu upotrijebili smo interni CSS i primijenili svojstvo težine fonta.

3. Kako možemo stvoriti podebljani tekst s vanjskim stilom

Ovdje moramo stvoriti vanjsku CSS datoteku i povezati je s HTML datotekom. Unutar te CSS datoteke moramo napisati svojstvo stila. Uzmimo primjer.

HTML kôd:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

CSS kôd:

 p { font-weight: bold; } 

Izlaz

Kako podebljati tekst u CSS-u

Obrazloženje:

U gornjem kodu koristili smo vanjsko CSS svojstvo i implementirali svojstvo font-weight.

Primjer

Pogledajmo kako stvoriti podebljani tekst u različitim nijansama pomoću primjera u nastavku:

 p{ font-size: 20px; } <p>This font is normal.</p> <p>This font is bold.</p> <p>This font is lighter.</p> <p>This font is bolder.</p> <p>This font is 100 weight.</p> <p>This font is 200 weight.</p> <p>This font is 300 weight.</p> <p>This font is 400 weight.</p> <p>This font is 500 weight.</p> <p>This font is 600 weight.</p> <p>This font is 700 weight.</p> <p>This font is 800 weight.</p> <p>This font is 900 weight.</p> 

Izlaz

Kako podebljati tekst u CSS-u