Yleiset fonttiluokat, joita voi käyttää verkkosivustollasi
Sivuston suunnittelussa yksi tekstin keskeisistä osista on tekstisisältö. Näin ollen, kun rakennat verkkosivun ja tyylit sen CSS: llä, suuri osa tästä työstä keskittyy sivuston typografiaan.
Typografialla on tärkeä rooli sivuston suunnittelussa. Hyvin säädetty ja muotoiltu tekstisisältö auttaa sivustoa menestymään luomalla lukukokemusta, joka on sekä nautittavaa että helposti kuluttavaa. Osa pyrkimyksistäsi tyyppiseen työskentelyyn on valita oikeat fontit suunnittelulle ja sitten käyttää CSS: ää lisäämällä kyseiset fontit ja fonttityylit sivun näyttöön. Tämä tehdään käyttämällä mitä kutsutaan " font-stackiksi "
Font-pinot
Kun määrität verkkosivulla käytettävän kirjasimen , on paras käytäntö myös sisällyttää varatoimitusvaihtoehtoja, jos fonttisi valintaa ei löydy. Nämä varatoimitusvaihtoehdot ovat "fonttipino". Jos selain ei löydä pinoon merkittyä ensimmäistä fonttia, se siirtyy seuraavaan. Se jatkaa tätä prosessia, kunnes löytää fontin, jota se voi käyttää, tai se loppuu valinnoista (jolloin se vain valitsee haluamansa järjestelmäfontin). Tässä on esimerkki siitä, miten kirjasinpino näyttäisi CSS: ään, kun sitä sovellettiin "elin" -elementtiin:
body {font-family: Georgia, "Times New Roman", serif; }Huomaa, että määritämme fontin Georgia ensin. Oletusarvoisesti tämä on se, mitä sivu käyttää, mutta jos kyseinen kirjasinta ei ole jostain syystä saatavana, sivu jää varalle Times New Romanille. Liitämme kyseisen fontin nimen kaksinkertaiseen lainausmerkkeihin, koska se on monen sanan nimi. Yhden sanan kirjasinkoodit, kuten Georgia tai Arial, eivät vaadi lainauksia, mutta usean sanan fontin nimi tarvitsee niitä, jotta selain tietää, että kaikki nämä sanat muodostavat fontin nimen.
Jos katsot kirjaimen loppupäätä, huomaat, että lopetamme sanan "serif". Tämä on geneerinen kirjasinperhe. Jos epätodennäköisessä tapauksessa henkilöllä ei ole Georgiaa tai Times New Romania tietokoneellaan, sivusto käyttää mitä tahansa serifin fonttia, jota se voisi löytää. Tämä on suositeltavaa, jotta sivuston voi jättää käyttämättä haluamansa fontit, koska voit ainakin kertoa minkälaisen fontin käyttäminen niin, että sivuston ulkoasu ja sävy ovat mahdollisimman ehjät. Kyllä, selaimesi valitsee fontin sinulle, mutta ainakin ohjaat sitä, jotta se tietää minkä tyyppinen fontti toimisi parhaiten suunnittelussa.
Yleiset fonttiperheet
CSS: n yleinen fontin nimi on:
- kursiivi-
- fantasia
- monospace
- serif
- sans-serif
Vaikka web-suunnittelussa ja typografiassa on monia muita fontin luokituksia, kuten laatta-serif, blackletter, display, grunge ja paljon muuta, nämä 5 edellä lueteltua yleistä fontin nimeä ovat ne, joita käytit CSS-fonttipinoissa. Mitä eroja näissä kirjasintyypeissä on? Katsotaanpa!
Kursiivilla fonteilla on usein ohuita, koristeellisia kirjaimia, joiden tarkoitus on kopioida hieno käsinkirjoitettu teksti. Nämä kirjasimet, koska ne ovat ohuita, kukkaisia kirjaimia, eivät ole sopivia suureen sisältökohtaan, kuten kappaleeseen. Kurssikirjasimia käytetään yleensä otsikoihin ja lyhyempiin tekstintarpeisiin, jotka voidaan näyttää suuremmissa kirjasinkokoissa.
Fantasia- fontit ovat hieman hulluja fontteja, jotka eivät todellisuudessa kuulu mihinkään muuhun luokkaan. Fontit, jotka jäljittelevät hyvin tunnettuja logoja, kuten Harry Potterin tai Back to the Future -elokuvien kirjainformaatit, kuuluvat tähän luokkaan. Jälleen kerran nämä kirjasimet eivät ole sopivia kehon sisältöä varten, koska ne ovat usein niin tyyliteltyjä, että näiden kirjasinten kirjoittamien tekstien pitempiaikoja on vaikea tehdä.
Monospace- fontit ovat sellaisia, joissa kaikki kirjaimen muodot ovat yhtä suuret ja eristyneet, kuten olisit löytänyt vanha kirjoituskone. Toisin kuin muut kirjasimet, joiden kirjain vaihtelee niiden koon mukaan (esimerkiksi pääoma "W" vie paljon enemmän tilaa kuin pienikokoinen "i"), monospace-fontit ovat kiinteän leveyden kaikille merkille. Näitä kirjasimia käytetään usein, kun koodia näytetään sivulla, koska ne näyttävät selkeästi erilaisilta kuin muut sivullisen tekstin.
Serif- kirjasimet ovat yksi suosituimmista luokituksista. Nämä ovat fontteja, joilla on pienet ylimääräiset ligatiteetit kirjaimissa. Näitä ylimääräisiä kappaleita kutsutaan "serifiksi". Yleiset serif-fontit ovat Georgia ja Times New Roman. Serif-fontteja voidaan käyttää isojen tekstien, kuten otsikon, sekä tekstin ja runko-osan pitkien jaksoiden kanssa.
Sans-serif on viimeinen luokittelu, jota tarkastelemme. Nämä ovat fontteja, joilla ei ole edellä mainittuja ligatointeja. Nimi tarkoittaa "ilman serifs". Tämän luokan suosittuja fontteja ovat Arial tai Helvetica. Samaan tapaan kuin serifit, sans-serif-fontteja voidaan käyttää yhtä hyvin otsikoissa ja kehon sisällössä.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 16/16/17