Vaikka kuvat saavat paljon rakkautta, kun se tulee verkkosivustoille, se on kirjallinen sana, joka vetoaa hakukoneisiin ja tuo esiin useimpien sivustojen sisällön. Tällainen, typografinen suunnittelu on kriittisesti tärkeä osa verkkosivujen suunnittelua. Sivuston tekstin tärkeydestä tulee tarve varmistaa, että se näyttää hyvältä ja on helppo lukea. Tämä tehdään CSS (Cascading Style Sheets) -tyylillä.
Kun noudatat nykyaikaisen web-suunnittelustandardin, kun haluat sanella sivuston tekstisisältöä, teet sen CSS: n avulla. Tämä erottaa CSS-tyylin sivun HTML-rakenteesta. Esimerkiksi, jos haluat asettaa sivun fontin "Arial", voit tehdä sen lisäämällä seuraavaa tyyliä sääntö CSS: ään (huomaa - tämä todennäköisesti tehdään ulkoisessa CSS-tyyppisessä arkistossa, joka tukee tyylit jokaiselle sivuston sivulle):
body {font-family: Arial; }Tämä fontti on asetettu "keholle", joten CSS-kaskadi soveltaa tyyliä kaikkiin muihin sivun elementteihin. Tämä johtuu siitä, että jokainen muu HTML-elementti on "elin" -elementin lapsi, CSS-tyylit, kuten kirjasinperhe tai väri, kasaantuvat vanhemmalta lapselle. Näin tapahtuu, ellei tietyille elementeille lisätä tarkempaa tyyliä. Ainoa ongelma tässä CSS: ssä on, että vain yksi fontti on määritetty. Jos tätä kirjasinta ei löydy jostakin syystä, selain korvaa toisen sijainnin. Tämä on huono, koska sinulla ei ole valintaa siitä, mitä fonttia käytetään - selain valitsee sinulle, etkä pidä siitä, mitä päätti käyttää! Siellä tulee fonttipino.
Fonttipino on CSS-fontti-perheilmoituksen fonttien luettelo. Fontit on lueteltu haluamassasi järjestyksessä, jos haluat, että ne näkyvät sivustossa, jos ongelma ei ole fontin lataamatta. Fonttipino antaa suunnittelija hallita verkkosivun fonttien ulkoasua, vaikka tietokoneessa ei olisi vaadittua alkuperäistä kirjasinta.
Miten kirjasinpino näyttää? Tässä on esimerkki:
body {font-family: Georgia, "Times New Roman", serif; }Tässä on muutamia asioita.
Ensin näet, että erotimme eri fonttien nimet pilkulla. kunkin välillä Voit lisätä niin monta fonttia kuin haluat, kunhan ne on erotettu pilkulla. Selain yrittää ladata ensin määritetyn ensimmäisen fontin. Jos tämä epäonnistuu, se ajaa alas riviä yrittäen jokaisen fontin, kunnes se löytää sen, jota se voi käyttää. Tässä esimerkissä käytämme web-turvallisia kirjasimia, ja "Georgia" löytyy todennäköisesti sivuston vierailemalla henkilön tietokoneella (huomaa - selaimella on tietokoneessa sivun määrittämiä kirjasimia, joten sivusto todella kertoo tietokone, jonka fontit ladataan järjestelmästäsi). Jos jostain syystä kirjasinta ei löytynyt, se siirtyisi pinoon ja yritä seuraavaksi määritettyä fonttia.
Seuraavan fontin osalta huomaa, kuinka se on kirjoitettu pinoon. Nimi "Times New Roman" on koteloitu kaksoisilmoituksina. Tämä johtuu siitä, että kirjasinnimellä on useita sanoja. Kaikkien useampien sanojen (Trebuchet MS, Courier New jne.) Nimet, joiden nimi on useampi kuin yksi (Trebuchet MS, Courier New jne.), On oltava kaksoisina lainausmerkinnöissä, jotta selain tietää, että kaikki nämä sanat ovat osa fonttia.
Lopuksi päädytään fontin pinolla "serif", joka on yleinen fontin luokitus. Epätodennäköisessä tapauksessa, että mikään pinoon nimeämäsi fontit ei ole käytettävissä, selain löytää vain fontin, joka ainakin kuuluu oikeaan luokitteluun, jonka olet valinnut. Esimerkiksi jos käytät sans-serif-fontteja, kuten Arial ja Verdana, kuin "sans-serif" -luokituksen mukaisen fontin päättyminen, pitää vähintään kirjasimen siinä koko perheessä, jos kuormitusongelma on olemassa. On totta, että on hyvin harvinaista, että selaimella ei löydy mitään pinoon merkittyjä kirjasimia, ja sen on käytettävä tätä yleistä luokitusta, mutta se on paras käytäntö sisällyttää se vain vain kaksinkertaiseksi turvalliseksi.
Fonttipinoja ja Web-fontteja
Monet verkkosivustot käyttävät nykyään web-kirjasimia, jotka ovat joko mukana sivustossa ja muita resursseja (kuten sivuston kuvia, Javascript-tiedosto jne.) Tai linkitetty ulkopuoliseen kirjasintyyppiin, kuten Google Fonts tai Typekit. Vaikka nämä kirjasimet pitäisi ladata, koska linkit itse tiedostoihin, haluat silti käyttää fonttisarjaa varmistaaksesi, että sinulla on jonkin verran valvoa mahdollisia ongelmia. Sama koskee web-turvallisia fontteja, joiden pitäisi olla jonkun tietokoneessa (huomaa, että tässä artikkelissa esimerkkeinä käytetyt fontit, kuten Arial, Verdana, Georgia ja Times New Roman, ovat kaikki web-turvallisia fontteja, joiden pitäisi olla henkilön tietokoneessa). Vaikka fontin puuttuminen todennäköisyydestä on hyvin alhainen, fonttipinoiden määrittäminen auttaa sivuston typografisen suunnittelun luotettavuutta mahdollisimman paljon.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 8/9/17