The fontin paino CSS:n ominaisuutta käytetään fontin painon tai paksuuden asettamiseen. Se määrittää, kuinka ohut tai paksut tekstin merkit ovat. The fontin paino ominaisuus riippuu joko selaimen määrittämästä painoarvosta tai kirjasinperheen käytettävissä olevista kirjasinkuvista. Tämä CSS-ominaisuus määrittää ohuista paksuihin merkkejä.

Se hyväksyy ennalta määritetyt numeeriset arvot tai avainsanaarvot. Käytettävissä olevat avainsanat, joita voimme käyttää tämän ominaisuuden kanssa, ovat normaali, lihavoitu, kevyempi ja rohkeampi . Numeerinen arvo voi olla 100, 200, 300, ........., 900 asti. Suurempi numeroarvo edustaa lihavoitumpaa fonttipainoa kuin pienemmät numeroarvot.

Syntaksi

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

The määrä yllä olevassa syntaksissa edustaa numeerisia arvoja. Numeerinen arvo 400 on sama kuin avainsanan arvo normaali , ja arvo 700 on sama kuin avainsanan arvo lihavoitu .

The normaali strong> arvo määrittää normaalit merkit ja lihavoitu arvo määrittää paksut merkit. The rohkeampi arvo edustaa lihavoitumpaa fontin painoa, ja vaaleampi arvo edustaa kevyempää fonttipainoa kuin paino, joka on peritty emolta.

Katsotaanpa, kuinka lihavoidaan tekstiä CSS:ssä käyttämällä kuvaa.

Johdanto

CSS tunnetaan tehokkaana työkaluna verkkosivujen kehittämiseen. Tämän avulla voimme muokata HTML-sisältöä niin monella tavalla. Yksi yleisimmistä verkkosivun muotoilun ominaisuuksista on font-weight -ominaisuuden avulla. Lihavoidun tekstin avulla voimme korostaa keskeistä tietoa ja visuaalista kontrastia, ja se parantaa myös sisällön luettavuutta.

Fonttipaino-ominaisuuden ymmärtäminen

CSS:ssä on Font-Weight-ominaisuus, jota käytetään määrittämään fontin paino tai paksuus. Se määrittää myös tekstin lihavoinnin tai vaaleuden asteen hyväksymällä korkeamman arvon, joka ilmaisee lihavoitumman fontin painon. Fontin paino -ominaisuus hyväksyy erilaisia ​​arvoja, kuten numeerisia ja avainsanaarvoja.

Numeeristen arvojen alue on 100:n ja 900:n välillä 100:n askelin. Jos esimerkiksi otamme fontin painoarvoksi 400, se on normaalia, kun taas 700 fontin painoarvoa pidetään lihavoituna. Lihavoitu, rohkeampi, kevyempi ja Jotkut yleisesti käytetyt avainsanaarvot.

Kuinka luoda lihavoitua tekstiä CSS:llä

Voimme luoda lihavoitun tekstin HTML:ään CSS:n avulla. Voimme käyttää tekstin sisäisiä, sisäisiä tai ulkoisia fonttityyppisiä ominaisuuksia.

hashtable java

1. Kuinka voimme luoda lihavoitun tekstin upotetun tyylin avulla

Sisäisen tyylin avulla voimme käyttää font-weight -ominaisuutta suoraan tiettyyn HTML-elementtiin. Otetaan esimerkki.

HTML-koodi:

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

Lähtö

Selitys:

Yllä olevassa koodissa käytimme sisäistä CSS:ää ja käytimme font-weight-ominaisuutta lihavoituna.

2. Kuinka voimme luoda lihavoitua tekstiä sisäisellä tyylillä

Täällä meidän on kirjoitettava CSS-ominaisuus head-tunnisteen sisään tyylitunnisteen kanssa. Otetaan esimerkki:

HTML-koodi:

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

Lähtö

Selitys:

Yllä olevassa koodissa olemme käyttäneet sisäistä CSS:ää ja käyttäneet font-weight -ominaisuutta.

3. Kuinka voimme luoda lihavoitua tekstiä ulkoisella tyylillä

Täällä meidän on luotava ulkoinen CSS-tiedosto ja linkitettävä se HTML-tiedostoon. Tämän CSS-tiedoston sisään meidän on kirjoitettava tyyliominaisuus. Otetaan esimerkki.

HTML-koodi:

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

CSS-koodi:

 p { font-weight: bold; } 

Lähtö

Selitys:

Yllä olevassa koodissa olemme käyttäneet ulkoista CSS-ominaisuutta ja toteuttaneet font-weight -ominaisuuden.

Esimerkki

Katsotaanpa, kuinka voit luoda lihavoitua tekstiä eri sävyissä alla olevan esimerkin avulla:

 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> 

Lähtö