Jak připojit písma CSS: Instrukce

Pokud jste designér nebo webmaster, pak s největší pravděpodobností víte, jak připojit písma CSS. Pokud jste vlastníkem malého blogu a rozhodnete 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 samého počátku, pochopit, jaké kaskádové styly jsou, kde získat 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 ve spojení s značkovacím jazykem.

CSS pracuje s odkazem na vizuální funkce stránek na Internetu. Ty by měly být vytvořeny na základě speciálních značkovacích jazyků HTML nebo XHTML.

Použijte

Kdo potřebuje CSS? Připojení písem, nastavení barev, uspořádání bloků a tak dále pro webmastery, programátory, kteří pracují na vytváření webu. 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áhá podmíněně "ozdobit" tento blok, vybrat prvky, přiřadit parametry.

Separace poskytuje dokument přístupnost, větší flexibilitu a schopnost správy. Umožňuje vám zbavit se složitých a opakovatelných prvků obsahu.

Připojení

Než pochopíte, jak správně připojit písma k CSS, musíte pochopit, jak jsou kaskádové styly synchronizovány se souborem. Jejich pravidla jsou prováděna ve stejném jazyce. Samotný stylový styl má pravidla CSS, které používá. Tabulky mohou být ve vizuálně editovaném dokumentu nebo v samostatném souboru s příponou. Css. V takovém souboru jsou obvykle umístěny pouze příkazy a poznámky k nim.

Takže je zřejmé, že můžete styly propojit několika způsoby. Zvažte je dále.

Metody

Existují čtyři možnosti, které pomohou spojit písma CSS, přiřadit odstín, identifikovat bloky apod. Jak bylo uvedeno výše, sada pravidel může být v souboru napsaném v jazyce HTML. Ale tato možnost se nelíbí mnoho návrhářů. Je to způsobeno skutečností, že na celém plátně týmů je obtížné najít popisné parametry a vypořádat se s nimi. Je mnohem jednodušší přiřadit styly do samostatného dokumentu.

Pokud jsou CSS umístěny samostatně, jsou připojeny pomocí značky . Musí být umístěn uvnitř a . V této značce je třeba zadat atribut href, který zobrazí adresu souboru pomocí CSS.

Pokud jsou příkazy opět shromážděny samostatným souborem, připojíme je k webovému dokumentu zadáním @importu. Musí být napsáno mezi značky. Ihned po

Následující dvě metody se týkají situace, kdy je CSS umístěn přímo v dokumentu, který chcete "zdobit". Šablona stylů může být v tomto případě mezi štítky. A čtvrtý způsob spočívá v tom, že pravidla jsou umístěna na základě jedné značky pomocí atributu styl. Pravidla budou mít vliv na samostatný parametr, který je v mezích určitého textu.

První dvě metody označily vzhled externích stylů a druhý - vnitřní.

Písma

Proč používat fonty obecně? Samozřejmě, každý majitel stránek chce, aby jeho zdroj vypadal nejen krásně, ale i jedinečný. Chci umístit na stránky speciálních prvků, které by mohly vyniknout mezi všemi. Také často zaznamenáváte nadpisy nebo nabídku nestandardního hláskování.

Existuje mnoho otázek. Možná webmasteři použili obrázek ve Photoshopu. Možná to byl případ Flash. K dispozici je volba, která používala jаvascript. Ale jak ukazuje praxe, první možnost je nepříjemná a pomalá, druhá je zastaralá a třetí je příliš zamorochenny. Chcete-li vytvořit něco nového a krásného, ​​můžete se pokusit připojit písma CSS.

Vlastnosti

Je vhodné si uvědomit, že v našem případě jsou fonty nejen určitým stylem, ale také množinou vlastností, které jsou potřebné k ovládání externích druh textu. Můžete použít několik možností. Přiřaďte specifické písmo pro název, odstavec, citát, text těla, menu a podobně.

Navzdory skutečnosti, že uživatel má k dispozici velké množství stop, velikostí, nasycení atd., Je důležité nezapomínat na čitelnost. Je lepší vyhnout se velké skupině různých stylů. Bude stačit mít na stránce dvě písma.

Rodiny

Chcete-li vybrat styl písma, použijte rodinnou rodinu písma. Je velmi obtížné jednoznačně pochopit, zda je na vašem počítači čtecího písma nějaké písmo, je lepší zadat všechny stejné typy variant. V takovém případě webový prohlížeč zvolí ten, který se nachází v systému uživatele.

Tato rodina má řadu významů. Například rodné jméno je reprezentováno názvem rodiny písem. Hodnota generické rodiny definuje prvních pět skupin písem.

Pro výběr písma je zodpovědná rodina písma. Tento styl je také zděděn, stejně jako předchozí. Mezi významy je obvyklý nebo šikmý obrys a kurzíva. Varianta typu písma je zodpovědná za malá velká písmena. Pro sytost použijte typ písma, atd. Písmo lze přiřadit velikost a barvu.

Neštandardní řešení

Kromě standardních písem můžete použít i nestandardní řešení. Obvykle jsou jedinečnější a s největší pravděpodobností je nebudete pozorovat na stránkách závodníků. K tomu nemusíte používat obrázky, jаvascript a flash. Stačí stačit pravidlo @ font-face. Umožňuje uživateli nahrát externí soubor do dokumentu.

Tato metoda umožňuje připojení písma CSS fontů OTF a TTF. Jedná se o speciální formáty, které fungují dobře s podobnými úkoly. Problémy mohou nastat pouze v prohlížeči Internet Explorer. Navzdory skutečnosti, že v roce 1997 poprvé začal používat fonty třetích stran, nyní stanovuje přísné požadavky.

Hodně vás zničí. Může často komprimovat soubor písma, někdy může být zašifrován. Proto existují všechny druhy hacků.

Formáty

Nyní existuje několik formátů písma, které musíte znát. V opačném případě se setkáte s řadou nesrovnalostí a neslučitelností. Můžete připojit písmo CSS TTF. Tento formát nyní podporuje všechny webové prohlížeče. Výjimkou může být prohlížeč Internet Explorer verze 8 a níže, stejně jako Opera Mini 5.0-8.0.

S EOT může fungovat pouze IE. Situace s WOFF je stejná jako u TTF. SVG však funguje v prohlížečích Chrome až do 37 verzí, stejně jako Safari, iOS Safari, prohlížeč Android. Jak ukazuje praxe, je nejlepší použít TTF. Toto je nejobecnější možnost, která zřídkakdy způsobuje problémy. On je nejčastější.

Pravidlo

Chcete-li připojit písmo jednoho z výše uvedených formátů, stačí použít pravidlo @ font-face, které jsme zmínili dříve. Aby bylo jasné, musíte sledovat určitý algoritmus. Máte soubor písma font.ttf. Chcete-li jej použít pro hlavní text, musíte nejprve zkopírovat soubor do složky, ve které jsou všechny soubory webu umístěny.

Chcete-li použít více než jedno písmo, můžete vytvořit speciální složku, do které je můžete nahrát. Takže je mnohem jednodušší, abyste je našli a změnili obsah takové složky.

Nyní se musíme ujistit, že prohlížeč automaticky načte naše písmo. Chcete-li to provést, musíte mu dát pokyny. Používáme směrnici @ font-face. Náš tým bude vypadat takto:

@ font-face {

font-family: MyUniqueFont;

src: url (`fonty / font.ttf`);

}}

Příkaz font-family je zodpovědný za to, že písmo získává své jméno a poté může být použito při psaní stylu. Ve druhém řádku je uvedena cesta, kterou prohlížeč vyhledá a připojuje. Toto není univerzální adresa. V závislosti na umístění souboru písma se taky liší. Takže se naučíte připojit písmo CSS ze složky.

Připojení

Pokud nevíte, jak připojit více písem CSS, je zde také instrukce. Umožňuje zadat více souborů najednou. Například, mohou být připojeny z tuctu. Chcete-li to provést, musíte použít pravidlo @ font-face výše. Následuje příklad toho, jak jste předtím připojili jeden soubor ze složky, stejným způsobem z nového řádku zadáte odkazy na jiné varianty písma.

Pokud jsou vaše stránky postaveny na základě WordPress, propojení stylů je ještě snadnější. Když potřebujete nahradit obrys titulu, jednoduše se přihlaste do administračního panelu. Zde vyhledejte téma "Nastavení tématu". V sekci "Typografie" se objeví celý seznam různých možností. Stačí, abyste změnu zvolili a uložili.

Další možnosti

Spojení písem často používáte službu Google Fonts. Toto je oblíbený nástroj pro výběr a připojení stylů. Existuje obrovský počet souborů písem. Chcete-li je připojit, přejděte na oficiální webové stránky.

Než budeš celý 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ě. Dále můžete vybrat velikost, styl nebo několik možností pro všechny příležitosti.

Po dokončení instalace kódu do souboru CSS. V tomto případě platí také pravidlo přidávání metod. Pokud jsou listy stylů reprezentovány samostatným dokumentem, pak je příkaz odeslán na první řádek. Pokud máte listy stylů přímo v souboru HTML, musíte je přidat do těla tagů.

Závěry

Přidávání nových písem na vaše stránky není obtížné. Je důležité okamžitě rozhodnout metodami a možnostmi. V závislosti na tom, na jakém systému se vaše stránky nacházejí, musíte tyto činnosti přemýšlet. Pokud máte vlastní publikovaný zdroj, není mnoho možností. Pokud je například v aplikaci WordPress, je tato operace mnohem jednodušší než se může zdát.