CSS kirjasin

CSS kirjasinkohteen ominaisuudet määrittelevät tekstin kirjasinkoon, lihavoituksen, tyylin (esim. kalostettu) ja muodon (esim. pieni isojen kirjainten muoto).

CSS kirjasinketju

CSS:ssa on kaksi erilaista kirjasinkonimen tyyppiä:

  • Yleinen kirjasinko - Yhtä suuntaa olevien kirjasinkoon yhdistelmä (esim. "Serif" tai "Monospace")
  • Tietty kirjasinko - Tietty kirjasinko (esim. "Times" tai "Courier")

Lisäksi CSS määrittelee viisi erityistä yleistä kirjasinko

  • Serif-kirjasin
  • Sans-serif-kirjasin
  • Monospace-kirjasin
  • Cursive-kirjasin
  • Fantasy-kirjasin

Jos tarvitset lisätietoja kirjasinkoista, lue CSS kirjasinketju.

Määritetty kirjasinko

Käytä font-family-ominaisuus Määritä tekstin kirjasinko

Käytä yleistä kirjasinko

Jos haluat, että dokumentti käyttää sans-serif-kirjasinta, mutta et välitä siitä, mikä kirjasin se on, seuraava lausunto on sopiva:

body {font-family: sans-serif;}

Kokeile itse

Käyttöagentti valitsee tällöin yhden sans-serif-kirjasinkoon (esim. Helvetica) ja soveltaa sitä body-elementtiin. Perinnön vuoksi tämä kirjasinko sovelletaan myös kaikkiin body-elementtiin sisältyviin elementteihin, ellei ole olemassa tarkempaa valitsinta, joka sen korvaa.

Määritetty kirjasinko

Välittömän yleisen kirjasinkoon lisäksi voit määrittää font-family-ominaisuuden tarkemmalla tavalla.

Seuraava esimerkki asettaa Georgia-kirjasimen kaikille h1-elementeille:

h1 {font-family: Georgia;}

Kokeile itse

Tämä sääntö voi kuitenkin aiheuttaa toisen ongelman, jos käyttöagentissa ei ole asennettuna Georgia-kirjasinta, käyttöagentin oletuskirjasin joutuu käytettään h1-elementin näyttämiseen. Vaikka Times ei täysin vastaa Georgiaa, se on silti riittävän lähellä.

Voimme ratkaista tämän yhdistämällä tietyn kirjasimen nimen ja yleisen kirjasinkoon:

h1 {font-family: Georgia,} serif;}

Kokeile itse

Jos lukija ei asenna Georgiaa, mutta asentaa Times-kirjasimen (serif-kirjasinkoon yksi kirjasin), käyttöagentti saattaa käyttää Timesia h1-elementissä. Vaikka Times ei täysin vastaa Georgiaa, se on silti riittävän lähellä.

Siksi suosittelemme tarjoamaan kaikissa font-family-säännöissä yleisen kirjasinkoon. Tämä tarjoaa vaihtoehdon, jos käyttöagentti ei pysty tarjoamaan määrittämääsi tiettyä kirjasinta.

Jos olet erittäin tuttu kirjasinmalleihin, voit myös määrittää annettujen elementtien joukon vastaavia kirjasinmalleja. Tämä tehdään järjestämällä kirjasinmallit prioriteetin mukaan ja yhdistämällä ne pilkulla:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Kokeile itse

Tämän luettelon perusteella käyttäjäagentti etsii näitä fontteja luettelossa annetussa järjestyksessä. Jos luetellut fontit eivät ole saatavilla, valitaan yksinkertaisesti käytettävissä oleva serif-fontti.

Apufiilteiden käyttö

Olet ehkä huomannut, että yllä olevissa esimerkeissä käytetään yksinkertaista apufiilttiä. Vain kun fontinimessä on yksi tai useita välilyöntejä (esim. New York) tai jos fontinimi sisältää # tai $ -tyyppisiä merkkejä, tarvitaan apufiilteitä font-family-ilmotuksessa.

Yksinkertaiset tai kaksinkertaiset apufiilteet ovat hyväksyttävissä. Mutta jos font-family-ominaisuus asetetaan HTML:n style-ominaisuuteen, tulee käyttää sitä, mikä ei ole omia apufiilteitä:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,"
 'New York', serif;">...

Kokeile itse

Fonttityyli

font-style ominaisuusSe käytetään yleensä määrittämään kalottava teksti.

Tämä ominaisuus有三个值：

  • normal - teksti näytetään normaalina
  • kursiivinen - teksti näytetään kursiivisena
  • kalottava - teksti näytetään kalottavana

Esimerkki

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Kokeile itse

Kursiivisen ja kalottavan tekstin ero

font-style on erittäin yksinkertainen: käytetään valitsemaan normal-teksti, kursiivinen teksti ja kalottava teksti. Ainoa, mikä on hieman monimutkaisempaa, on selvittää kursiivisen ja kalottavan tekstin välillä oleva ero.

Kursiivinen (italic) on yksinkertainen fonttityyli, jossa jokaisella kirjaimella on pieniä muutoksia rakenteessaan, jotta ulkoasu heijastaa muutosta. Tämä on erilaista kalottavalta (oblique) tekstiltä, joka on suoritusmuodon kalottava versio.

Yleensä, kursiivinen ja kalottava teksti näyttää täysin samalta verkkoselaimessa.

Fonttiprofiili

font-variant ominaisuusPienet ison kirjasimet voidaan asettaa.

Pienet ison kirjasin ei ole tavallinen ison kirjasin eikä pieni kirjasin, vaan tällaiset kirjasimet käyttävät erikokoisia ison kirjasimen muotoja.

Esimerkki

p {font-variant:small-caps;}

Kokeile itse

Fontin lihavoitus

font-weight-ominaisuusAseta tekstin lihavoitus.

Voit asettaa tekstin粗体 käyttämällä bold-avainsanaa.

Avainsanat 100 ~ 900 määrittelevät 9:nnen fontin lihavoituksen asteen. Jos fontti sisältää nämä lihavoitustasot, numerot vastaavat suoraan määriteltyjä tasoja, 100 on ohuimman fontin muodon, 900 on paksaimman fontin muodon. Luku 400 on yhtä suuri kuin normal, ja 700 yhtä suuri kuin bold.

Jos asetat elementin lihavoituksi bolder, selain asettaa fontin lihavoituksen yli perinnäisestä arvosta. Päinvastoin, avainsana lighter saa selaimen vähentämään lihavoitusta eikä lisäämään sitä.

Esimerkki

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Kokeile itse

Fonttikoko

font-size-ominaisuusAseta tekstin koko.

Tekstin kokon hallinta on tärkeää web-suunnittelun alalla. Mutta et tulisi muuttaa tekstin kokoa niin, että kappaleet näyttävät otsikoilta tai päinvastoin.

Käytä aina oikeaa HTML-otsikkoa, esimerkiksi <h1> - <h6> -otsikkojen merkintään, <p> -kappaleiden merkintään.

font-size-arvo voi olla absoluuttinen tai suhteellinen arvo.

Absoluuttinen arvo:

  • Aseta teksti tiettyyn kokoon
  • Ei salli käyttäjien muuttaa tekstikokoa kaikissa selaimissa (ei ole hyödyllistä käyttökelkeydelle)
  • Absoluuttinen koko on hyödyllinen, kun määrität ulostulon fyysisen kohteen koosta

Suhteellinen koko:

  • Aseta koko suhteessa ympäröiviin elementteihin
  • Salli käyttäjien muuttaa tekstikokoa selaimessa

Huomioitavaa:Jos et määritä fonttikokoa, tavallisen tekstin (esim. kappaleen) oletuskoko on 16 pikseliä (16px = 1em).

Aseta fonttikoko pikseleillä

Aseta tekstin koko pikseleillä, jotta voit täysin hallita tekstin kokoa:

Esimerkki

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Kokeile itse

Firefoxissa, Chromeissa ja Safari:ssa voit säätää yllä olevien esimerkkien tekstin kokoa, mutta ei Internet Explorerissä.

Vaikka voit säätää tekstin kokoa selaimen zoomityökalulla, tämä muuttaa todellisuudessa koko sivun kokoa, ei pelkästään tekstiä.

Aseta fonttikoko em-yksiköllä

Jos haluat välttää tekstin muuttumattomuuden ongelmia Internet Explorer -selausselaimessa, monet kehittäjät käyttävät em-yksikköä korvaamaan pikseleitä.

W3C suosittelee käyttämään em-mittayksikköä.

1em on nykyinen kirjasinkoko. Jos elementin font-size on 16 pikseliä, 1em on 16 pikseliä kyseiselle elementille. Kirjasinkoon asettamisen yhteydessä em-arvo muuttuu suhteessa yläisen elementin kirjasinkoolle.

Selaimissa oletusarvoinen tekstikoko on 16 pikseliä. Siksi 1em:n oletusarvoinen koko on 16 pikseliä.

Voit käyttää seuraavaa kaavaa muuntaaksesi pikseleitä em-yksiköiksi:pikseleitä/16=em

(Huomautus: 16 on yläisen elementin oletusarvoinen kirjasinkoko, oletetaan, että yläisen elementin font-size on 20px, silloin kaavaa on muutettava:pikseleitä/20=em

Esimerkki

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Kokeile itse

Yllä olevassa esimerkissä em-yksiköillä mitattu tekstikoko on sama kuin edellisessä esimerkissä pikseleillä mitattu tekstikoko. Jos käytetään em-yksiköitä, voidaan säätää tekstikokoa kaikissa selaimissa.

Valitettavasti Internet Explorerissä on edelleen ongelmia. Tekstin uudelleenasettaessa se voi olla suurempi tai pienempi kuin normaalikoko.

Prosenttien ja em-yksiköiden yhdistäminen

Yleinen ratkaisu kaikissa selaimissa on asettaa body-elementille (yläinen elementti) oletusarvoinen font-size-arvo prosentteina:

Esimerkki

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Kokeile itse

Koodimme on erittäin tehokasta. Kaikissa selaimissa voidaan näyttää sama tekstikoko, ja kaikki selaimet voivat skaalata tekstikokoa.

CSS kirjasin esimerkki:

Aseta tekstin kirjasin
Tämä esimerkki näyttää, miten tekstin kirjasin asetetaan.
Aseta kirjasin koko
Tämä esimerkki näyttää, miten kirjasin kokoa asetetaan.
Aseta kirjasin tyyli
Tämä esimerkki näyttää, miten kirjasin tyyliä asetetaan.
Aseta kirjasin muoto
Tämä esimerkki näyttää, miten kirjasin muotoa asetetaan.
Aseta kirjasin ohennus
Tämä esimerkki näyttää, miten kirjasin ohennusta asetetaan.
Kaikki kirjasinominaisuudet yhdessä lausekkeessa
Tämä esimerkki näyttää, miten lyhennettyjä ominaisuuksia käytetään kirjasinominaisuuksien asettamiseen yhdessä lausekkeessa.

CSS kirjasin ominaisuudet

Ominaisuus Kuvaus
font Lyhennetty ominaisuus. Toiminnaltaan se asettaa kaikki kirjasinominaisuudet yhdessä lausekkeessa.
font-family Aseta kirjasinkirjasto.
font-size Aseta kirjasimen koko.
font-size-adjust Kun ensisijainen kirjasin ei ole saatavilla, älykkäästi skaalautaa korvaavaa kirjainta. (CSS2.1 poistettu ominaisuus.)
font-stretch Leikkaa kirjainta horisontaalisesti. (CSS2.1 poistettu ominaisuus.)
font-style Aseta kirjasinkappaleen tyyli.
font-variant Näytä teksti pienillä isolla kirjaimella tai normaalilla kirjaimella.
font-weight Aseta kirjasimen paksuus.