Jak vytvořit krásné písmo v html: velikosti, barvy, značky html písma. Nastavení písma v html správným způsobem. Začněme jazykem html a jeho „kreativními schopnostmi“

Připojení nového písma k webu není nejlepší jednoduchý úkol. Kde si vybrat, stáhnout a jak přidat písmo na web v CSS? V tomto článku si ukážeme jeden z nejpohodlnější způsoby instalace a připojení písma k webu.

Jak vložit písmo na web do CSS

Máme například písmo Raleway.ttf a chceme jej použít ve všech záhlavích ( h1) našeho webu. Chcete-li to provést, proveďte následující kroky:

h1 ( rodina písem: "Raleway Regular"; }

Nyní jsou všechny nadpisy 1. úrovně na webu zobrazeny v písmu, které potřebujeme.

Pokud chcete propojit několik písem (nebo jejich stylů), jednoduše je přidejte pod předchozí:

@font-face { rodina písem: "Raleway Regular"; src: url("../fonts/RalewayRegular.ttf" ) formát( "pravdivý typ"); styl písma: normální; váha písma: normální; } @font-face{ rodina písem: "RalewayBold"; src: url("../fonts/RalewayBold.ttf" ) formát( "pravdivý typ"); styl písma: normální; váha písma: normální; }

Možná jste si všimli, že existují různé formáty písma - .ttf, .woff, .eot, .svg atd. Existuje i formát pro moderní prohlížeče. woff2, ale o tom si povíme v některém z následujících článků. Obvykle je každé písmo zahrnuto ve 3 formátech najednou. To se děje tak, aby se písmo správně zobrazovalo ve všech prohlížečích, včetně. a staré. Vypadá to takto:

@font-face { rodina písem: "Raleway Regular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype" ), url( "../fonts/RalewayRegular/RalewayRegular.woff") formát( "woff"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") formát( "pravdivý typ"); styl písma: normální; váha písma: normální; }

Zde následuje Věnujte pozornost pořadí připojení - to je důležité!

Nebudeme zabíhat do detailů, jen si vzpomeňte na vzhled tohoto provedení.

Pokud máte písmo pouze v jednom formátu, použijte různé převodníky písem. Zde je jeden z nich.

Jak připojit písmo pomocí různých služeb

Pro připojení písem můžete také použít službu fonts4web:

Nejjednodušší způsob připojení písem

Jak připojit písmo k šabloně Moguta CMS

Jak přidat odkaz s fonty Google do šablony Moguta CMS

Nyní víte, jak přidat písmo na web pomocí CSS a dalších. Rádi zodpovíme všechny vaše dotazy

CSS fonty— sada vlastností pro ovládání vzhledu textu na webových stránkách. Použitím různá písma pro nadpisy, odstavce a další prvky můžete nastavit konkrétní styl psané zprávy, přenášející požadované emoce a náladu.

Když se ponoříte do rozmanitosti písem, nezapomeňte, že text hlavního obsahu webové stránky by měl být především čitelný. Nedoporučuje se používat na stránce více než dvě písma a požadovaného kontrastu lze dosáhnout kombinací písem různé tloušťky, velikosti, stylu nebo barvy.

Více o pravidlech se dozvíte v následujícím článku.

Formátování písma pomocí vlastností CSS

1. Rodina písem Rodina písem

Vlastnost se používá k výběru stylu písma. Vzhledem k tomu, že nelze předvídat, zda je konkrétní písmo nainstalováno na počítači návštěvníka vašich stránek, doporučujeme zaregistrovat všechny možné možnosti fonty stejného typu. V takovém případě prohlížeč zkontroluje jejich přítomnost a postupně projde navrhovanými možnostmi. Zděděno.

Důležité! Pokud název písma obsahuje mezery nebo symboly (například #, $, %), je uzavřen v uvozovkách. To se provádí tak, aby prohlížeč pochopil, kde začíná a končí název písma.

rodina písem
Hodnoty:
rodinné jméno	Název rodiny písem, například Times, Courier, Arial. Doporučuje se specifikovat společně se základní rodinou.
generická rodina	Základní rodina. CSS definuje pět základních rodin písem: Serif fonty - Serif (Times New Roman, Times, Garamond, Georgia) Bezpatková písma (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Monospace fonty - Monospace (Courier, Courier New, Andele Mono) Ručně psané fonty – Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Alegorická písma (Western, Woodblock, Klingon)
počáteční
zdědit

Syntax

P (rodina písem: "Times New Roman", Georgia, Serif;)

2. Styl písma styl písma

Tato vlastnost vám umožňuje vybrat styl písma pro text. Jak již bylo řečeno, rozdíl mezi kurzívou a kurzívou je ten, že kurzíva provádí malé změny ve struktuře každého písmene, zatímco kurzíva je nakloněná verze rovného textu. Zděděno.

Syntax

H1 (font-style: normal;) h1 (font-style: italic;) h1 (font-style: šikmé;) Obr. 1. Vlastnost font-style

3. Možnost stylu písma varianta písma

Tato vlastnost umožňuje zobrazit písmo malé velkými písmeny. Zděděno.

Syntax

H1 (varianta písma: normální;) h1 (varianta písma: malá písmena;) Obr. 2. Vlastnost font-variant

4. Tloušťka písma font-weight

Vlastnost určuje tloušťku písma.

Hodnoty:
normální	Výchozí hodnota nastaví tloušťku písma na normální. Odpovídá hodnotě nasycení 400.
tučně	Nastaví písmo textu na tučné. Odpovídá hodnotě nasycení 700.
odvážnější	Tloušťka písma bude větší než u předka.
lehčí	Tloušťka písma bude menší než u předka.
100, 200, 300, 400, 500, 600, 700, 800, 900	Hodnota 100 je nejsvětlejší styl písma a 900 je nejtlustší. Navíc tato čísla neurčují konkrétní hustotu, tzn. 100, 200, 300 a 400 může odpovídat stejné variantě slabé tloušťky písma; 500 a 600 mají střední hmotnost a 700, 800 a 900 mohou zobrazit stejný velmi bohatý styl. Rozložení hustoty také závisí na počtu úrovní tloušťky definovaných v konkrétní rodině písem.
počáteční	Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti od nadřazený prvek.

Syntax

H1 (tloušťka písma: normální;) span (tloušťka písma: tučné;) span (tloušťka písma: tučnější;) span (tloušťka písma: světlejší;) h1 (tloušťka písma: 100;) Rýže. 3. Vlastnost font-weight

5. Velikost písma velikost písma

Vlastnost určuje velikost (bod) písma.

velikost písma
Hodnoty:
absolutní velikosti	xx-small, x-small, small, medium, large, x-large, xx-large. Absolutní velikosti jsou definovány vzájemně vůči sobě a škálovací faktor mezi dvěma sousedními absolutními velikostmi je přibližně 1,5 od menší k větší a 0,66 od větší k menší. Střední je akceptována jako standardní velikost.
relativní-velikost	menší, větší. Relativní velikosti způsobit změnu velikosti písma prvku vzhledem k jeho nadřazenému prvku. V tomto případě může velikost písma přesahovat velikosti očekávané pro xx-small a xx-large .
délka	Velikost písma se nastavuje pomocí kladných jednotek délky – px, jak celých čísel, tak zlomků.
%	Relativní hodnota, vypočtená na základě libovolné velikosti zděděné z nadřazeného prvku. Poskytuje více doladění vypočítaná velikost písma. Nastavení velikosti písma pomocí em je ekvivalentní procentuální hodnotě.
počáteční	Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti z nadřazeného prvku.

Syntax

H3 (velikost písma: malá;) h1 (velikost písma: xx-large;), em (velikost písma: velká;) p (velikost písma: 20px;) h3 (velikost písma: 120 %;)

6. Barva písma

Vlastnost nastavuje barvu písma pomocí různé systémy barevné podání. Nemovitost se dědí.

barva
Hodnoty:
HEX	Tento systém používá arabská desetinná čísla od 0 do 9 a písmena od A do F. Pro webdesign se bere 16 základních barev, tzv hexadecimální kód barvy #RRGGBB, kde každý pár je zodpovědný za svůj podíl barvy: RR – červená, GG – zelená a BB – modrá. Každá barevná frakce se pohybuje od 00 do FF.
RGB	Červená Zelená Modrá, označuje množství odpovídajícího tónu (červená, zelená, modrá) ve výsledné barvě.
RGBA	RGB barevný systém rozšířený o parametr Alfa, který se používá k ovládání míchání barev. Hodnotu podporují IE9+, Firefox 3+, Chrome, Safari a Opera 10+. Poslední číslo určuje stupeň průhlednosti, nastavený hodnotou od 0 do 1, kde 0 odpovídá plné průhlednosti a 1 neprůhlednosti.
HSL	Odstín, sytost, světlost (intenzita)- odstín (tón), sytost, světlost, barevný model popisy barev. První hodnota je odstín— určeno stupněm rotace barevného spektra ve směru hodinových ručiček od 0° do 360°, kde 60° je žlutá, 120° je zelená, 180° je azurová, 240° je modrá, 300° je fialová. Druhá hodnota určuje nasycení vybraný odstín a je uveden v procentech v rozmezí od 0 % do 100 %. Blíže daná hodnota na 100 %, tím je barva čistší a sytější. Světlost nebo jas uvedeno v procentech, čím vyšší procento, tím jasnější bude barva. Hodnoty 0 % a 100 % označují černé (žádné světlo) a bílé (přeexponované) barvy, bez ohledu na to, který odstín z barevného kruhu byl původně vybrán. Optimální hodnota jas barev je 50 %. Podporovaná hodnota IE9+, Firefox, Chrome, Safari, Opera 10+
HSLA	Nastaví průhlednost (přes alfa kanál) prvku. Odstín (0 až 360), Sytost (0 % až 100 %), Světlost (0 % až 100 %), Průhlednost (0 až 1). Hodnota podporována IE9+, Firefox 3+, Chrome, Safari a Opera 10+.
název barvy	Hodnota barvy je určena názvem pro různé prohlížeče. V současné době existuje

Zdravím všechny čtenáře tohoto článku a odběratele mého blogu! Dnešní publikaci chci věnovat tématu, bez jehož znalosti nebudou vaše internetové zdroje čitelné a atraktivní: „Jak nastavit písmo v HTML“. Samotné téma je snadné a jsem si jistý, že si ho rychle osvojíte.

Neměli bychom však zapomínat, že webové jazyky jsou bohaté na nejrůznější nástroje pro návrh písem, které v ideálním případě musíte znát. Po přečtení článku s jistotou zvládnete formátování textu, naučíte se nastavovat různé styly, typy stylů písma a zdobení a také měnit velikost a barvu jak vět, tak jednotlivých písmen. Začněme!

Fonty jsou různé

Většina značek, tisku a literatury, webových stránek a dalších služeb využívá standardní fonty. Jsou sice pohodlné, ale už dávno nudí a neutahají do oka. To je důvod, proč mnoho designérů mírně mění typ designu nebo vytváří zcela nové styly. Nejznámější a nejvlivnější fonty jsou:

• Helvetica;
• Futura;
• Garamond;
• Bodoni;
• Bembo;
• Rockwell;
• Times New Roman.

Jejich hlavní rozdíly spočívají ve vztahu k určitým rodinám. Existují rodiny patkové (patkové), bezpatkové, dekorativní, kurzíva a monoprostorové rodiny.

Také chci zdůraznit, že existuje 5 velikostí písma.

Začněme jazykem html a jeho „kreativními schopnostmi“

název První záhlaví

P titulky s červeným písmenem!

Zde se nachází První odstavec aktuální příklad. Pro přehlednost tato slova bude psáno kurzívou.

Dovolte mi připomenout, že atribut zarovnat = "centrum" nastavuje text, který má být zobrazen uprostřed.

A nyní nastal čas, aby css předvedlo své dovednosti

Navzdory celé sadě různých značek, které html poskytuje, je css pohodlnější a flexibilnější nástroj pro navrhování vzhledu písem.

Hlavní vlastnosti používané k formátování obsahu jsou: písmo a jeho součásti: text-dekorace.

Nejprve se na to podíváme písmo. Jedná se o univerzální parametr, díky kterému můžete nastavit několik hodnot současně. Každý parametr navíc pracuje se svým vlastním klíčová slova.

Název vlastnosti	Klíčová slova
rodina písem	Lze nainstalovat jako standardní rodiny písem: · bez patky (sans-serif); · starožitný (patkový); · dekorativní (fantasy); · kurzíva (kurzíva); · monospace (monospace), Stejně tak standardní existující styly (Arial, Calibri atd.).
velikost písma	Pro nastavení absolutní velikosti symbolů se používají následující zápisy: xx-small, x-small, small, medium, large, x-large, xx-large. Můžete také zadat jedinečnou hodnotu.
váha písma	Zodpovědnost za saturaci stylu textu. Změny v rozsahu nebo se specifikují pomocí slov normální, tučné, světlejší nebo tučnější.
varianta písma	Určuje reprezentaci písmen pomocí klíčových slov small-caps, normal nebo inherit.
styl fontu	Nastaví normální, šikmé, kurzíva nebo zdědí rodiče.
roztažení písma	Označuje hustotu písmen. Lze zadat následující hodnoty: ultra-condensed, ultra-expanded, extra-condensed, extra-expanded, semi-condensed, semi-expanded, normal, expanded, condensed a inherit.

Vlastnictví text-dekorace pomáhá zdobit text doplňkové prvky, například podtržítko ( zdůraznit), přeškrtnuté ( line-through), overline ( overline), a také zdědí parametry rodiče ( zdědit) nebo zrušit veškerou registraci ( žádný).

Nyní je čas na druhý příklad. Vzal jsem předchozí kód a naformátoval jej pomocí znamená css. Titul byl tedy ozdoben stínem (pomocí vlastnosti text-stín) as obrysem kolem ( okraj-barva). Zároveň jsem jedno slovo zvětšil. Také jsem chtěl použít parametr neprůhlednost pro nastavení průhlednosti titulků.

název První záhlaví

Průhledné titulky!

Zde se nachází První odstavec aktuální příklad. Pro přehlednost tato slova bude psáno kurzívou.

Tento článek je u konce. Doufám, že vám to přišlo zajímavé a poučné. Pokud je odpověď kladná, přihlaste se k odběru aktualizací a řekněte o blogu svým přátelům. Ahoj!

S pozdravem Roman Chueshov

Číst: 420krát

Od autora: Vítejte na stránkách blogu Webformyself. V tomto článku bych rád odpověděl na otázku, jak nastavit písmo v html. Někteří lidé to stále nedělají správným způsobem, takže je velmi důležité porozumět problematice pečlivěji.

Jak bylo písmo nastaveno dříve

Dříve html používalo speciální spárovaná značka font, který fungoval jako kontejner pro změnu parametrů písma, jako je typ písma, barva a velikost. Dnes je tento přístup zásadně špatný. Proč? To specifikují webové standardy vzhled stránky by neměly být psány v html značkách. Navíc je tag plně podporován pouze ve velmi stará verze HTML – HTML 3.

Správné nastavení písma v html

Dnes se pro tento účel vyplatí používat výhradně css funkce. Tento jazyk byl vytvořen právě proto, aby prostřednictvím něj určoval vzhled. CSS má navíc mnohem více vlastností, které ovlivňují vzhled textu. Pojďme se na každou z nich trochu podívat:

Styl fontu. Definuje styl textu. Nabývá následujících hodnot:

Varianta písma. Vlastnost určuje, jak má být interpretován pravopis malých písmen. Má pouze dva významy:

Normální - normální chování.

Small-caps - všechno malá písmena jsou převedeny na velká písmena a jejich velikost je oproti běžnému písmu mírně zmenšena.

Tloušťka písma. Určuje tučnost textu. Hodnotu lze zadat pomocí klíčových slov nebo číselné hodnoty. Podívejme se na všechny možnosti:

Normální - prostý text

Tučné – text s tučným stylem

Tučnější – bude vypadat tučně než nadřazený prvek.

Světlejší – písmena budou méně tučná než jejich rodiče.

Je to tak jednoduché. Navíc je možné nastavit hodnotu ve formě čísel od 100 do 900, kde 900 je nejtučnější. Například normální hodnota odpovídá 400 a tučná hodnota odpovídá 700.

Bohužel většina prohlížečů tyto číselné hodnoty nerozpozná a může použít pouze dvě hodnoty: normální a tučné. Pro experiment jsem vytvořil 9 odstavců a každému dal jinou váhu textu – od 100 do 900. Poté jsem tuto webovou stránku otevřel v různých prohlížečích a žádný z nich nezobrazoval různé styly. Závěr: je lepší nepoužívat číselné hodnoty.

Velikost písma. Tato vlastnost určuje velikost písmen. Velikost lze specifikovat v různých relativních a absolutních hodnotách. Nejčastěji se velikost uvádí v pixelech, relativní jednotky em a procenta. Pokud se chcete o nastavení velikosti v CSS dozvědět více, pak si přečtěte tento, kde je vše podrobněji popsáno.

Rodina písem. Snad nejzákladnější vlastnost, která určuje rodinu nebo konkrétní název použitého písma. Pokud používáte konkrétní jméno, pak se musíte ujistit dané písmo budou nalezeny na počítačích všech uživatelů. Pro spolehlivost je třeba jej psát oddělené čárkami Alternativní možnost nebo celá rodina. Písma jsou rozdělena do následujících rodin:

Každá rodina se hodí různé potřeby. Například fantasy se často používá k navrhování různých záhlaví a pro výstup se používá monospace strojový kód atd. Konkrétněji názvy písem zjistíte např. v textový editor nebo ve Photoshopu.

Těsnopisný zápis

Vše, co jsme probrali výše, lze velmi snadno zapsat v podstatě na jeden řádek pomocí nádherné vlastnosti font, která spojuje všechna nastavení. Musíte to napsat v následujícím pořadí:

Písmo: styl písma | varianta písma | váha písma | velikost písma | font-family;

Písmo: styl písma | písmo - varianta | písmo - váha | velikost písma | písmo - rodina ;

Pokud nepotřebujete specifikovat parametr, je jednoduše vynechán. Zde je vyžadována pouze velikost a rodina písem, vše ostatní je volitelné, pokud to není nutné. Použití zkrácené notace vám umožní výrazně snížit kód v css. Použijte jej, protože je to dobrá optimalizace pro web.

Jak nastavit písmo v html na různé prvky

Takže jsme se z nějakého důvodu nechali velmi unést popisem všech vlastností pro font. Toto je velmi důležitá informace, ale jak to správně nastavit? K dosažení použijte příslušné voliče potřebné prvky. Níže uvádím několik příkladů:

p a( rodina písem: Verdana, sans-serif; )

Pro tabulková data je nastaveno mnoho parametrů písma: zmenšená velká písmena, odvážný styl, velikost písma a název.

Vlad Merževič

Písmo je nedílnou součástí webdesignu, dodává webu výraznost a rozpoznatelnost, vyjadřuje charakteristický styl webu a přímo souvisí s vnímáním textů. Správně zvoleného písma nemusí být patrné, ale bez něj nebude ta správná chuť, která dodá designu webu úplnost.

Pokud již máte v počítači nainstalované konkrétní písmo, pak stačí ke stylům přidat řádek.

h1 (rodina písem: SuperPuperFont; )

Hodnota vlastnosti font-family je název typu písma, bude použit pro všechny nadpisy

. Co ale uvidí návštěvníci webu, pokud nebude nainstalováno naše velkolepé a vzácné písmo? Tato situace je nejpravděpodobnější, takže pokud prohlížeč nerozpozná deklarované písmo, použije výchozí písmo, například ve Windows je to Times New Roman. Celý náš pečlivě promyšlený typový design se přes noc rozpadne a zapadne prachem, takže musíme hledat nejvíce univerzální řešení. První věc, která vás okamžitě napadne, je zařídit, aby se soubor s písmem stáhl do počítače uživatele a text se zobrazil ve zvoleném písmu. Ve srovnání s jinými metodami, jako je zobrazení textu prostřednictvím obrázku, je tato metoda nejjednodušší a nejuniverzálnější.

Jaké výhody nám nakonec přináší načtení souboru s písmem a následné použití prostřednictvím CSS?

• Text lze snadno přidávat a upravovat.
• V prohlížeči můžete použít vyhledávání a najít požadované fráze.
• V nastavení prohlížeče můžete zmenšit nebo zvětšit velikost písma, abyste dosáhli pohodlného prohlížení.
• Vyhledávače Dobře indexují obsah dokumentu.
• Text lze vybrat a zkopírovat do schránky a také přeložit do jiného jazyka.
• Možnosti textu jako řádkování, barvy, velikosti a podobně lze snadno měnit pomocí vlastností CSS.
• Opět platí, že pomocí CSS můžete jednoduše přidat k textu různé efekty, například stín.

Jak vidíte, výhod je mnoho. Existují i ​​drobné nevýhody a pro vyváženost stojí za zmínku.

• Ne všechny verze prohlížeče podporují písma ke stažení a formáty jedné velikosti.
• Soubor obsahující typ písma může zabírat velký objem, čímž se zpomalí načítání webové stránky.

V tabulce 1 uvádí verze prohlížečů a formáty písem, které podporují.

Stůl 1. Podporované formáty

Formát	internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Nejvíce podporovaný formát je TTF. S výjimkou IE do verze 9.0 a iOS si s ním dokonale rozumí všechny prohlížeče. Pokud je tedy vaše písmo v tomto formátu a zaměřujete se na moderní prohlížeče, Ne dodatečné akce nebudeš to muset dělat. Stačí napsat následující kód ve stylech (příklad 1).

Příklad 1: Připojení TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Nejprve načteme samotný soubor písma pomocí pravidla @font-face. Uvnitř napíšeme název typu písma přes parametr font-family a cestu k souboru přes src . Potom použijeme písmo jako obvykle. Pokud tedy potřebujeme nastavit písmo nadpisu, pak pro selektor h1, jak je znázorněno na příkladu, nastavíme vlastnost font-family s názvem načteného písma. U starších verzí IE uvádíme záložní možnosti oddělené čárkami. V v tomto případě Písmo nadpisu bude „Comic Sans MS“, protože IE8 a nižší nepodporují formát TTF.

Výsledek tento příklad znázorněno na Obr. 1.

Rýže. 1. Záhlaví s načteným písmem

Co dělat, když zoufale potřebujete floridní písmo v IE8? Naštěstí @font-face umožňuje zahrnout více souborů písem současně různé formáty. Prohlížeč si jen musí vybrat ten vhodný. Univerzální řešení, které funguje ve všech prohlížečích, tedy spočívá v převodu stávajícího formátu TTF na EOT a následném propojení obou souborů.

Existuje několik možností převodu online služby, což vám umožní načíst soubor TTF a získat soubor EOT jako výstup. Bohužel většina těchto služeb má stejný problém – soubor obdržíme, ale ruský jazyk není podporován. Nakonec kýžený výsledek není dosaženo, převod proběhne nesprávně. Mezi weby, které jsem zkontroloval, byl jeden, který správně zobrazoval text v IE.

Přejděte na tuto stránku, stáhněte si soubor TTF a klikněte na tlačítko „Převést TTF na EOT“, poté výsledný soubor uložíme do složky s písmy. Ve stylech zbývá provést malý trik a sílu různé prohlížeče načíst písmo do v požadovaném formátu. K tomu přidáme dva parametry src. První ukazuje na soubor EOT a je určen pro starší verze IE. Druhý parametr src musí obsahovat dvě adresy oddělené čárkami, z nichž jedna ukazuje na soubor TTF. Faktem je, že IE verze 8.0 a starší nerozumí čárce v parametru src, a proto bude celý parametr ignorovat. Možností zápisu může být několik, například opakovat url, zadat název písma uvnitř lokálního parametru nebo dokonce napsat neexistující písmo. Pokud prohlížeč nemůže takový font načíst, tak přejde na druhý v seznamu a máme to napsané správně. Přijatelné způsoby psaní.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

Funkční možnost připojení písma pro všechny verze prohlížeče je uvedena v příkladu 2.

Příklad 2: Připojení EOT

HTML5 CSS3 IE Cr Op Sa Fx

Moderní prvek politického procesu

Montesquieuovo politické učení ve skutečnosti přináší kontinentální evropský typ politické kultury, který se odrážel v dílech Michelse.

Pokud jde o iOS, vytvořte a stáhněte si samostatné písmo formát SVG Zdá se mi, že to nedává moc smysl. Publikum webů, které si to prohlížejí přes iOS, je stále malé a kromě toho je verze webu pro mobilní zařízení Snaží se to usnadnit a není radno stahovat dalších pár desítek kilobajtů navíc.

Webová písma Google

Pohodlnou službu, která se stará o rutinu podpory různých formátů písem a verzí prohlížečů, najdete na www.google.com/webfonts. Přestože je ve sbírce relativně málo různých písem (je jich několik desítek), všechna jsou vybírána velmi kvalitní a jsou zdarma pro použití na webových stránkách.

Před výběrem písma přepněte hodnotu Skript na azbuku, poté se vám zobrazí seznam písem podporujících ruský jazyk (obr. 2).

Rýže. 2. Výběr písem v Web Google Písma

Písmo, které se vám líbí, musíte nejprve přidat do sbírky kliknutím na tlačítko „Přidat do sbírky“ a poté na tlačítko „Použít“ v pravém dolním rohu obrazovky. Na další strana(obr. 3) můžete nakonec vybrat písma, která potřebujete. Zároveň musíte pochopit, že typ písma může obsahovat několik stylů a každý z nich zvyšuje objem stahovaných souborů.

Rýže. 3. Písma načtená na stránce

Vybraná písma můžete připojit jedním z následujících způsobů: třemi způsoby, přidaný kód lze zkopírovat dále na stránce.

1. Přes prvek . Linka bude vypadat nějak takto.

2. Prostřednictvím pravidla @import. Tento řádek vložíme do našeho CSS souboru úplně nahoře.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Prostřednictvím JavaScriptu.

V zásadě jsou všechny cesty stejné, takže si vyberte podle svých preferencí.

Výhody aplikace této služby takový.

• Fonty jsou zdarma k použití, nemusíte za ně platit.
• Nabízená písma jsou „nabroušená“ pro prohlížení na obrazovce, soubory jsou optimalizovány a zabírají relativně malý objem.
• Prohlížeč je detekován automaticky a je mu poskytnuto písmo v požadovaném formátu.

Jednou z hlavních výhod služby je, že fonty jsou uloženy ve formátech TTF, EOT, WOFF, SVG a stahují se po kontrole prohlížeče. Formát EOT tedy bude dostupný pouze pro starší verze IE.

Je jen na vás, zda budete používat Google Web Fonts nebo ne. Pokud jste to tam nenašli vhodné písmo, můžete vždy připojit oblíbené a rozšířené TTF. Navíc je podporován nejnovějšími verzemi všech populárních prohlížečů.