Samo zapleteno ali se naučite CSS3. Del 4. 1. Pisave v dokumentu HTML. Lastnosti družine pisav in @ font-face lastnosti

Pozdravljeni, dragi bralci spletnega mesta remontcompa.ru! Moje ime je Roman Nahvat in predstavljam vam četrti del niza člankov o jeziku stila CSS. V tem delu bomo preučili različne lastnosti CSS za oblikovanje besedila v dokumentu HTML. Ker je oblikovanje besedila v CSS-ju dokaj obsežna tema, bo četrti del razdeljen na več delov. Za nikogar ni skrivnost, da je zasnova spletnega mesta v veliki meri odvisna od vrste besedilne komponente na njem. CSS ima veliko lastnosti formatiranja besedila v dokumentu HTML. Te lastnosti vam omogočajo, da besedilu dodelite pisave, barvo, velikost, razmik vrstic in druge značilnosti. Na primer, lastnosti družine pisav CSS in @ font-face lastnosti, ki si jih bomo ogledali danes, so zasnovani za delo s pisavami na spletni strani..

Samo zapleteno ali se naučite CSS3. Del 4. 1. Pisave v dokumentu HTML. Lastnosti družine pisav in @ font-face lastnosti

Vsaka pisava je individualna na svoj način in se razlikuje od druge pisave v svojem slogu. Toda kljub temu imajo pisave skupne in skupne lastnosti. Ta ali ona pisava lahko pripada določeni družini. Na primer, pisava Times New Roman pripada družini serif (pisave serif), pisava Arial pa družini sans-serif (pisave sans-serif). Obstaja tudi enoprostorska družina (pisave, ki pripadajo tej družini, imajo znake z isto fiksno širino), kurzivne pisave pa posnemajo rokopis. Spodnja tabela prikazuje družine pisav in nekatere predstavnike teh družin

Lastnost družine pisav CSS se uporablja za določanje pisave za besedilo, ki se uporablja znotraj elementa v dokumentu HTML. Pisava je lahko določena na dva načina: S pisanjem imena pisave kot vrednosti za lastnost družine pisav (na primer družina pisav: arial) S pisanjem imena družine pisav kot vrednosti lastnosti družine pisav (na primer družina pisav: serif) Ko določite pisavo z lastnostjo družine pisav, morate upoštevati dejstvo, da spletni brskalnik sam nima vgrajenih pisav. Za prikaz besedila na spletni strani se uporabljajo pisave, nameščene v operacijskem sistemu na uporabnikovem računalniku. Lastnost družine pisav CSS omogoča, da kot vrednost določite ne eno pisavo, temveč več pisav, pri čemer ločite njihova imena z vejicami. Običajna praksa je, da se na koncu seznama pisav navede ime družine. To se naredi, če pisave, določene kot vrednost za lastnost družine pisav, niso na voljo v uporabnikovem operacijskem sistemu. Če kot vrednost za lastnost družine pisav določite več pisav, spletni brskalnik, ko naleti na prvo določeno pisavo, preveri, ali je nameščena v uporabnikovem računalniku. Če ta pisava obstaja, jo spletni brskalnik uporabi kot pisavo za element na spletni strani. Če pisava, določena najprej kot vrednost za lastnost družine pisav, ni nastavljena, potem se preveri druga pisava itd. Če ne najdete nobene od določenih pisav, spletni brskalnik izbere ustrezno pisavo iz podane družine pisav. Ustvarite dokument HTML z naslednjo strukturo in ga shranite na bliskovni pogon v mapi CSS pod pisavo imena in pripono .html

V dokumentu HTML font.html z oznakami

in

ustvarite dva odstavka z nekaj besedila

Dobimo naslednje vrste font.html spletne strani

V mapo CSS na bliskovni pogon shranite datoteko stilov fonts.css

Prvemu in drugemu odstavku določite identifikatorje font1 in font2

Z izbirnikom identifikatorja v tabeli stilov fonts.css dodelite pisavi Georgia, Times New Roman, Times besedilu prvega odstavka tako, da napišete vrstico # font1 font-family: Georgia, 'Times New Roman', Times, serif. Lahko ste pozorni, da je po imenih pisav navedeno njihovo skupno ime (serif)

Dobimo naslednje

Ko dodelite pisavo elementu v dokumentu HTML, morate upoštevati tudi obliko same pisave, saj različni spletni brskalniki podpirajo različne oblike pisav. Če želite isto pisavo prikazati v različnih spletnih brskalnikih, jih morate navesti v različnih oblikah

Vdelane pisave odprtega tipa (s pripono .eot) so podprte samo v Internet Explorerju.

Pisave TrueType (.ttf) in OpenType (.otf) podpirajo vsi sodobni spletni brskalniki. Kar zadeva podporo pisavam TrueType in OpenType s strani Internet Explorerja, brskalnik ne podpira različic 6, različice 8, pisave TrueType in OpenType, različice 9, 10 in 11 Internet Explorerja pa delno podpirajo samo pisave TrueType in OpenType.

Pisave Web Open Font (.woff) so stisnjena različica pisav TrueType ali OpenType in jih podpirajo vsi sodobni spletni brskalniki in Internet Explorer, začenši z različico 9

Pisave z razširitvijo .woff2 so najnovejša različica oblike Web Open Font in jih podpirajo vsi sodobni spletni brskalniki, vendar nobena različica spletnega brskalnika Internet Explorer ne podpira pisav s to razširitvijo

Prilagodljive pisave Vector Graphic (.svg) ter TrueType, OpenType in Web Open Font podpirajo sodobne spletne brskalnike, tudi na mobilnih napravah

Nastavimo nekaj pisave za besedilo drugega odstavka na spletni strani font.html in ga posredujemo spletnemu brskalniku v različnih oblikah. Na spletnem mestu Google Fonts https://fonts.google.com je več kot 800 brezplačnih pisav, ki pripadajo različnim družinam.

Serijske pisave prikazujemo na spletnem mestu Google Fonts s potrditvijo ustreznega polja.

Na primer, za besedilo drugega odstavka spletne strani font.html nastavite pisavo z imenom IM Fell DW Pica SC. Kliknite na znak plus, da izberete to pisavo.

Nato kliknite gumb za prenos

Arhiv shranite z datoteko pisav IM Fell DW Pica SC na bliskovnem pogonu v mapi CSS

Po razpakiranju naloženega arhiva v mapi IM_Fell_DW_Pica_SC vidimo datoteko pisav IMFePIsc28P

Prenesena datoteka pisave ima razširitev .ttf, to je pisava formata TrueType. Kot smo videli zgoraj, Internet Explorer ne podpira pisav s pripono .ttf. Ker želimo, da se ta pisava prikaže v katerem koli spletnem brskalniku, jo moramo pretvoriti v druge formate, vključno z obliko vdelanega odprtega tipa, ki jo podpira spletni brskalnik Internet Explorer različice 6-11

Če želite pretvoriti preneseno datoteko pisave IMFePIsc28P.ttf v druge formate, pojdite na https://www.fontsquirrel.com/tools/webfont-generator in kliknite na gumb Naloži pisave.

Izberite preneseno datoteko pisav IMFePIsc28P.ttf in kliknite Odpri

Potrdite Da, pisave, ki jih nalagam, so zakonito primerne za vdelavo v splet in tudi stikalo nastavite na Expert

Pred formate postavimo kljukice, v katere želimo pretvoriti datoteko pisav IMFePIsc28P.ttf

Kliknite Prenesite svoj komplet

Arhiv shranite s pisavo IM_Fell_DW_Pica_SC, pretvorjeno v različne formate, na bliskovni pogon v mapi CSS

Gremo v mapo webfontkit-20190307-050537 in v njej vidimo datoteke s pisavami IM_Fell_DW_Pica_SC s priponami .eot, .svg, .ttf, .woff, .woff2. Zanima nas tudi datoteka s slogom s pripono .css, ki prikazuje kodo lastnosti CSS @ font-face, ki jo bomo uporabili za povezavo pisave IM_Fell_DW_Pica_SC v različnih oblikah s spletno stranjo font.html

Lastnost CSS @ font-face vam omogoča uporabo različnih pisav, tudi če niso nameščene v uporabnikovem računalniku. Razmislite o kodi css v datoteki stylesheet.css podrobneje. Znotraj lastnosti @ font-face je še ena lastnost družine pisav CSS, ki daje pisavi ime. Ime pisave bo v prihodnosti uporabljeno za označitev pisave besedilu (v našem primeru za besedilo drugega odstavka na strani font.html). Lastnost src spletnemu brskalniku pove pot do datotek s pisavami

Kopirajte kodo CSS iz datoteke stylesheet.css in jo nato prilepite v datoteko stilov fonts.css, ki je povezana na spletni strani font.html. Dobimo naslednje

Ker smo na strani font.html drugemu odstavku dodelili identifikator z imenom font2, bomo zato v datoteki stilov fonts.css s pomočjo izbirnika identifikator besedilu v drugem odstavku dodelili pisavo z imenom, ki je določeno kot vrednost za lastnost družine pisav, in sicer im_fell_dw_pica_scregular

V datoteko stilov fonts.css napišite vrstico # font2 font-family: 'im_fell_dw_pica_scregular'

Da bi se besedilo drugega odstavka prikazalo v pisavi z imenom im_fell_dw_pica_scregular, kopirajte datoteke te pisave v različnih oblikah iz mape webfontkit-20190307-050537 v mapo CSS

Dobimo naslednje

Če odprete stran font.html v spletnem brskalniku, lahko vidite, da je besedilo drugega odstavka prikazano v pisavi IM Fell DW Pica SC