@font-face ir CSS noteikums, kas ļauj šriftus attēlot tīmekļa lapās internetā. Pirms šī noteikuma ieviešanas tīmekļa vietņu administratori savās vietnēs varēja izmantot ierobežotu fontu kopumu, kas ir visizplatītākie un ir instalēti lietotāju datoros. Līdz ar @font-face parādīšanos vietnei var viegli pievienot jebkuru konkrētu fontu.
Ja fontu lejupielādējāt mūsu vietnē, arhīvā ar fontiem atradīsiet gatavu CSS kodu, kas jākopē un jāievieto projektam pievienotajā CSS dokumentā.
Uzstādīšana soli pa solim
1. Izvēlieties vēlamo fontu un noklikšķiniet uz "lejupielādēt tīmekļa vietnei".
2. Vietnes saknē izveidojiet mapi fonts un nokopējiet lejupielādētos fontus.
Atveriet savu CSS dokumentu un nokopējiet tajā teksta faila saturu no arhīva.
4. Pārliecinieties, ka ceļš līdz fontu mapei ir rakstīts pareizi. Atkarībā no tā, kādā vietā atrodas mape, kurā atrodas fonti, ceļš var saturēt vienu vai vairākus punktus.
5. Paveikts. Kopējiet īpašību ar ģimenes nosaukumu un ielīmējiet to selektorā, kuram rakstāt stilus.
Ko darīt, ja es jau esmu lejupielādējis fontu citur un vēlos to pievienot?
Šādā gadījumā jums ir jāatrod fontu pārveidotājs internetā un jāpārveido jūsu ttf fonts (vai otf) pareizajos formātos, proti, eot, svg, woff un woff2. Tas ir nepieciešams, lai nodrošinātu, ka fonts tiek pareizi attēlots un darbojas visās pārlūkprogrammās, kā arī mobilajās ierīcēs.
Pēc tam jums pašiem jāraksta @font-face noteikums, ievērojot tā sintaksi.
Sintakse @font-face
Noteikuma sintaksi var aptuveni iedalīt pamatīpašībās un paplašinātajās īpašībās.
Pamata:
- font-family - norāda fonta nosaukumu.
- src - norāda fonta ceļu. Tas var būt fonta URL, kas atrodas jūsu vietnes serverī, fontu URL, kas atrodas kāda cita serverī (piemēram, Google Fonts), vai vienkārši lietotāja datorā esošā fonta nosaukums (Helvetica New Bold, Tahoma, Georgia utt.) .
Izvērsts:
- font-display - nosaka, kā fonts tiks parādīts atkarībā no tā, vai tas ir lejupielādēts un gatavs lietošanai.
- font-stretch - ļauj pielāgot teksta platumu.
- font-style - nosaka, vai fonts ir vienkāršs, slīps vai slīps (pēdējie divi nav vienādi).
- font-weight - Iestatiet fonta piesātinājumu skalā no 100 līdz 900 (100-small, 900-small).
- font-variant - nosakiet, kā jāattēlo mazie burti - atstājiet tos nemodificētus vai arī visus mazos (lielos) burtus.
- font-feature-settings - ļauj pārvaldīt uzlabotas tipogrāfijas funkcijas OpenType fontos.
- font-variations-settings - ļauj veikt zema līmeņa kontroli pār Open Type un TrueType fontu variācijām, norādot četru burtu asu nosaukumus.
- unicode-range - norāda Unicode kodu (glifu) diapazonu, kas jāizmanto fonta rakstībā.
Šrifta pievienošana jūsu vietnei, izmantojot Google Fonts
Izmantojot Google Fonts, ir visvienkāršākais veids, kā pievienot fontu savai vietnei. Dodieties uz to vietni, atrodiet vajadzīgo fontu, izvēlieties pareizo fontu, ko instalēt, un kopējiet kodu.
Nokopētais kods jāieliek html lapas galvenes tagā body.
Šīs metodes trūkums ir tas, ka, ja vietnes izgatavošanas laikā ir pazudis internets, - fonti netiks parādīti un aizstāti ar standarta fontu, jo faili neatrodas lokālajā datorā, bet gan Google serveros. Turklāt pastāv iespēja, ka, ierodoties pie klienta uz maketa prezentāciju (vai vienkārši uz saskaņošanu) un viņam nebūs Wi-Fi, problēma atkārtosies.
