Typografinen suunnittelu on kriittisen tärkeä osa onnistunutta verkkosivujen suunnittelua. Jokaisen verkkosivujen ammattilaisen tavoite on luoda sivustoja, joiden teksti on helposti luettavaa ja joka näyttää hyvältä. Tämän saavuttamiseksi sinun on pystyttävä määrittämään tietyt fontit, joita haluat käyttää verkkosivuillasi. Määritä kirjasinlaji tai kirjasinperhe Web-asiakirjoissasi käyttämällä kirjasinperhe-tyylistä ominaisuutta CSS.
Kaikkein mutkaton kirjasinperhetyyli, jota voit käyttää, sisältää vain yhden kirjasinperheen:
p {
font-family: Arial;
}
Jos sovellat tätä tyyliä sivulle, kaikki kappaleet näkyvät "Arial" -fonttiperheessä. Tämä on hienoa, ja koska "Arial" tunnetaan nimellä "web-safe font", mikä tarkoittaa eniten (ellei kaikkia) tietokoneissa olisi se asennettuna, voit levätä helposti tietäen, että sivusi näkyy aiotulla tavalla fontti.
Joten mitä tapahtuu, jos valitsemaasi kirjasinta ei löydy? Jos et esimerkiksi käytä sivulla "web-safe fontti", mitä käyttäjäagentti tekee, jos hänellä ei ole kyseistä kirjasinta? He korvaavat.
Tämä voi johtaa joihinkin huvittavan näköisillä sivuilla. Menin kerran sivulle, jossa tietokoneeni näytti sen kokonaan "Wingdings" -kuvakkeessa, koska tietokoneellani ei ollut kehittäjän määrittämä fontti, ja selaimesi valitsi kauhistuttavan valinnan fontilla, jota se käyttäisi korvaus. Sivu oli täysin lukukelvoton minulle! Tällöin fonttipino tulee esiin.
Erota useita kirjasinperheitä pilkulla fonttipinossa
"Fonttipino" on luettelo kirjasimista, joita haluat sivusi käyttävän. Laittaisit kirjasinvalintasi mieltymystesi mukaan ja erottaisit ne pilkulla. Jos selaimella ei ole luettelossa ensimmäistä kirjasinperhettä, se yrittää toista ja sitten kolmatta ja niin edelleen, kunnes se löytää järjestelmässä olevan.
fonttiperhe: Pussycat, Algerian, Broadway;
Yllä olevassa esimerkissä selain etsii ensin "Pussycat" -fontin, sitten "Algerian" ja sitten "Broadway", jos muita fontteja ei löydy. Tämä antaa sinulle suuremman mahdollisuuden käyttää ainakin yhtä valitsemistasi kirjasimista. Se ei ole täydellinen, minkä vuoksi meillä on vielä enemmän, mitä voimme lisätä fonttipinoomme (lue lisää!).
Käytä viimeisiä yleisiä fontteja
Joten voit luoda fonttien luettelon fonttien luettelosta, mutta selaimesi ei silti löydä mitään. Et halua, että sivusi näkyy lukukelvottomana, jos selain tekee huonon korvausvaihtoehdon. Onneksi CSS: llä on ratkaisu tähänkin, ja sitä kutsutaan yleiset fontit.
Sinun tulisi aina lopettaa kirjasinluettelosi (vaikka se olisikin yhden perheen luettelo tai vain verkkoturvallisia fontteja) yleisellä kirjasimella. Voit käyttää viittä:
- Kursiivinen
- Fantasia
- Monospace
- Sans-serif
- Serif
Kaksi yllä olevaa esimerkkiä voidaan muuttaa seuraaviksi:
fonttiperhe: Arial, sans-serif;
tai.
fonttiperhe: Pussycat, Algerian, Broadway, fantasia;
Jotkut kirjasinten sukunimet ovat vähintään kaksi sanaa
Jos haluamasi kirjasinperhe on useampi kuin yksi sana, ympäröi se lainausmerkeillä. Vaikka jotkut selaimet voivat lukea kirjasinperheitä ilman lainausmerkkejä, voi esiintyä ongelmia, jos välilyönti tiivistetään tai sitä ei huomioida.
font-family: "Times New Roman", serif;
Tässä esimerkissä näet, että fontin nimi "Times New Roman", joka on monisanainen, on kirjoitettu lainausmerkkeihin. Tämä kertoo selaimelle, että kaikki nämä kolme sanaa ovat osa kyseistä fontin nimeä, toisin kuin kolme erilaista kirjasinta, joilla kaikilla on yksi sanan nimi.