Jak připojit písma CSS: instrukce

Pokud jste návrhář nebo webmaster, budete s největší pravděpodobností vědět, jak připojit písma CSS. Pokud jste vlastníkem malého blogu a rozhodli jste se zdobit svůj zdroj a učinit ho jedinečným, pak by vám tato znalost měla pomoci. Ale je lepší začít od začátku, pochopit, jaké kaskádové styly jsou, kde se mají fonty a kde je instalovat.

Popis

Takže odpověď na to, jak připojit písmo CSS k webu, musí začínat popisem přímo formálního jazyka. CSS je kaskádový stylový list. Tento jazyk se používá jako popis vzhledu dokumentu. Pracuje v párování s značkovacím jazykem.



CSS pracuje na označování vizuálních vlastností stránek na internetu. Ty by měly být vytvořeny na základě speciálních HTML nebo XHTML značkovacích jazyků.

Použití

Kdo potřebuje CSS? Pro webmastery, programátory, kteří pracují na vytváření webu, je třeba připojit písma, nastavit barvy, umístit bloky a další. Hlavním úkolem kaskádových stylových listů je vizuálně rozdělit strukturování. To znamená, že pokud HTML tvoří pevný blok textu, CSS pomůže podmíněně "ozdobit" tento blok, zvýraznit prvky a přiřadit možnosti. Separace poskytuje dokument přístupnost, větší flexibilitu a kontrolu. Umožňuje vám zbavit se složitých a opakovaných obsahových prvků.

Připojení

Než pochopíte, jak správně připojit písma k CSS, musíte zjistit, jak kaskádové stylysynchronizovat se souborem. Pravidla jsou prováděna ve stejném jazyce. Samotný stylový štítek získal pravidla CSS, která používá. Tabulky mohou být umístěny jak ve vizuálně editovaném dokumentu, tak v samostatném souboru s příponou .css. V tomto souboru jsou obvykle umístěny pouze příkazy a poznámky.



Je zřejmé, že stylový list lze připojit několika způsoby. Zvažme je dále.

Metody

Existují čtyři možnosti, které pomáhají připojit písma, CSS, přiřadit odstín, definovat bloky atd. Jak již bylo zmíněno dříve, soubor pravidel může být umístěn v souboru napsaném v HTML. Ale tento design nemá rád mnoho návrhářů. To je způsobeno skutečností, že je obtížné nalézt parametry na celém plátně týmů a udělat vše. Je mnohem jednodušší přiřadit styly samostatnému dokumentu. Pokud jsou CSS umístěny samostatně, jsou propojeny pomocí značky. Musí být umístěn uvnitř a. V této značce musíte zadat atribut href, který zobrazí adresu v souboru CSS. Pokud jsou týmy znovu sestaveny samostatným souborem, připojíme je k webovému dokumentu pomocí instrukce @import. Je třeba psát mezi značkami. Ihned po. A čtvrtá metoda zahrnuje zařazení pravidel do základů jedné značky pomocí atributu styl. Pravidla pak ovlivní samostatný parametr, který je v určitém textu.

První dvě metody označily vznik vnějších stylů a druhé - interní.

Fonty

Proč fonty obecně používají? Samozřejmě, každýmajitel stránek chce, aby zdroj vypadal nejen krásně, ale i jedinečný. Chtěl bych na stránkách uvést speciální položky, které by mohly být přiděleny mezi všemi. Budete také často zaznamenávat záhlaví menu nebo nestandardní hláskování. Existuje mnoho otázek. Možná webmasteři použili obrázek zobrazený ve Photoshopu. Možná tato verze přišla s aplikací Flash. Existuje varianta, která používala javascript. Praxe však ukazuje, že první možnost je nepohodlná a pomalá, druhá je zastaralá a třetí je příliš zmrzlá. Chcete-li vytvořit něco nového a krásného, ​​můžete se pokusit připojit písma CSS.

Vlastnosti

Stojí za to pochopit, že v našem případě jsou písma nejen určitým stylem, ale také sadou vlastností, které jsou potřebné k ovládání vzhledu textu. Existuje několik možností použití. Přiřaďte specifické písmo pro hlavičku, odstavce, citace, hlavní text, nabídku atd.
Navzdory skutečnosti, že pro uživatele je k dispozici velké množství fontů, velikostí, nasycení atd., Je důležité nezapomínat na čitelnost. Nejlepší je vyhnout se velké akumulaci různých stylů. Na stránce budou k dispozici dvě písma.

Rodiny

Chcete-li mít možnost vybrat styly písma, použijte rodinu rodiny písma. Je velmi obtížné jasně pochopit, zda čtenář vašeho zdroje má určité písmo, je lepší napsat všechny stejné možnosti. V takovém případě si prohlížeč zvolí z nich jeden, který se nachází v systému uživatele. V kolekci je řada hodnot. Například jméno příjmeníreprezentovaný názvem rodiny písem. Hodnota generické rodiny určuje první pět rodů písma. Pro výběr návrhu je zodpovědná rodina písma. Tento styl je stejně zděděný jako předchozí. Mezi hodnoty jsou obvyklé nebo nakloněné písmo a kurzíva. Formát písma-variant je zodpovědný za malé velkými písmeny. Pro nasycení použijte velikost písma apod. Velikost písma a barvu lze přiřadit.

Neštandardní řešení

Kromě standardních fontů lze použít i nestandardní řešení. Obvykle jsou jedinečnější a s největší pravděpodobností je nebudete pozorovat na stránkách konkurentů. Chcete-li to provést, nemusíte používat obrázky, javascript a flash. Postačí, že se použije pravidlo @ font-face. Umožňuje uživateli stahovat externí soubor do dokumentu. Tato metoda umožňuje připojit písmo CSS OTF a TTF. Jedná se o speciální formáty, které fungují dobře pro podobné úkoly. Problémy mohou nastat pouze v prohlížeči Internet Explorer. Navzdory skutečnosti, že poprvé začal používat fonty třetích stran již v roce 1997, nyní kladl drsné požadavky. Dělá to hodně, aby tě zkazil. Může často komprimovat soubor s písmenem, někdy ho může šifrovat. To je důvod, proč existují všechny druhy khaki.

Formáty

V současné době existuje několik formátů písma, které je třeba znát. V opačném případě narazíte na řadu nesrovnalostí a neslučitelností. Můžete připojit písmo CSS TTF. Tento formát nyní podporuje všechny prohlížeče. Výjimkou může být Internet Explorer 8 a nižší, stejně jako Opera Mini 5.0-8.0.
S EOT můžepracovat pouze IE Situace s WOFF je stejná jako u TTF. SVG však funguje v prohlížečích Chrome až do verze 37, stejně jako Safari, iOS Safari a Mozilla. Jak ukazuje praxe, je nejlepší použít TTF. Jedná se o nejuniverzálnější možnost, která zřídkakdy způsobuje problémy. To je nejběžnější.

Pravidlo

Abychom připojili písmo jednoho z výše uvedených formátů, stačí použít pravidlo @ font-face, o kterém jsme hovořili dříve. Aby bylo jasné, musíte projít určitým algoritmem. Máte soubor font.ttf. Chcete-li jej použít pro hlavní text, musíte nejprve zkopírovat soubor do složky, kde jsou všechny soubory na webu umístěny. Chcete-li použít více než jedno písmo, můžete si zde stáhnout speciální složku. Bude jim mnohem jednodušší najít a změnit obsah takové složky. Nyní se musíte ujistit, že prohlížeč sám stahuje naše písmo. Chcete-li to provést, dejte mu známku. Používáme směrnici @ font-face. Příkaz bude vypadat takto: @ font-face {font-family: MyUniqueFont; src: url ('fonty /font.ttf'); } Příkaz font-family je zodpovědný za zadání názvu písma a po jeho použití ve stylu. Druhý řádek obsahuje údaj o cestě, kterou musí prohlížeč vyhledávat a připojit. Toto není univerzální adresa. V závislosti na umístění souboru do písma se tato cesta bude lišit. Tímto způsobem se dozvíte, jak připojit písmo CSS ze složky.

Připojení

Pokud nevíte, jak připojit více písem CSS, je v tomto účtu také příručka. Ona jeumožňuje zadat více souborů najednou. Například mohou být připojeny k tuctu. Chcete-li to provést, musíte použít výše uvedené pravidlo @ font-face. Jako příklad toho, jak jste dříve připojili soubor ze složky, stejně jako nový řádek, zadejte odkaz na jiné nastavení písma. Pokud máte stránky postavené na WordPress, styly připojení jsou ještě jednodušší. Když potřebujete nahradit hlavičku písma, prostě přejděte na admin panel. Najdete zde "Možnosti motivu". V sekci "Tiskárna" bude uveden celý seznam různých variant. Změny je třeba pouze vybrat a uložit.

Další možnosti

Písma písma jsou často používány písmy Google. To je populární nástroj pro výběr a připojení stylů. Tam je obrovský počet souborů písma. Chcete-li je připojit, přejděte na oficiální stránky. Před vámi se objeví seznam příkladů a příležitost experimentovat. Po přidání požadovaného stylu nezapomeňte zvolit jazyk cyrilika, pokud je váš zdroj v ruštině. Pak můžete vybrat velikost, kresbu nebo vybrat několik možností pro všechny příležitosti hned.
Poté budete mít hotový kód, který chcete nainstalovat soubor CSS. V tomto případě funguje také pravidlo přidávání metod. Pokud je list stylů samostatným dokumentem, pak jej odešleme na první řádek. Pokud je stylový list umístěn přímo v souboru HTML, je třeba jej přidat do těla značky.

Závěry

Přidat nové písma na vaše stránkyje to snadné. Je důležité okamžitě určit metody a možnosti. V závislosti na tom, který systém se vaše stránky nacházejí, je třeba uvažovat o těchto krocích. Pokud máte písemný zdroj, v tomto případě je málo možností. Pokud například WordPress, je tato operace mnohem jednodušší, než se může zdát.

Související publikace