CSS fontti
- Edellinen sivu CSS teksti varjo
- Seuraava sivu CSS fonttityyli
On tärkeää valita oikea kirjasin verkkosivustollesi!
Kirjasinvalinta on tärkeää
Oikean kirjasin valinta vaikuttaa merkittävästi verkkosivuston käyttäjäkokemukseen.
Oikea kirjasin voi luoda voimakkaan brändikuvan.
On tärkeää käyttää helposti luettavia kirjaimia. Kirjasin lisää arvoa tekstille. On myös tärkeää valita oikea kirjasinkäyttö ja tekstin koko.
Yleiset fontisuvut
CSS:ssa on viisi yleistä fontisarjaa:
- Serif-kirjasimet (Serif) - jokaisella kirjaimella on pieni sivupalkki reunallaan. Ne luovat muodollisuutta ja eleganssia.
- Sans-serif kirjasimet (Sans-serif) - ne ovat yksinkertaisia viivoja (ei pieniä sivupalkkeja). Ne luovat modernin ja yksinkertaisen ulkoasun.
- Leveydellä kirjasin (Monospace) - kaikilla kirjaimilla on sama vakioleveys. Ne luovat koneellisen ulkoasun.
- Kuroshiryo-fontit (Cursive) - ne imitoivat ihmisen käsinkirjoitusta.
- Fantasy-fontit (Fantasy) - ne ovat koristelu-/naurettavaa kirjasintyyliä.
Kaikki eri fontinimet kuuluvat viiteen yleiseen fontisarjaan.
Serif- ja Sans-serif fonttien välinen ero
Vinkki:Tietokoneen näytöllä, sans-serif fontit pidetään helpommin luettavina kuin serif fontit.
Joitakin fonttien esimerkkejä
| Yleiset fontisuvut | Fontinimi esimerkki |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
CSS font-family ominaisuus
CSS:ssa käytämme font-family ominaisuutta tekstin fontin määrittämiseen.
Font-family ominaisuus tulisi sisältää useita fontinimiä "vararesiirtymäjärjestelmänä" varmistaakseen suurimman yhteensopivuuden selaimen ja käyttöjärjestelmän välillä. Aloita tarvitsemasi fontista ja päättäydytään yleisiin sarjoihin (jos muuta fonttia ei ole saatavilla, selain valitsee yleisiin sarjoihin kuuluvan vastaavan fontin). Fontinimet tulisi erottaa pilkulla.
Huomautus：Jos fontin nimi koostuu useista sanoista, se täytyy olla lainausmerkeissä, esimerkiksi："Times New Roman"。
Esimerkki
Määritä kolmelle kappaleelle eri kirjasin:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
- Edellinen sivu CSS teksti varjo
- Seuraava sivu CSS fonttityyli
