Všechno zdraví! Dnes vám chci říct, jak používat Google Fonts API pro vložení požadovaných písem.

Vlevo můžete vidět filtr a vpravo jsou příklady různých písem. Vyberte si libovolný. Dále klikněte na tlačítko rychlé použití.

Poté se zobrazí stránka, kde můžete vybrat styly, které potřebujete pro písmo.

Zvolme například styly normální (400) a tučné (700).

Níže pod číslem 3 , můžete najít kód pro vložení. Raději volím připojení k šabloně stylů, takže kliknu na záložku @import. Zkopírujte tento kód.

Nyní vytvoříme soubor index.html s odstavcem textu.

Lorem ipsum dolor sit amet, consectetur adipisicing elita. Saepe, úřadě?

Pojďme do tagu zahrnout naši šablonu stylů hlava

A do šablony stylů na začátek souboru vložte zkopírovaný kód.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

Vybral jsem písmo Otevřete Sans jako příklad. Je úplně první.

Na stránce s písmem pod číslem 4 , můžete najít styl, který potřebujeme. Zkopírujeme to a aplikujeme to na náš odstavec.

P ( rodina písem: "Open Sans", bezpatkové; )

Všechno! Nyní si můžete vychutnat nové písmo!

Ale nezapomeňte, že jsme zvolili i odvážný styl. K jeho aplikaci stačí napsat tloušťka písma s číslem, které jste si vybrali na webu. V mém případě - 700 .

P(
font-family: "Open Sans", bezpatkové;
váha písma: 700
}

Stejně jako smělost můžete použít kurzívu, pokud si ji vyberete na webu.

Je to tak snadné google fonty. Nakonec stojí za to říci, že všechna tato písma načítají váš web. K tomu je na webu při výběru písma vpravo indikátor, který ukazuje, jak dlouho bude stránka načtena. Ujistěte se, že číslo není příliš vysoké a používejte pouze písma, která skutečně potřebujete. Neměli byste vybírat všechny styly najednou, nikdy nevíte, co se vám bude hodit.

Takže, to je vše. Děkuji za pozornost a brzy na viděnou!

Zdravím vás milí čtenáři. Dnes si povíme něco o google fontech (google web fonts), jak je stáhnout a připojit se k webu.

Jdu na stránky www.google.com/fonts/, ve filtru vpravo vyberte: 1. požadovanou kategorii, 2. v případě potřeby je seřaďte a 3. vyberte jazyk, který potřebujeme (pokud potřebujete ruské písmo v nabídce vlevo, vyberte Cyrillik).

Vybrali jsme tedy písmo, nyní je třeba vybrat jeho styl, k tomu rozbalte panel zespodu ( Otevřete výběrovou zásuvku) a přejděte na kartu PŘIZPŮSOBIT a vyberte si styly a jazyky, které chcete.

Pro stažení klikněte na tlačítko stáhnout.

Připojení staženého písma

Zkopírujte písma obsažená v archivu do složky /fonts, která by měla být ve stejném adresáři jako složka /css vašeho webu HTML.

Standardní připojení stažených písem vypadá to tak

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url("Font_file_name.eot"); .woff") format("woff"), url("FontFileName.ttf") format("truetype"), url("FontFileName.svg#DSNoteRegular") format("svg"); váha fontu: normal; font - styl: normální ;)

V mém případě bude připojení vypadat takto

/* Kód pro zahrnutí písma do /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font- styl: normální; tloušťka písma: normální; )

Chcete-li připojit zvolené písmo k webu, přejděte na kartu vložit, tam uvidíte 2 způsoby připojení:

1 STANDARD

Tento kód je nutné přidat do sekce váš dokument HTML.

2. @IMPORT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Důležité. Bez ohledu na metodu připojení použijte k definování těchto rodin následující pravidla CSS: font-family: 'Roboto', sans-serif; více o tom níže.

Materiální sponzor.
Klimatizace v internetovém obchodě http://www.technodom.kz/catalog/konditsionery. Klimatizace - nejlepší produkty, půjčování, obrovský výběr, bezvadný servis.

Dobré odpoledne milí čtenáři. Každý z vás pravděpodobně sní o tom, že by vaše webové stránky nebo webové stránky vašeho klienta byly stručnější a atraktivnější.

Jedním z hlavních faktorů, který je zodpovědný za vnímání informací na webu, jsou fonty a to, jak je společně používáme. Protože na jednom webu se nejčastěji používají dva nebo více typů písem, například pro nadpisy a pouze hlavní text.

Jednou z možností, jak vizuálně zlepšit čitelnost textů, je zařazení písem třetích stran. Ostatně každý asi ví, jaká je ve Windows „ubohá“ standardní sbírka cyrilických písem, která je zodpovědná za zobrazování textu v prohlížeči.

Standardní fonty:

Cufon a @font-face

Již dříve jsem psal o tom, pomocí kterých můžete k webu připojit nestandardní písma. A nyní se podíváme na jednodušší způsob – jde o pravidlo @font-face v css a načítání samotného písma z obchodu s písmy Google Fonts.

Celý rozdíl mezi Cufonem a @font-face je v tom, že první používá js k emulaci fontu a znaky kreslí vlastními prostředky, zatímco @font-face načte font do počítače návštěvníka sám a prohlížeč jej již používá k zobrazení text.

Každopádně Cufon a @font-face zpomalují načítání stránek, i když nijak výrazně.

Používání písem Google na webu

Nebudu moc a dlouho malovat, uvedu konkrétní příklad propojení Google Fonts na příkladu tohoto blogu.

Jak vidíte, nadpisy a podnadpisy mých článků jsou vytvořeny nestandardním písmem, nyní v praxi ukážu, jak to udělat, a analogicky si to vyzkoušíte na svých stránkách.

Výběr písma v úložišti

Abych se nelekl, vysvětlím - repozitář je repozitář, ale buržoazně :). A tak, pojďme na to http://www.google.com/fonts/ a vyhledejte si vhodné písmo pro sebe:

V nabídce toho moc není:
Vlevo je, jak vidíte, blok se všemožnými filtry pro vyhledávání písem, ve kterých si můžete vybrat například pouze latinky nebo azbuky. A nahoře nastavení pro zobrazení příkladů, které jsou rozděleny do 4 záložek:

• Slovo— zobrazení několika písmen. V tomto režimu je vhodné porovnávat mnoho písem najednou a vidět, jak konkrétní znaky vypadají;
• Věta- zobrazit jako jednu větu;
• odstavec- zobrazí se velký kus textu, který vám umožní vizuálně porovnat písmo již v samotném textu;
• Plakát- zobrazí se nadpisy, tento způsob porovnání je vhodný pro výběr písma, které bude v nadpisech použito.

Připojení písma k webu

Poté na panelu Kolekce, který se nachází ve spodní části, přejděte na kartu Použít, která je zodpovědná za používání písem z vaší sbírky. Zde okamžitě uvidíte, že Google ukazuje, jak moc se rychlost načítání stránky zhorší:

Níže je panel s výběrem „typu zobrazení“, výběrem latinky (latinka) a azbuky (cyrilice), což nám umožní zobrazit písmena latinky i azbuky:

Poté přejdeme ke třetímu bodu na této stránce, a to k samotnému připojení. Google nám nabízí tři možnosti vložení svých písem – přes js, standardní způsob je přes připojení k a @import v souboru css. Používám poslední způsob.

Otevřete svůj soubor css a napište řádek, který nám dal google:

To je vše, připojili jsme písmo z Google Fonts k webu, jak jej nyní používat?

Použití v CSS

Vše je celkem jednoduché, po připojení fontu přes @import je potřeba napsat standardní instrukce pro ty třídy a identifikátory, které budou náš nový font používat. Například:

h1, h2, h3 (rodina písem: ‚Cuprum‘, bezpatkové;)

Po všech těchto manipulacích budete mít titulky s novým, nestandardním písmem.

To je vše, děkuji za pozornost a brzy na viděnou.

Ahoj všichni! O tom jsem psal v lekci 132, můžete si přečíst. A v tomto článku vám řeknu, jak můžete snadno a rychle připojit písmo na svůj web z Google Fonts. Ve službě Google Font si musíte vybrat písmo pro svůj web a poté jej připojit.

Soubor fontu není nutné nahrávat na hosting. Stačí zaregistrovat potřebný HTML kód v záhlaví webu a v názvu nového písma. Fonty lze propojit nejen s webem WordPress, ale i s jakýmkoli jiným webem.

Jak připojit Google Fonts k webu

Přejdeme na službu Google Font na tomto odkazu a vybereme písmo, které potřebujeme.
Písma lze vybrat pomocí filtru. To znamená, že nastavíme parametry, a tím služba najde fonty se zvolenými parametry.

Pokud chcete, můžete nastavit další parametry: tloušťka (tloušťka písma), slant (šikmý), šířka (šířka písma).

Pokud je váš web v ruštině, musíte také vybrat azbuku: cirilice (azbuka) nebo rozšířená cirilice (rozšířená azbuka).

Po výběru možností služba zobrazí všechna písma, která jsou s nimi.

Kurzor myši přivedeme na písmo, které chceme na web nainstalovat, po kterém se zobrazí další nastavení / parametry: Rychlé použití (rychlé použití), Pop out (zobrazení písma v samostatném okně) a Přidat do sbírky (přidat do sbírky).

Vybrat " Rychlé použití» a na pravé straně uvidíte widget v podobě rychloměru. Ukazuje, jak rychle se vybrané písmo načítá. Čím nižší číslo na tomto tachometru, tím lépe.

Ještě níže si můžete vybrat jednu ze tří možností instalace písma na stránky: standart, @import nebo javascript.

Každá možnost má pokyny v angličtině, jak správně připojit písmo k webu. Ukážu vám první možnost Standard‘ protože je to jednodušší.

Zkopírujte řádek zvýrazněný červeně a vložte jej do souboru header.php mezi značky ….

Poté otevřeme soubor stylu style.css, najdeme písmo, které je potřeba změnit, a napíšeme nový. Stačí zadat název nového písma. Písmo Google Fonts dáváme do uvozovek, například font-family: "Aladin",Arial,Helvetica,Sans-serif.

Pokud nerozumíte vůbec ničemu, o čem tady mluvím, podívejte se na video, kde mluvím podrobně, jak připojit písmo google font k webu wordpress

______________________
Lekce 204. ale bez pluginu