Fontin paino - CSS-temppuja | CSS-almanakka 2025

font-weightOminaisuus asettaa painon tai paksuuden, fontin ja on riippuvainen joko käytettävissä fontteja sisällä kirjasinperhettä tai painoja määritelty selaimen.

span ( font-weight: bold; )

font-weightOmaisuuden hyväksyy joko avainsanan arvon tai ennalta numeerinen arvo. Käytettävissä olevat avainsanat ovat:

normal
bold
bolder
lighter

Saatavilla olevat numeeriset arvot ovat:

100
200
300
400
500
600
700
800
900

Avainsanan arvo normalyhdistyy numeeriseen arvoon 400ja arvo boldkartoitetaan 700.

Jos haluat nähdä vaikutuksen käyttämällä muita arvoja kuin 400tai 700, käytetyllä kirjasimella on oltava sisäänrakennetut kasvot, jotka vastaavat määritettyjä painoja.

Jos kirjasimessa on lihavoitu (“700”) tai normaali (“400”) versio osana kirjasintyyppiä, selain käyttää sitä. Jos niitä ei ole saatavilla, selain jäljittelee omaa lihavoitua tai normaalia versiota kirjasimesta. Se ei jäljittele muita käytettävissä olevia painoja. Fontit käyttävät usein nimiä, kuten "Normaali" ja "Vaalea", vaihtoehtoisten fonttien painojen tunnistamiseksi.

Seuraava esittely osoittaa vaihtoehtoisten painoarvojen käytön:

Katso tämä kynä!

Yllä oleva esittely käyttää ilmaista kirjasinta Open Sans, joka on upotettu Google Web Fonts -sovellusliittymän avulla. Fontti ladataan kaikilla käytettävissä olevilla kirjasinpainoilla, joten font-weightominaisuutta käyttämällä eri käytettävissä olevat painot näytetään kunkin kappaleen tekstissä kuvatulla tavalla. Paino, jota ei ole saatavilla, näyttää vain loogisesti lähimmän painon.

Yleisillä kirjasimilla, kuten Arial, Helvetica, Georgia jne., Ei ole muita painoja kuin 400ja 700. Joten sama demo, joka näytetään yhdellä näistä kirjasimista, näyttäisi vain kaksi painoa yhdeksässä kappaleessa.

Käyttämällä "rohkeampi" ja "kevyempi" avainsanoja

Avainsanan arvot bolderja lighterovat suhteessa pääelementin laskettuun fontin painoon. Selain etsii lähinnä olevan "rohkeamman" tai "kevyemmän" painon sen mukaan, mikä kirjasinperheessä on käytettävissä, muuten se yksinkertaisesti valitsee "400" tai "700", riippuen siitä, mikä on järkevintä.

Alielementit eivät peri avainsanojen "rohkeampi" ja "kevyempi" arvoja, vaan perivät lasketun painon.