Jen o složitých nebo se učit CSS3. Část 4. 1. Písma v dokumentu HTML. Vlastnosti rodiny fontů a @ fontů

Dobrý den, drazí čtenáři webu remontcompa.ru! Jmenuji se Roman Nahvat a představuji vám čtvrtou část série článků o jazyce CSS. V této části prozkoumáme různé vlastnosti CSS pro formátování textu v dokumentu HTML. Protože formátování textu v CSS je poměrně rozsáhlé téma, bude čtvrtá část rozdělena do několika dílčích částí. Nikomu není tajemstvím, že design webu do značné míry závisí na typu textové komponenty na něm. CSS má mnoho vlastností pro formátování textu v dokumentu HTML. Tyto vlastnosti umožňují textům přiřadit písma, barvu, velikost, řádkování a další vlastnosti. Například vlastnosti CSS font-face a @ font-face, na které se dnes podíváme, jsou navrženy pro práci s písmy na webové stránce..

Jen o složitých nebo se učit CSS3. Část 4. 1. Písma v dokumentu HTML. Vlastnosti rodiny fontů a @ fontů

Každé písmo je individuální svým způsobem a liší se od jiného písma svým stylem. Ale i přes to mají písma společné a společné vlastnosti. Toto nebo takové písmo může patřit do určité rodiny. Například písmo Times New Roman patří do rodiny serifů (patkové fonty) a písmo Arial patří do rodiny sans-serifů (fonty sans-serif). Existuje také rodina monospace (písma patřící do této rodiny mají znaky se stejnou pevnou šířkou) a psaná písma napodobují ručně psaný rukopis. Níže uvedená tabulka ukazuje rodiny fontů a některé zástupce těchto rodin

Vlastnost rodina fontů CSS se používá k určení písma pro text, který se má použít uvnitř prvku v dokumentu HTML. Písmo lze zadat dvěma způsoby: Zápisem názvu písma jako hodnoty pro vlastnost font-family (například font-family: arial) Napsáním názvu rodiny fontů jako hodnoty vlastnosti font-family (například font-family: serif) Při určování písma pomocí vlastnosti rodina fontů byste měli vzít v úvahu skutečnost, že samotný webový prohlížeč nemá žádná vestavěná písma. K zobrazení textu na webové stránce se používají písma nainstalovaná v operačním systému v počítači uživatele. Vlastnost rodina fontů CSS umožňuje určit ne jedno písmo, ale několik písem jako hodnotu oddělující jejich jména čárkami. Běžnou praxí je uvést na konci seznamu písem jméno rodiny. To se provádí v případě, že písma zadaná jako hodnota pro vlastnost rodina fontů nejsou v operačním systému uživatele k dispozici. Pokud jako hodnotu pro vlastnost rodina fontů určíte několik písem, zkontroluje webový prohlížeč po zjištění prvního zadaného písma, zda je nainstalován v počítači uživatele. Pokud toto písmo existuje, použije jej webový prohlížeč jako písmo pro prvek na webové stránce. Pokud není nastaveno písmo jako hodnota pro vlastnost rodina fontů, je zaškrtnuto druhé písmo atd. Pokud není nalezeno žádné ze zadaných písem, vybere webový prohlížeč příslušné písmo ze zadané rodiny písem. Vytvořte dokument HTML s následující strukturou a uložte jej na flash disk ve složce CSS pod názvem písma a příponou .html

V dokumentu HTML font.html se značkami

a

vytvořit dva odstavce s nějakým textem

Dostáváme následující druh webové stránky font.html

Uložte také soubor stylů fonts.css do složky CSS na jednotce Flash

Přiřaďte identifikátory font1 a font2 prvnímu a druhému odstavci

Pomocí selektoru identifikátorů v šabloně stylů fonts.css přiřaďte písmo Georgia, Times New Roman, Times k textu prvního odstavce tak, že napíšete řádek # font1 rodina písma: Gruzie, 'Times New Roman', Times, serif. Můžete věnovat pozornost tomu, že za názvy písem je uveden jejich běžný název (serif)

Dostáváme následující

Při přiřazování písma k prvku v dokumentu HTML musíte také zvážit formát samotného písma, protože různé webové prohlížeče podporují různé formáty písma. Chcete-li zobrazit stejné písmo v různých webových prohlížečích, musíte je poskytnout v různých formátech

Vložená písma typu Open (s příponou .eot) jsou podporována pouze v aplikaci Internet Explorer.

Písma TrueType (.ttf) a OpenType (.otf) jsou podporována všemi moderními webovými prohlížeči. Pokud jde o podporu písem TrueType a OpenType v aplikaci Internet Explorer, tento prohlížeč nepodporuje písma TrueType a OpenType od verze 6 do verze 8, a verze 9, 10 a 11 aplikace Internet Explorer podporují písma TrueType a OpenType pouze částečně

Písma Web Open Font (.woff) jsou komprimovanou verzí písem TrueType nebo OpenType a jsou podporována všemi moderními webovými prohlížeči, stejně jako Internet Explorer, počínaje verzí 9

Písma s příponou .woff2 jsou nejnovější verzí formátu Web Open Font a jsou podporována všemi moderními webovými prohlížeči, avšak žádná verze webového prohlížeče Internet Explorer nepodporuje písma s touto příponou.

Škálovatelná písma Vector Graphic (.svg) a TrueType, OpenType a Web Open Font jsou podporovány moderními webovými prohlížeči, a to i na mobilních zařízeních

Nastavíme nějaké písmo pro text druhého odstavce na webové stránce font.html a poskytneme jej webovému prohlížeči v různých formátech. Web Google Fonts na adrese https://fonts.google.com obsahuje více než 800 bezplatných písem patřících do různých rodin.

Na webu Google Fonts zobrazujeme patková písma zaškrtnutím příslušného políčka.

Například pro text druhého odstavce webové stránky font.html nastavte písmo s názvem IM Fell DW Pica SC. Klepnutím na znaménko plus vyberte toto písmo.

Poté klikněte na tlačítko stáhnout

Uložte archiv se souborem písma IM Fell DW Pica SC na jednotku Flash ve složce CSS

Po rozbalení staženého archivu uvidíme ve složce IM_Fell_DW_Pica_SC soubor písma IMFePIsc28P

Stažený soubor písma má příponu .ttf, to znamená, že jde o písmo formátu TrueType. Jak jsme viděli výše, písma s příponou .ttf nejsou aplikací Internet Explorer podporována. Protože chceme, aby se toto písmo zobrazovalo v libovolném webovém prohlížeči, musíme jej převést do jiných formátů, včetně formátu Embedded Open Type, který je podporován webovým prohlížečem Internet Explorer verze 6-11.

Chcete-li převést stažený soubor písma IMFePIsc28P.ttf do jiných formátů, přejděte na https://www.fontsquirrel.com/tools/webfont-generator a klikněte na tlačítko Nahrát písma

Vyberte stažený soubor písma IMFePIsc28P.ttf a klikněte na Otevřít

Zaškrtněte Ano, písma, která nahrávám, jsou legálně způsobilá pro vkládání z webu a také přepněte přepínač na Expert

Zaškrtněte před formáty, do kterých chceme převést soubor písma IMFePIsc28P.ttf

Klikněte na Stáhnout sadu

Uložte archiv s fontem IM_Fell_DW_Pica_SC převedeným do různých formátů na flash disk ve složce CSS

Jdeme do složky webfontkit-20190307-050537 a uvidíme soubory písem IM_Fell_DW_Pica_SC s příponami .eot, .svg, .ttf, .woff, .woff2. Zajímá nás také soubor stylů s příponou .css, který zobrazuje kód pro vlastnost CSS @ font-face, kterou použijeme k připojení písma IM_Fell_DW_Pica_SC v různých formátech k webové stránce font.html.

Vlastnost CSS @ font-face vám umožňuje používat různá písma, i když nejsou v počítači uživatele nainstalována. Podrobněji zvažte kód CSS v souboru stylesheet.css. Uvnitř @ font-face vlastnost je další vlastnost CSS font-family, která dává písmu jméno. Název písma bude později použit k označení písma k textu (v našem případě pro text druhého odstavce na stránce font.html). Vlastnost src sdělí webovému prohlížeči cestu k souborům písem

Zkopírujte kód CSS ze souboru stylesheet.css a poté jej vložte do souboru stylů fonts.css, který je připojen na webové stránce font.html. Dostáváme následující

Protože na stránce font.html jsme přiřadili identifikátor k druhému odstavci s názvem font2, proto v souboru stylů fonts.css, pomocí selektoru identifikátoru, přiřadíme text ve druhém odstavci k písmu s názvem, které je zadáno jako hodnota vlastnosti font-family, konkrétně im_fell_dw_pica_scregular

Do souboru stylů fonts.css napište řádek # font2 font-family: 'im_fell_dw_pica_scregular'

Aby byl text druhého odstavce zobrazen v písmu s názvem im_fell_dw_pica_scregular, zkopírujte soubory tohoto písma v různých formátech ze složky webfontkit-20190307-050537 do složky CSS

Dostáváme následující

Pokud otevřete stránku font.html ve webovém prohlížeči, můžete vidět, že text druhého odstavce byl zobrazen v písmu IM Fell DW Pica SC