Len o zložitých alebo naučiť CSS3. Časť 4. 1. Písma v dokumente HTML. Vlastnosti rodiny fontov a @ fontov

Dobrý deň, milí čitatelia webu remontcompa.ru! Volám sa Roman Nahvat a predstavujem vám štvrtú časť série článkov o jazyku štýlu CSS. V tejto časti preskúmame rôzne vlastnosti CSS na formátovanie textu v dokumente HTML. Keďže formátovanie textu v CSS je pomerne rozsiahlou témou, štvrtá časť bude rozdelená do niekoľkých častí. Nikomu nie je žiadnym tajomstvom, že dizajn stránok do veľkej miery závisí od typu textovej zložky na ňom. CSS má veľa vlastností na formátovanie textu v HTML dokumente. Tieto vlastnosti umožňujú textu priraďovať písma, farbu, veľkosť, riadkovanie a ďalšie charakteristiky. Napríklad vlastnosti CSS font-face a @ font-face, na ktoré sa dnes pozrieme, sú navrhnuté tak, aby fungovali s fontmi na webovej stránke..

Len o zložitých alebo naučiť CSS3. Časť 4. 1. Písma v dokumente HTML. Vlastnosti rodiny fontov a @ fontov

Každé písmo je individuálne svojím spôsobom a líši sa od iného typu písma. Napriek tomu majú písma spoločné a spoločné vlastnosti. Toto alebo také písmo môže patriť k určitej rodine. Napríklad písmo Times New Roman patrí do rodiny serifov (fonty serifov) a písmo Arial patrí do rodiny sans-serifov (fonty sans-serif). K dispozícii je tiež rodina monospace (písma patriace do tejto rodiny majú znaky s rovnakou pevnou šírkou) a kurzívy napodobňujú písané rukou písané rukou. Nasledujúca tabuľka zobrazuje rodiny písiem a niektorých zástupcov týchto rodín

Vlastnosť rodiny fontov CSS sa používa na zadanie písma pre text, ktorý sa má použiť vo vnútri prvku v dokumente HTML. Písmo je možné zadať dvomi spôsobmi: Zápisom názvu písma ako hodnoty pre vlastnosť font-family (napríklad font-family: arial) Napísaním názvu rodiny fontov ako hodnoty vlastnosti font-family (napríklad rodina-font: serif) Pri určovaní písma pomocou vlastnosti rodiny fontov by ste mali vziať do úvahy skutočnosť, že samotný webový prehľadávač nemá žiadne zabudované písma. Na zobrazenie textu na webovej stránke sa používajú písma nainštalované v operačnom systéme v počítači používateľa. Vlastnosť rodiny fontov CSS vám umožňuje zadať nie jedno písmo, ale niekoľko typov písma ako hodnoty, pričom sa ich názvy oddeľujú čiarkami. Bežnou praxou je uvádzať meno rodiny na konci zoznamu písiem. Deje sa tak v prípade, že písma zadané ako hodnota pre vlastnosť rodiny fontov nie sú dostupné v operačnom systéme používateľa. Ak ako hodnotu pre vlastnosť rodiny fontov zadáte niekoľko písiem, webový prehliadač pri zistení prvého zadaného písma skontroluje, či je nainštalovaný v počítači používateľa. Ak toto písmo existuje, webový prehľadávač ho použije ako písmo pre prvok na webovej stránke. Ak nie je nastavené písmo ako hodnota pre vlastnosť rodina fontov, potom sa skontroluje druhé písmo atď. Ak sa nenájde žiadne špecifikované písmo, webový prehľadávač vyberie príslušné písmo z danej rodiny písiem. Vytvorte dokument HTML s nasledujúcou štruktúrou a uložte ho na jednotku Flash do priečinka CSS pod menom písma a príponou .html

V dokumente HTML font.html so značkami

a

vytvorte dva odseky s nejakým textom

Získame nasledujúci druh webovej stránky font.html

Tiež uložte súbor štýlov fonts.css do priečinka CSS na jednotke Flash

Priraďte identifikátory font1 a font2 k prvému a druhému odseku

Pomocou selektora identifikátorov v šablóne so štýlmi fonts.css priraďte fonty Georgia, Times New Roman, Times k textu v prvom odseku tak, že napíšete riadok # font1 font-family: Georgia, 'Times New Roman', Times, serif. Môžete venovať pozornosť tomu, že za názvami písiem je uvedený ich bežný názov (serif)

Dostávame nasledujúce

Pri prideľovaní písma prvku v dokumente HTML musíte vziať do úvahy aj formát samotného písma, pretože rôzne webové prehliadače podporujú rôzne formáty písma. Ak chcete zobraziť rovnaké písmo v rôznych webových prehľadávačoch, musíte ich poskytnúť v rôznych formátoch

Vstavané písma typu Open (s príponou .eot) sú podporované iba v programe Internet Explorer.

Písma TrueType (.ttf) a OpenType (.otf) sú podporované všetkými modernými webovými prehliadačmi. Pokiaľ ide o podporu písiem TrueType a OpenType v programe Internet Explorer, tento prehliadač nepodporuje písma TrueType a OpenType od verzie 6 do verzie 8, a preto verzie 9, 10 a 11 prehliadača Internet Explorer podporujú písma TrueType a OpenType iba čiastočne.

Písma Web Open Font (.woff) sú komprimovanou verziou fontov TrueType alebo OpenType a sú podporované všetkými modernými webovými prehliadačmi, ako aj programom Internet Explorer, počnúc verziou 9

Písma s príponou .woff2 sú najnovšou verziou formátu Web Open Font a sú podporované všetkými modernými webovými prehľadávačmi, žiadna verzia webového prehľadávača Internet Explorer však nepodporuje písma s touto príponou.

Škálovateľné písma Vector Graphic (.svg), ako aj písma TrueType, OpenType a Web Open Font sú podporované modernými webovými prehliadačmi, a to aj na mobilných zariadeniach.

Nastavíme nejaké písmo pre text druhého odseku na webovej stránke font.html a poskytneme ho webovému prehliadaču v rôznych formátoch. Webové stránky Google Fonts na adrese https://fonts.google.com obsahujú viac ako 800 písiem zdarma patriacich do rôznych rodín.

Začiarknutím príslušného políčka zobrazujeme patkové písma na webovej stránke Google Fonts.

Napríklad pre text druhého odseku webovej stránky font.html nastavte písmo s názvom IM Fell DW Pica SC. Kliknutím na znamienko plus vyberiete toto písmo.

Potom kliknite na tlačidlo sťahovania

Archív uložte pomocou súboru písma IM Fell DW Pica SC na jednotku Flash v priečinku CSS

Po rozbalení stiahnutého archívu sa v priečinku IM_Fell_DW_Pica_SC zobrazí súbor písma IMFePIsc28P.

Stiahnutý súbor písma má príponu .ttf, to znamená, že ide o písmo formátu TrueType. Ako sme videli vyššie, písma s príponou .ttf nepodporuje prehliadač Internet Explorer. Keďže chceme, aby sa toto písmo zobrazilo v ľubovoľnom webovom prehľadávači, musíme ho skonvertovať do iných formátov vrátane formátu Embedded Open Type, ktorý podporuje prehliadač Internet Explorer verzie 6-11.

Ak chcete previesť stiahnutý súbor písma IMFePIsc28P.ttf do iných formátov, prejdite na stránku https://www.fontsquirrel.com/tools/webfont-generator a kliknite na tlačidlo Nahrať písma.

Vyberte stiahnutý súbor písma IMFePIsc28P.ttf a kliknite na Otvoriť

Začiarknite políčko Áno, písma, ktoré odovzdávam, sú legálne vhodné na vkladanie z webu a prepínač tiež prepnite do polohy Expert

Zaškrtnite pred formáty, do ktorých chceme prevádzať súbor písma IMFePIsc28P.ttf

Kliknite na možnosť Stiahnuť súpravu

Uložte archív s fontom IM_Fell_DW_Pica_SC skonvertovaným do rôznych formátov na jednotku Flash v priečinku CSS.

Prejdeme do priečinka webfontkit-20190307-050537 a uvidíme súbory fontov IM_Fell_DW_Pica_SC s príponami .eot, .svg, .ttf, .woff, .woff2. Zaujíma nás tiež súbor so štýlmi s príponou .css, ktorý zobrazuje kód pre vlastnosť CSS @ font-face, ktorú použijeme na pripojenie písma IM_Fell_DW_Pica_SC v rôznych formátoch k webovej stránke font.html.

Vlastnosť CSS @ font-face vám umožňuje používať rôzne písma, aj keď nie sú nainštalované v počítači používateľa. Podrobnejšie zvážte kód css v súbore stylesheet.css. Vo vnútri vlastnosti @ font-face je ďalšia vlastnosť rodiny fontov CSS, ktorá pomenúva názov písma. Názov písma sa v budúcnosti použije na označenie písma v texte (v našom prípade pre text druhého odseku na stránke font.html). Vlastnosť src hovorí webovému prehľadávaču cestu k súborom písiem

Skopírujeme kód CSS zo súboru stylesheet.css a potom ho vložíme do súboru štýlov fonts.css, ktorý je pripojený na webovú stránku font.html. Dostávame nasledujúce

Pretože na stránke font.html sme priradili identifikátor k druhému odseku s názvom font2, preto v súbore štýlov fonts.css pomocou selektora identifikátorov priradíme text v druhom odseku k písmu s menom, ktoré je zadané ako hodnota pre vlastnosť font-family, konkrétne im_fell_dw_pica_scregular.

Do súboru štýlov fonts.css napíšte riadok # font2 font-family: 'im_fell_dw_pica_scregular'

Aby sa text druhého odseku zobrazil v písme s názvom im_fell_dw_pica_scregular, skopírujte súbory tohto písma v rôznych formátoch z priečinka webfontkit-20190307-050537 do priečinka CSS.

Dostávame nasledujúce

Ak otvoríte stránku font.html vo webovom prehliadači, môžete vidieť, že text druhého odseku sa zobrazil v písme IM Fell DW Pica SC.