@font-face je pravilo CSS, ki omogoča prikaz pisav na spletnih straneh v internetu. Pred uvedbo tega pravila so lahko spletni upravitelji na svojih spletnih mestih uporabljali omejen nabor pisav, ki so najpogostejše in nameščene v računalnikih uporabnikov. S pojavom @font-face je mogoče na spletno stran preprosto pritrditi katero koli določeno pisavo.
Če ste pisavo prenesli na našem spletnem mestu, boste v arhivu s pisavami našli pripravljeno kodo CSS, ki jo je treba kopirati in vstaviti v dokument CSS, priložen projektu.
Namestitev po korakih
1. Izberite želeno pisavo in kliknite "prenesi za spletno stran".
2. V korenu spletnega mesta ustvarite mapo fonts (Pisave) in vanjo kopirajte prenesene pisave.
Odprite dokument CSS in vanj kopirajte vsebino besedilne datoteke iz arhiva.
4. Prepričajte se, da je pot do mape s pisavami zapisana pravilno. Glede na položaj mape, v kateri se nahajajo pisave, lahko pot vsebuje eno ali več pik.
5. Opravljeno. Kopirajte lastnost z družinskim imenom in jo prilepite v izbirnik, za katerega pišete sloge.
Kaj če sem pisavo že prenesel drugje in jo želim vključiti?
V tem primeru morate na internetu poiskati pretvornik pisav in pretvoriti svojo pisavo ttf (ali otf) v ustrezne formate, in sicer eot, svg, woff in woff2. S tem zagotovite, da se pisava pravilno prikaže in deluje v vseh brskalnikih in tudi na mobilnih napravah.
Pravilo @font-face morate nato zapisati sami in pri tem upoštevati njegovo sintakso.
Sintaksa za @font-face
Skladnjo pravila lahko v grobem razdelimo na osnovne lastnosti in razširjene lastnosti.
Osnovna:
- font-family - določi ime pisave.
- src - označuje pot pisave. To je lahko naslov URL pisave, ki se nahaja v strežniku vašega spletnega mesta, naslovi URL pisav, ki se nahajajo v strežniku nekoga drugega (na primer Google Fonts), ali preprosto ime pisave, ki se nahaja v uporabnikovem računalniku (Helvetica New Bold, Tahoma, Georgia itd.) .
Razširjeno:
- font-display - določa, kako bo pisava prikazana, odvisno od tega, ali je bila prenesena in pripravljena za uporabo.
- font-stretch - omogoča prilagajanje širine besedila.
- font-style - določa, ali je pisava navadna, poševna ali nagnjena (slednji dve nista enaki).
- font-weight - Nastavi nasičenost pisave na lestvici od 100 do 900 (100-majhna, 900-majhna).
- font-variant - določite, kako naj bodo predstavljene male črke - pustite jih nespremenjene ali pa naj bodo vse male (velike).
- font-feature-settings - vam omogoča upravljanje naprednih tipografskih funkcij v pisavah OpenType.
- font-variations-settings - omogoča nadzor na nizki ravni nad različicami pisav Open Type in TrueType z določitvijo štirimestnih imen osi.
- unicode-range - določa obseg kod Unicode (glifov), ki se uporabljajo v pisavi.
Povezovanje pisave z vašim spletnim mestom z Google Fonts
Uporaba pisav Google Fonts je najlažji način za povezavo pisave z vašim spletnim mestom. Pojdite na njihovo spletno mesto, poiščite želeno pisavo, izberite pravo pisavo za namestitev in kopirajte kodo.
Prekopirano kodo je treba namestiti v telo oznake head na strani html.
Slabost te metode je, da če ste med izdelavo spletnega mesta izgubili internet - pisave ne bodo prikazane in nadomeščene s standardnimi, saj se datoteke ne nahajajo v lokalnem računalniku, temveč na Googlovih strežnikih. Poleg tega obstaja možnost, da se bo težava ponovila, ko boste prišli k stranki na predstavitev postavitve (ali samo za uskladitev) in ta ne bo imela brezžičnega interneta.
