@font-face yra CSS taisyklė, leidžianti rodyti šriftus interneto tinklalapiuose. Prieš atsirandant šiai taisyklei, tinklalapių valdytojai savo svetainėse galėjo naudoti ribotą šriftų rinkinį, kuris yra labiausiai paplitęs ir įdiegtas naudotojų kompiuteriuose. Atsiradus @font-face, prie svetainės galima lengvai pridėti bet kokį konkretų šriftą.
Jei šriftą atsisiuntėte iš mūsų svetainės, archyve su šriftais rasite paruoštą CSS kodą, kurį reikia nukopijuoti ir įdėti į prie projekto pridedamą CSS dokumentą.
Diegimas žingsnis po žingsnio
1. Pasirinkite norimą šriftą ir spustelėkite "Atsisiųsti į svetainę".
2. Savo svetainės šakninėje šaknyje sukurkite aplanką fonts (šriftai) ir nukopijuokite atsisiųstus šriftus.
Atidarykite CSS dokumentą ir nukopijuokite į jį tekstinio failo turinį iš archyvo.
4. Įsitikinkite, kad kelias į šrifto aplanką parašytas teisingai. Priklausomai nuo aplanko, kuriame yra šriftai, padėties, kelyje gali būti vienas ar daugiau taškų.
5. Atlikta. Nukopijuokite savybę su šeimos pavadinimu ir įklijuokite ją į selektorių, kuriam rašote stilius.
Ką daryti, jei šriftą jau parsisiunčiau kitur ir noriu jį prijungti?
Šiuo atveju internete reikia rasti šrifto konverterį ir konvertuoti savo ttf šriftą (arba otf) į tinkamus formatus, t. y. eot, svg, woff ir woff2. Taip užtikrinama, kad šriftas būtų rodomas ir veiktų teisingai visose naršyklėse, taip pat mobiliuosiuose įrenginiuose.
Tuomet turite patys parašyti @font-face taisyklę, laikydamiesi jos sintaksės.
Šrifto @font-face sintaksė
Taisyklės sintaksę galima apytiksliai suskirstyti į pagrindines ir išplėstines savybes.
Pagrindinis:
- font-family - nurodo šrifto pavadinimą.
- src - nurodo šrifto kelią. Tai gali būti jūsų svetainės serveryje esančio šrifto URL, kieno nors kito serveryje esančių šriftų URL (pvz., "Google Fonts") arba tiesiog naudotojo kompiuteryje esančio šrifto pavadinimas ("Helvetica New Bold", "Tahoma", "Georgia" ir kt.) .
Išplėstas:
- font-display - nustato, kaip šriftas bus rodomas, priklausomai nuo to, ar jis buvo atsisiųstas ir paruoštas naudoti.
- font-stretch - leidžia reguliuoti teksto plotį.
- font-style - nustato, ar šriftas yra paprastas, kursyvas, ar pasviręs (pastarieji du nėra vienodi).
- font-weight - Nustato šrifto sodrumą pagal skalę nuo 100 iki 900 (100-mažas, 900-mažas).
- font-variant - nustatykite, kaip turėtų būti pateiktos mažosios raidės - palikite jas nepakeistas arba padarykite visas mažąsias (didžiąsias).
- font-feature-settings - leidžia valdyti išplėstines "OpenType" šriftų tipografines funkcijas.
- font-variations-settings - galima žemo lygio valdyti "Open Type" ir "TrueType" šriftų variantus nurodant keturių raidžių ašių pavadinimus.
- unicode-range - nurodo šrifte naudojamų Unicode kodų (glifų) intervalą.
Šrifto prijungimas prie svetainės naudojant "Google Fonts
Naudojantis "Google Fonts" šriftus lengviausia prijungti prie svetainės. Eikite į jų svetainę, raskite norimą šriftą, pasirinkite, kokį šriftą norite įdiegti, ir nukopijuokite kodą.
Nukopijuotą kodą reikia patalpinti html puslapio žymės "head" pagrindinėje dalyje.
Šio būdo trūkumas yra tas, kad jei svetainės maketavimo metu dingo internetas - šriftai nebus rodomi ir pakeisti standartiniais, nes failai yra ne vietiniame kompiuteryje, o "Google" serveriuose. Be to, yra tikimybė, kad kai atvyksite pas klientą pristatyti maketo (arba tiesiog suderinti) ir jis neturės "Wi-Fi", problema pasikartos.
