font-familyOminaisuus määrittää fontin, jota käytetään valittu elementti. Valittu fontti ei ole yksi kirjasinpinta, vaan "perhe", ja siksi se voi riippua muista typografisten ominaisuuksien arvoista valitaksesi oikeat kasvot perheen sisällä.
body ( font-family: Arial, Helvetica, sans-serif; )Arvo voi olla jokin seuraavista:
- Kirjasinperhe, joka vastaa sivulle upotettua tai käyttäjän järjestelmässä olevaa kirjasinta.
- Sarja sukunimiä pilkuilla erotettuna, joka voi sisältää yleisen sukunimen
Jos käytetään useita sukunimiä, selain valitsee ensimmäisen, jonka se löytää joko upotettuna sivulle @font-facetai asennettu käyttäjän käyttöjärjestelmään.
Sillä font-familyei ole erityistä oletus- tai alkuarvoa; alkuarvo riippuu aina selaimesta ja / tai käyttöjärjestelmästä.
Yleiset sukunimet
Jos yhdelle ilmoitukselle käytetään useita arvoja, on suositeltavaa, että geneerinen perhe luetellaan viimeisenä varalla parhaan typografisen kokemuksen varmistamiseksi:
code ( font-family: Courier, Monaco, monospace; )Yllä olevassa esimerkissä ”Courier” ja “Monaco” ovat todellisten kirjasinten todellisia sukunimiä, kun taas “monospace” on vain yleinen viittaus kaikkiin käyttäjän järjestelmään asennettuihin kirjasimiin, jotka ovat yksipuolisia.
Jos kahta ensimmäistä ei löydy asennettuna, selain valitsee parhaan vaihtoehdon, mutta vain yksinäisistä kirjasimista. Ilman yleistä perhettä fontti oletusasetuksena on mikä tahansa käyttäjän järjestelmän oletusfontti (todennäköisesti serif tai sans-serif), mikä ei olisi toivottavaa.
Generic perhe nimiä ovat serif, sans-serif, cursive, fantasy, ja monospace.
Jos sukunimi vastaa yleistä sukunimeä, sukunimi tulisi lainata osoittamaan, että se ei ole yleinen.
Monisanaiset sukunimet
Jos sukunimi sisältää useita sanoja välilyönneillä erotettuna, on suositeltavaa lisätä sukunimi lainausmerkkeihin (yksi tai kaksinkertainen):
code ( font-family: "Times New Roman", Georgia, serif; )Tämä ei ole aina välttämätöntä, mutta yleensä on turvallisempaa sisällyttää lainauksia jokaiselle sukunimelle, jossa on välilyöntejä tai erikoismerkkejä.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | Toimii | Toimii | Toimii | Toimii | Toimii | Toimii |