@font-face on CSS-sääntö, jonka avulla fontit voidaan näyttää Internetissä olevilla verkkosivuilla. Ennen tätä sääntöä webmasterit saattoivat käyttää sivustoillaan rajattua joukkoa fontteja, jotka ovat yleisimpiä ja jotka on asennettu käyttäjien tietokoneisiin. @font-face-säännön myötä mikä tahansa tietty fontti voidaan helposti liittää verkkosivustoon.
Jos olet ladannut fontin sivustoltamme, löydät fonttien kanssa olevasta arkistosta valmiin CSS-koodin, joka tulee kopioida ja laittaa projektiin liitettyyn CSS-dokumenttiin.
Asentaminen vaihe vaiheelta
1. Valitse haluamasi fontti ja napsauta "download for website".
2. Luo sivustosi juureen kansio fonts ja kopioi ladatut fontit.
Avaa CSS-dokumenttisi ja kopioi arkiston tekstitiedoston sisältö siihen.
4. Varmista, että fontti-kansion polku on kirjoitettu oikein. Sen mukaan, missä kansiossa fontit sijaitsevat, polku voi sisältää yhden tai useamman pisteen.
5. Valmis. Kopioi ominaisuus, jossa on perheen nimi, ja liitä se valitsijaan, jolle kirjoitat tyylejä.
Entä jos olen jo ladannut fontin muualta ja haluan liittää sen?
Tässä tapauksessa sinun on löydettävä internetistä fontinmuunnin ja muunnettava ttf-fontti (tai otf) oikeisiin tiedostomuotoihin eli eot-, svg-, woff- ja woff2-muotoihin. Näin varmistetaan, että fontti näkyy ja toimii oikein kaikissa selaimissa sekä mobiililaitteissa.
Tämän jälkeen sinun on kirjoitettava @font-face-sääntö itse ja noudatettava sen syntaksia.
@font-face-syntaksi
Säännön syntaksi voidaan jakaa karkeasti perusominaisuuksiin ja kehittyneisiin ominaisuuksiin.
Basic:
- font-family - määrittää fontin nimen.
- src - osoittaa fontin polun. Tämä voi olla verkkosivustosi palvelimella sijaitsevan fontin URL-osoite, jonkun toisen palvelimella sijaitsevien fonttien URL-osoitteet (kuten Google Fonts) tai yksinkertaisesti käyttäjän tietokoneella sijaitsevan fontin nimi (Helvetica New Bold, Tahoma, Georgia jne.) .
Laajennettu:
- font-display - määrittää, miten fontti näkyy, riippuen siitä, onko se ladattu ja valmis käytettäväksi.
- font-stretch - avulla voit säätää tekstin leveyttä.
- font-style - määrittää, onko fontti tavallinen, kursivoitu vai vinoviivainen (kaksi jälkimmäistä eivät ole sama asia).
- font-weight - Asettaa fontin kylläisyyden asteikolla 100-900 (100-pieni, 900-pieni).
- font-variant - määritä, miten pienet kirjaimet esitetään - jätä ne muuttamatta tai tee niistä kaikki pieniä kirjaimia (isoja).
- font-feature-settings - avulla voit hallita OpenType-fonttien kehittyneitä typografisia ominaisuuksia.
- font-variations-settings - mahdollistaa Open Type- ja TrueType-fonttien muunnelmien matalan tason hallinnan määrittämällä nelikirjaimisia akselinimiä.
- unicode-range - määrittää fontissa käytettävien Unicode-koodien (glyfien) valikoiman.
Fontin liittäminen sivustoosi Google Fontsin avulla
Google Fontsin käyttäminen on helpoin tapa liittää fontti verkkosivustoosi. Siirry heidän verkkosivustolleen, etsi haluamasi fontti, valitse oikea fontti asennettavaksi ja kopioi koodi.
Kopioitu koodi tulee sijoittaa head-tagin runkoon html-sivullasi.
Tämän menetelmän haittapuolena on, että jos sivuston tekemisen aikana olet menettänyt internetin - fontteja ei näytetä ja korvataan vakiofonteilla, koska tiedostot eivät sijaitse paikallisella tietokoneella, vaan Googlen palvelimilla. On myös mahdollista, että kun tulet asiakkaan luo ulkoasun esittelyä varten (tai vain vahvistusta varten) ja hänellä ei ole Wi-Fi-yhteyttä, ongelma toistuu.
