@font-face on CSS-reegel, mis võimaldab kirjastiili kuvamist veebilehtedel internetis. Enne selle reegli olemasolu võisid veebimeistrid kasutada oma veebilehtedel piiratud hulka fonte, mis on kõige levinumad ja kasutajate arvutitesse paigaldatud. @font-face'i tulekuga saab veebisaidile hõlpsasti lisada mis tahes kindla kirjastiili.
Kui olete fondi meie saidilt alla laadinud, leiate arhiivist koos fontidega valmis CSS-koodi, mis tuleb kopeerida ja paigutada projektile lisatud CSS-dokumenti.
Samm-sammult paigaldamine
1. Valige soovitud font ja klõpsake "download for website".
2. Looge oma saidi juurest kaust fonte ja kopeerige alla laetud fondid.
Avage oma CSS-dokument ja kopeerige arhiivi tekstifaili sisu sinna.
4. Veenduge, et fondi kausta tee on õigesti kirjutatud. Sõltuvalt kausta asukohast, kus kirjastiilid asuvad, võib tee sisaldada ühte või mitut punkti.
5. Tehtud. Kopeeri perekonnanimega omadus ja kleebi see selektorisse, mille jaoks sa stiilid kirjutad.
Mis siis, kui ma olen fondi juba mujalt alla laadinud ja tahan seda ühendada?
Sellisel juhul peate leidma internetist fontikonverteri ja konverteerima oma ttf-fondid (või otf) õigetesse formaatidesse, nimelt eot, svg, woff ja woff2. Sellega tagatakse, et font kuvatakse ja töötab õigesti kõigis brauserites, samuti mobiilseadmetes.
Seejärel peate @font-face reegli ise välja kirjutama, järgides selle süntaksit.
@font-face süntaks
Reegli süntaksit võib jagada laias laastus põhiomadusteks ja täiustatud omadusteks.
Basic:
- font-family - täpsustab fondi nime.
- src - tähistab kirjastiili teed. See võib olla teie veebisaidi serveris asuva kirjastiili URL, kellegi teise serveris asuvate kirjastiilide URL (näiteks Google Fonts) või lihtsalt kasutaja arvutis asuva kirjastiili nimi (Helvetica New Bold, Tahoma, Georgia jne.) .
Laiendatud:
- font-display - määrab, kuidas font ilmub, sõltuvalt sellest, kas see on alla laaditud ja valmis kasutamiseks.
- font-stretch - võimaldab teil reguleerida teksti laiust.
- font-style - määrab, kas font on tavaline, kursiivne või kaldkirjas (viimased kaks ei ole samad).
- font-weight - Seadistab kirjastiili küllastust, skaalal 100 kuni 900 (100-madal, 900-madal).
- font-variant - määrab, kuidas väiketähed esitatakse - jätke need muutmata või tehke need kõik väiketähed (suurtähed).
- font-feature-settings - võimaldab teil hallata OpenType-fontide täiustatud tüpograafilisi funktsioone.
- font-variations-settings - võimaldab madalal tasemel kontrollida Open Type ja TrueType'i kirjatüüpide variante, määrates neljatähelised telgede nimed.
- unicode-range - määrab kindlaks kirjastiilis kasutatavate Unicode-koodide (glüüfide) vahemiku.
Kirjastiili ühendamine oma veebisaidiga Google Fonts'i abil
Google Fonts'i kasutamine on lihtsaim viis fondi ühendamiseks teie veebisaidiga. Mine nende veebisaidile, leia soovitud font, vali õige fontide paigaldamiseks ja kopeeri kood.
Kopeeritud kood tuleb paigutada oma html-lehekülje päise sildi sisse.
Selle meetodi puuduseks on see, et kui saitide koostamise ajal on teil kadunud internet - fonte ei kuvata ja asendatakse standardsetega, sest failid ei asu kohalikus arvutis, vaid Google'i serverites. Samuti on tõenäoline, et kui te tulete kliendi juurde kujunduse esitlusele (või lihtsalt teavitamiseks) ja tal ei ole Wi-Fi, tekib probleem uuesti.
