Fontti-perhe-ominaisuuden syntaksi
Typografinen suunnittelu on kriittisesti tärkeä pala onnistuneesta verkkosivuston suunnittelusta. Luomalla sivustoja, joiden teksti on helppo lukea ja joka näyttää hyvältä, on jokaisen web-suunnittelun ammattilainen. Tämän saavuttamiseksi sinun on pystyttävä asettamaan tietyt fontit, joita haluat käyttää verkkosivuillasi. Web-asiakirjojen kirjasintyypin tai fonttiperheen määrittämiseen käytetään CSS-fonttiperheperhe style -ominaisuutta.
Yksinkertaisin kirjasinperhe style -tyyli, jota voisit käyttää, sisältää vain yhden kirjasimen:
p {font-family: Arial; }Jos käytät 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 sitä, että suurin osa (jos ei kaikki) tietokoneista asentaisi sen, voit levätä melko helposti tietäen, että sivu näkyy suunnitellussa fontissa .
Joten mitä tapahtuu, jos valitsemaasi fonttia ei löydy? Jos esimerkiksi et käytä sivulla olevaa "web-turvallista kirjasinta", mitä käyttäjäagentti tekee, jos heillä ei ole kyseistä kirjasinta? He tekevät korvaavan.
Tämä voi aiheuttaa joitakin erittäin hauskoja sivuja. Menin kerran sivulle, jossa tietokoneeni näytti sen kokonaan "Wingdings" (kuvakekokoelma), koska tietokoneellani ei ollut kehittäjän määrittämä kirjasinta, ja selaimeni teki erittäin huonon valinnan siitä, millainen fontti se olisi käytä vaihtoa. Sivu oli täysin lukukelvoton minulle! Tällöin kirjasinpino tulee pelaamaan.
Erota useita fonttiperheitä, joissa on pilkku Fonttipinoon
"Fonttipino" on luettelo fonteista, joita haluat käyttää sivusi. Voit asettaa fonttisi valintoja haluamallasi tavalla ja erottaa ne pilkulla. Jos selaimella ei ole luettelon ensimmäistä fonttiryhmää, se yrittää toista ja sitten kolmasosaa ja niin edelleen, kunnes se löytää järjestelmän, joka on järjestelmässä.
font-family: Pussycat, Algerian, Broadway;Edellä olevassa esimerkissä selain etsii ensin "Pussycat" -fontin, sitten "algerian" ja sitten "Broadway", jos yhtään muita fontteja ei löytynyt. Tämä antaa sinulle enemmän mahdollisuutta käyttää ainakin yhtä valitsemistasi fontteja. Se ei ole täydellinen, minkä vuoksi meillä on vielä lisää voimme lisätä fonttipinoamme (lue lisää!).
Käytä yleisiä kirjasimia viimeisenä
Joten voit luoda kirjasimen, jossa on fonttiluettelo ja jolla ei ole vielä mitään, jota selain löytää. Sinun ei tietenkään halua sivusi näkyvän lukemattomana, jos selain tekee huono korvaavan valinnan. Onneksi CSS: llä on ratkaisu myös tähän: yleiset fontit .
Sinun pitäisi aina lopettaa fonttilistan (vaikka se olisi yhden perheen tai vain web-turvallisten kirjasinten luettelo), jossa on yleinen fontti. Käytettävissä on viisi:
- kursiivi-
- fantasia
- monospace
- sans-serif
- serif
Kaksi edellä olevaa esimerkkiä voidaan muuttaa:
font-family: Arial, sans-serif; font-family: Pussycat, Algerian, Broadway, fantasia;Jotkut fonttiperheen nimet ovat kaksi tai useampia sanoja
Jos fonttiperhe, jota haluat käyttää, on enemmän kuin yksi sana, sinun on ympäröivä sitä kaksinkertaisella lainausmerkeillä. Vaikka jotkut selaimet voivat lukea fonttiperheitä ilman lainausmerkkejä, voi olla ongelmia, jos välilyönti tiivistyy tai jätetään huomiotta.
font-perhe: "Times New Roman", serif;Tässä esimerkissä näet, että fontin nimi "Times New Roman", joka on monisana, on lainausmerkeissä. Tämä kertoo selaimelle, että kaikki nämä kolme sanaa ovat osa fontin nimeä, toisin kuin kolme eri fonttia, joilla on vain yksi sananimi.
Alkuperäinen artikkeli Jennifer Krynin. Edited 12/2/16 by Jeremy Girard