css připojení písem ttf. Nastavit písma v css

Písma hrají obrovskou roli v designu webových stránek. Stejný text napsaný různými fonty může na člověka vyvolat opačné dojmy.

Podívej se sám:

Některá písma vypadají přesvědčivěji, jiná zajímavěji.

Ale jak připojit jakákoli písma k webu a aplikovat je, kdekoli chcete?

V tomto článku I Ukážu vám 3 způsoby, se kterým můžete na svůj web propojit libovolné, nejrozmanitější a nestandardní fonty. A je jedno, jaký CMS používáte: WordPress, Joomla, Drupal nebo Open Cart.

Uvidíte, že na připojování písem k webu není nic složitého.

Naučíte se:

Metoda číslo 1. Rychlé připojení písem k webu WordPress (obtížnost: ⭐ ⭐ ⭐)

Pokud je na vašem webu nainstalováno prémiové téma, můžete písma připojit za 2 minuty.

Například:

Chcete změnit písmo názvů článků. Pro tohle:

1. Na panelu správce přejděte do části Možnosti motivu. V závislosti na vaší šabloně se tato sekce může jmenovat trochu jinak, ale význam je vždy stejný – „nastavení motivu“.

2. Přejděte do části Typografie.

3. Vyberte prvek, jehož písmo chcete změnit (nadpisy, odstavce):

Pokud váš web běží na jiném stroji nebo váš motiv taková nastavení neposkytuje, přejděte k další metodě.

Metoda číslo 2. Využijte sílu Google Fonts
(obtížnost: ⭐ ⭐ ⭐ ⭐)

Už jste někdy slyšeli o Google Fonts? Ve zkratce jde o službu, se kterou můžete na svůj web propojit více než 700 písem.

Krok 1. Přejděte na oficiální webovou stránku služby.

Krok 2. Najděte ve sbírce písem Google písma, která vám vyhovují. V pravém menu můžete kruh zúžit nastavením jazyka, stylu a oblíbenosti písma:

Aby služba zobrazovala písma s podporou ruského jazyka, vyberte v položce Jazyky azbuku.

Krok 3 Řekněme, že se vám líbí písmo Roboto. Klikněte na ikonu „+“:

Kliknutím na znaménko „+“ můžete přidat libovolné písmo.

Krok 4. Poté musíte rozbalit košík s vybranými fonty:

Přechodem na kartu Přizpůsobit si můžete vybrat styly a jazyky. Pokud jde o styly, doporučuji zvolit standardní sadu - normální (400), kurzíva (400 kurzíva), tučné (700) a kurzíva-tučné (tučné 700 kurzíva):

Pokud ale chcete pouze tučné písmo (pro nadpisy), vyberte pouze to.

Pamatujte, že čím více stylů zvolíte, tím větší bude velikost nahraného souboru.

Abyste nezpomalili rychlost načítání stránek, volte co nejméně stylů písma.

Krok 5. Vraťte se do sekce Vložit a vyberte kartu @IMPORT. Dále zkopírujte řádek kódu obsahující „@import“ a vložte jej na první řádek souboru CSS vašeho webu:

Pokud máte web WordPress, soubor CSS se s největší pravděpodobností nachází zde: wp_content/themes/"yourtheme"/css/... Ve složce CSS bude s největší pravděpodobností soubor Fonts, kam je potřeba přenést kód pro vložení z Googlu:

Nezáleží na tom, na jakém CMS váš web běží, stačí vložit kód a vše bude 👌

Vzhledem k tomu, že se nejprve musí načíst fonty, teprve potom vše ostatní - umístěte kód připojení fontu na úplný začátek souboru CSS.

Ve stejném souboru CSS můžete definovat písmo pro určité prvky webu.

Například:

Abych dal font Roboto všem odstavcům, napíšu následující: p ( rodina fontů: Roboto;)

Metoda číslo 3. Vlastní připojení písem pomocí CSS (obtížnost: ⭐ ⭐ ⭐ ⭐ ⭐)

Pokud jste dostatečně zruční, nejlepším řešením je zahrnout fonty sami pomocí CSS. V tomto případě budou písma umístěna na vašem serveru ve speciální složce. Nejprve je ale musíte někde sehnat.

Kde získat webová písma pro web

Věděli jste, že k používání webových písem si musíte zakoupit samostatnou licenci?

Propojte písma s bezplatnou licencí. Nejjednodušší způsob, jak je najít, je pomocí služby Fontsquirrel, kterou uděláme.

Krok 1. Přejděte na oficiální webovou stránku služby

Krok 2. V pravé nabídce v části Jazyky vyberte azbuku.

Krok 3. Najděte vhodné písmo. Pozor na počet písem.

Pokud například existují 4 styly, zapíší se 4 styly:

Označení stylů písma - normální (400/běžné), kurzíva (kurzíva), tučné (700/tučné), tučné kurzíva (700 kurzíva).

Krok 5. Klikněte na název písma a přejděte na stránku nastavení.

Krok 6. Přejděte do sekce Webfont Kit. Vyberte všechny formáty písem a klikněte na Stáhnout @FONT-FACE KIT. Pokud jsou k dispozici pouze 1-2 formáty, není to děsivé.

Chcete-li zahrnout písma, použijte @Font-face

Prostřednictvím direktivy @font-face můžete na svůj web zahrnout jedno nebo více písem. Tato metoda má ale svá pro a proti.

Klady:

Prostřednictvím CSS můžete zahrnout fonty libovolného formátu: ttf, otf, woff, svg.
Soubory písem budou umístěny na vašem serveru – nebudete závislí na službách třetích stran.

mínusy:

Pro správné připojení písma pro každý styl je potřeba napsat samostatný kód.
Bez znalosti CSS je snadné se splést.

Stačí zkopírovat můj hotový kód a tam, kam potřebujete umístit své hodnoty.

Krok 1. Přeneste stažené soubory písem na svůj web. To lze provést prostřednictvím ovládacího panelu vašeho hostingu nebo pomocí FTP.

Navrhuji vytvořit složku písem ve stejném adresáři jako váš soubor CSS. Přesuňte všechny soubory písem do této složky.

Krok 2. Na úplný začátek souboru CSS napište následující položku:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") formát("eot"),
formát url("../fonts/WebFont.woff") ("woff"),
url("../fonts/WebFont.ttf") formát("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
váha písma: normální
styl písma: normální
}

Kde MyWebFont je název písma a hodnota vlastnosti src (data v závorkách v uvozovkách) je jejich umístění (relativní odkazy). Musíme specifikovat každý styl zvlášť.

Protože nejprve zahrneme normální písmo, nastavíme vlastnosti font-weight a font-style na normální.

Krok 3. Při připojování stylu kurzívy napište následující:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") formát("eot"),
url("../fonts/WebFont-Italic.woff") formát("woff"),
url("../fonts/WebFont-Italic.ttf") format("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
váha písma: normální
styl písma: kurzíva;
}

Tam, kde je vše stejné, pouze vlastnosti font-style jsme dali hodnotu kurzíva.

Krok 4. Chcete-li povolit tučný styl, přidejte následující kód:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") formát("eot"),
url("../fonts/WebFont-Bold.woff") formát("woff"),
url("../fonts/WebFont-Bold.ttf") formát("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
váha písma: tučné;
styl písma: normální
}

Kde nastavíme vlastnost font-weight na tučné.

Ujistěte se, že jste pro každý styl určili správné umístění souborů písem.

Krok 5. Chcete-li povolit tučnou kurzívu, napište následující:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") formát("eot"),
url("../fonts/WebFont-Italic-Bold.woff") formát("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") formát("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
váha písma: tučné;
styl písma: kurzíva;
}

No, to je ono :) Právě jste na svůj web přidali 4 styly písma.

Je tu ale jedna poznámka – toto spojení písem se nebude správně zobrazovat v prohlížeči Internet Explorer 8. Útěchou je, že jich zbylo velmi málo.

Jak připojit fonty pro weby na různých CMS

Nezáleží na tom, na jakém enginu je váš web (WordPress, Joomla, Drupal, Opencart) – pokud máte přístup k souboru CSS, můžete fonty propojit buď přes Google Fonts, nebo je nahrát na váš server přes Fontsquirrel.

Dobře, teď je po všem. Pokud si myslíte, že by tento článek mohl být užitečný pro ostatní webmastery, sdílejte ho prosím na sociálních sítích.

Jakož i:

Přihlaste se k odběru mého newsletteru aby vám neunikly užitečné a zajímavé blogové příspěvky.

Mnoho návrhářů, kteří vytvářejí seriózní a zajímavá rozvržení, má k dispozici spoustu jedinečných a krásných písem. Díky takovým fontům získává design šmrnc a exkluzivitu. Nestandardní písma se však zobrazí pouze na počítači, na kterém jsou již nainstalována, takže aby s nimi mohl návrhář správně pracovat, musí vám poskytnout všechna písma, která používá ve svém rozvržení. Protože při rozvržení rozvržení budete muset tato písma nainstalovat do počítače. Uživatel vašeho webu si ale nestáhne všechna písma pro sebe a nenainstaluje si je do svého počítače, takže musíte přimět prohlížeč, aby si potřebná písma vytáhl sám. Zde pomůže pravidlo, stále existují možnosti použít Cufon nebo stáhnout fonty z Google Webfonts nebo Fontsquirrel, ale Google Webfonts a Fontsquirrel nemusí font potřebovat, takže zvažte nejlepší variantu – propojení unikátních fontů pomocí @font-face.

Nejjednodušší způsob, jak zahrnout písmo, je napsat ho do šablony stylů:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, bezpatkové ;)

Zde je název písma 'PF Din CompPro' a poté můžete toto písmo určit pro nezbytné prvky webu a fonts/pfdintextcomppro-medium-webfont.ttf je cesta k vašemu písmu, které je ve složce písem, je důležité, že v názvu nebyly v souboru písma žádné mezery, raději je nahraďte pomlčkami.

Toto je nejjednodušší způsob, ale nefunguje ve všech prohlížečích a to je velký problém.

Každý prohlížeč podporuje své vlastní formáty písem:
pravý typ Fonty pro Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT písma pro Internet Explorer 4+
WOFF písma pro Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG Písma pro iPad a iPhone

Proto budete muset vytvořit několik dalších stejných písem z jednoho z vašich písem ve formátu .ttf, pouze v jiném formátu. Zde se hodí generátor písem na fontsquirrel.com. Na této stránce nahrajte své písmo, vyberte nastavení Optimální, zaškrtněte políčko potvrzující legálnost staženého písma (některá písma stojí hodně peněz a musíte mít povolení k jejich použití), poté klikněte na tlačítko „Stáhnout svou sadu“ a obdržíte požadovaný archiv se všemi formáty vašeho písma.

Stáhněte si z archivu všechny formáty vašich písem, teoreticky se jedná o 4 soubory s příponami .eot, .svg, .ttf a .woff, zkopírujte tyto soubory do složky fonts na vašem webu, soubor stylesheet.css bude také být v archivu - v něm již budou všechna pravidla pro připojení písem napsána, můžete je bezpečně zkopírovat do své šablony stylů, jen nezapomeňte zadat své cesty k souborům písem, například do složky písem. Příklad toho, co se stalo na jednom z mých webů:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); font-weight: normal; font-style: normal; ) body( font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif; )

S tímto nastavením se písma zobrazují ve všech prohlížečích, včetně oblíbeného IE-7-8-9.

Pokud používáte nestandardní fonty pro azbuku, tedy pro ruské znaky, a font se na stránkách zobrazuje špatně, pak může pomoci vygenerování fontu s pokročilým nastavením, na stránce http://www.fontsquirrel.com/tools /webfont-generator stáhněte si písmo a vyberte nastavení "Expert". Nastavení je hodně, nevím vše, ale pozorně čtěte a vybírejte potřebná a pro podporu azbuky vyberte v bloku Podnastavení: sekci Vlastní podnastavení ... a zaškrtněte políčko azbuka a také označte jazyky a formáty, které potřebujete.

Zde je příklad toho, co jsem dostal:

Co vlastně vidí návštěvník webu při použití nestandardního webového písma v této fázi vývoje prohlížeče?

Mnozí při vytváření webu trpí. V mnoha případech web vyžaduje použití nestandardního písma nebo hieroglyfu. Stáhnete si krásný font a začnete rozkládat stránku, ale ne všichni uživatelé takové fonty mají. Někteří se nestydí a jednoduše vytvoří grafický soubor pomocí písma, které potřebují, ale další grafika se ne vždy na stránku hodí a mnozí jich mají i tak dost. Ale existuje jedna vhodná cesta ven! Tímto východiskem je použití technologie CSS (Cascading Style Sheets) nebo jednoduše „Cascading Style Sheets“. Obvykle je CSS uzavřeno v samotném vytvořeném souboru, stránce, ale můžete vytvořit soubor CSS (.css) samostatně a propojit jej vložením mezi značku tím pádem:

A s pomocí CSS musíme automaticky stáhnout a nainstalovat soubor písma True Type Font (.ttf), ale k instalaci dojde pouze v případě, že počítač uživatele požadované písmo nedetekuje. Nejprve musíme určit umístění písma. Za tímto účelem píšeme mezi značky a Tak:

Na svém webu tak můžete použít jakákoli písma. Radím vám však, abyste nebyli příliš sofistikovaní, protože proces stahování a instalace písma také vyžaduje určité množství času. A pokud vaše písmo samo "váží" 500 kb nebo více, pak se v tomto případě nedoporučuje používat.

Abych byl upřímný, je to jednodušší a správnější:

Přestože webová fonty podporuje většina prohlížečů, v Opeře jsou od samého začátku zabugované. Na některých systémech nefungují vůbec, na těch, které ano, stránky mohou nebo nemusí fungovat při opětovném načítání:

Proto by se to nemělo používat ve vážných projektech, pouze v osobních blozích a pouze pro text větší než 30px, abyste neviděli zázraky vyhlazování a kerningu.

Zároveň Google poskytuje - API pro propojení nestandardních písem mezi prohlížeči.