Baš o kompliciranom ili naučite CSS3. Dio 4. 1. Fontovi u HTML dokumentu. Obitelj fontova i @ font-face svojstva

Pozdrav, dragi čitatelji web stranice remontcompa.ru! Moje ime je Roman Nahvat i predstavljam vam četvrti dio niza članaka o jeziku CSS stila. U ovom ćemo dijelu istražiti različita svojstva CSS-a za oblikovanje teksta u HTML dokumentu. Budući da je formatiranje teksta u CSS-u prilično opsežna tema, četvrti dio bit će podijeljen u nekoliko dijelova. Nikome nije tajna da dizajn web mjesta uvelike ovisi o vrsti tekstualne komponente na njoj. CSS ima mnoga svojstva za oblikovanje teksta u HTML dokumentu. Ova svojstva omogućuju vam da tekstu dodijelite fontove, boju, veličinu, razmak crta i ostale karakteristike. Na primjer, svojstva porodice CSS fontova i @ font-face svojstva koja ćemo danas pogledati osmišljeni su za rad sa fontovima na web stranici..

Baš o kompliciranom ili naučite CSS3. Dio 4. 1. Fontovi u HTML dokumentu. Obitelj fontova i @ font-face svojstva

Svaki font je individualan na svoj način i razlikuje se od drugog fonta u svom stilu. No usprkos tome, fontovi imaju zajedničke i zajedničke značajke. Ovaj ili onaj font može pripadati određenoj obitelji. Na primjer, font Times New Roman pripada porodici serif (serif fontovi), a font Arial pripada obitelji sans-serif (sans-serif fontovi). Tu je i jednoosnovna obitelj (fontovi koji pripadaju ovoj obitelji imaju znakove iste fiksne širine), a kurzivni fonti ručno pišu rukopis. Donja tablica prikazuje porodice fontova i neke predstavnike tih obitelji

Svojstvo porodice CSS fontova koristi se za određivanje fonta za tekst koji će se koristiti unutar elementa u HTML dokumentu. Font se može odrediti na dva načina: pisanjem imena fonta kao vrijednosti svojstva porodice fontova (na primjer, font porodice: arial) pisanjem imena porodice fontova kao vrijednosti svojstva porodice fontova (na primjer, obitelj fontova: serif) Pri određivanju fonta koristeći svojstvo porodice fontova, trebali biste uzeti u obzir činjenicu da sam web preglednik nema ugrađene fontove. Za prikaz teksta na web stranici koriste se fontovi instalirani u operativnom sustavu na računalu korisnika. Svojstvo porodice CSS fontova omogućuje vam da odredite ne jedan font, već nekoliko fontova kao vrijednost, odvajajući njihova imena zarezima. Uobičajena je praksa da se na kraju popisa fonta navede ime obitelji. To se događa u slučaju da fontovi navedeni kao vrijednost za svojstvo porodice fontova nisu dostupni u korisničkom operativnom sustavu. Ako navedete nekoliko fontova kao vrijednost za svojstvo porodice fontova, web preglednik nakon susreta s prvim navedenim fontom provjerava je li instaliran na korisnikovo računalo. Ako ovaj font postoji, web preglednik koristi ga kao font za element na web stranici. Ako font naveden prvo kao vrijednost za svojstvo porodice fontova nije postavljen, provjerava se drugi font itd. Ako nije pronađen nijedan od navedenih fontova, web preglednik odabire odgovarajući font iz navedene skupine fontova. Napravite HTML dokument sa sljedećom strukturom i spremite ga na flash pogon u CSS mapi pod fontom imena i proširenjem .html

U HTML dokumentu font.html s oznakama

i

stvoriti dva odlomka s nekim tekstom

Dobijamo sljedeću vrstu font.html web stranice

Također, u CSS mapu na flash pogonu spremite datoteku stilova fonts.css

Prvim i drugim stavkom dodijelite identifikatorima font1 i font2

Pomoću birača identifikatora u tablici stilova fonts.css dodijelite fontovima Georgia, Times New Roman, Times tekstu prvog odlomka pisanjem retka # font1 font-family: Georgia, 'Times New Roman', Times, serif. Možete obratiti pažnju da je nakon imena fontova naznačeno njihovo zajedničko ime (serif)

Dobivamo sljedeće

Kad dodijelite font elementu u HTML dokumentu, također morate uzeti u obzir format samog fonta jer različiti web preglednici podržavaju različite formate fonta. Da biste prikazali isti font u različitim web preglednicima, morate ih navesti u različitim formatima

Ugrađeni fontovi otvorenog tipa (s .eot nastavkom) podržani su samo u programu Internet Explorer.

TrueType (.ttf) i OpenType (.otf) fontovi podržavaju svi moderni web preglednici. Što se tiče podrške za TrueType i OpenType fontove od strane Internet Explorera, od verzije 6 do verzije 8 TrueType i OpenType fontovi ne podržavaju ovaj preglednik, a verzije 9, 10 i 11 Internet Explorera djelomično podržavaju samo TrueType i OpenType fontove.

Web Open Font (.woff) fontovi komprimirana je inačica fontova TrueType ili OpenType te ih podržavaju svi moderni web preglednici, kao i Internet Explorer, počevši od verzije 9

Fontovi s ekstenzijom .woff2 najnovija su inačica oblika Web Open Font i podržani su od strane svih modernih web preglednika, međutim, nijedna verzija web preglednika Internet Explorer ne podržava fontove s ovim proširenjem

Skalabirani font vektorske grafike (.svg), kao i TrueType, OpenType i Web Open Font podržani su modernim web preglednicima, uključujući i na mobilnim uređajima

Postavimo neki font za tekst drugog odlomka na web stranicu font.html, pružajući ga web pregledniku u različitim formatima. Web lokacija Google Fontovi na https://fonts.google.com ima više od 800 besplatnih fontova koji pripadaju različitim obiteljima.

Na web mjestu Google Fontovi prikazujemo serifne fontove potvrdnim okvirom.

Na primjer, za tekst drugog stavka web-stranice font.html postavite font pod nazivom IM Fell DW Pica SC. Kliknite na znak plus da biste odabrali ovaj font.

Zatim kliknite gumb za preuzimanje

Arhivu spremite pomoću datoteke fontova IM Fell DW Pica SC na flash disku u CSS mapi

Nakon raspakiranja preuzete arhive, u mapi IM_Fell_DW_Pica_SC vidimo datoteku fontova IMFePIsc28P

Preuzeta datoteka s fontom ima ekstenziju .ttf, odnosno riječ je o fontu formata TrueType. Kao što smo vidjeli gore, Internet Explorer ne podržava fontove s .ttf ekstenzijom. Budući da želimo da se ovaj font prikazuje u bilo kojem web pregledniku, moramo ga pretvoriti u druge formate, uključujući ugrađeni oblik otvorenog tipa koji podržava web preglednik Internet Explorer inačice 6-11

Da biste pretvorili preuzetu datoteku fontova IMFePIsc28P.ttf u druge formate, idite na https://www.fontsquirrel.com/tools/webfont-generator i kliknite gumb za prijenos fontova.

Odaberite preuzetu datoteku fonta IMFePIsc28P.ttf i kliknite Otvori

Označite Da, fontovi koje prenosim su legalno prihvatljivi za ugrađivanje na webu, a također postavljajte prekidač na Expert

Stavite kvačice ispred formata u koje želimo pretvoriti datoteku fontova IMFePIsc28P.ttf

Kliknite Preuzmi svoj komplet

Spremite arhivu s IM_Fell_DW_Pica_SC fontom konvertiranim u različite formate na flash disku u CSS mapi

Ulazimo u mapu webfontkit-20190307-050537 i vidimo datoteke datoteka IM_Fell_DW_Pica_SC sa ekstenzijama .eot, .svg, .ttf, .woff, .woff2 u njoj. Također nas zanima datoteka stila s ekstenzijom .css, koja prikazuje kôd za svojstvo CSS @ font-face, a koji ćemo koristiti za povezivanje fonta IM_Fell_DW_Pica_SC u različitim formatima na web stranicu font.html

CSS svojstvo @ font-face omogućuje vam korištenje različitih fontova, čak i ako nisu instalirani na korisnikovom računalu. Razmotrite css kôd u datoteci stylesheet.css detaljnije. Unutar svojstva @ font-face nalazi se još jedno svojstvo porodice CSS fontova koje daje fontu ime. Naziv fonta ubuduće će se koristiti za označavanje fonta teksta (u našem slučaju za tekst drugog stavka na stranici font.html). Svojstvo src govori web pregledniku put do datoteka sa fontom

Kopirajte CSS kôd iz datoteke stylesheet.css i zatim je zalijepite u datoteku stilova fonts.css koja je spojena na web-stranicu font.html. Dobivamo sljedeće

Budući da smo na stranici font.html drugom imenu dodijelili identifikator s imenom font2, stoga ćemo u datoteci stilova fonts.css pomoću odabirača identifikovati tekst u drugom odlomku fontu s imenom koje je određeno kao vrijednost za svojstvo porodice fontova, a to je im_fell_dw_pica_scregular.

U datoteku stilova fonts.css upišite redak # font2 font-family: 'im_fell_dw_pica_scregular'

Kako bi se tekst drugog stavka prikazao fontom naziva im_fell_dw_pica_scregular, kopirajte datoteke ovog fonta u različite formate iz mape webfontkit-20190307-050537 u mapu CSS

Dobivamo sljedeće

Ako otvorite stranicu font.html u web pregledniku, možete vidjeti da je tekst drugog stavka prikazan u fontu IM Fell DW Pica SC