Ak sa chcete dozvedieť so všetkým sami - nie je ľahké, ale veľmi zaujímavé. Ak máte aspoň povrchnú predstavu o tom, ako stránka funguje, potom je lepšie pre nich implementovať váš projekt sami. Zároveň nebudete zachrániť veľa peňazí, ale tiež sa naučte veľa "čipov", tajomstvo atď. Používanie Google Fonts zvyčajne nepriťahuje pozornosť, hoci vďaka nim sa blog môže stať zaujímavejšími.
Služba
Po dlhú dobu sa na internete objavila hlavná služba webových fondov. Bola vyvinutá spoločnosťou Google. Používatelia ho mohli používať zadarmo. Napriek tomu, že nastavenie tohto typu sa nepovažuje za nadchádzajúci, stále existujú títo ľudia, ktorí robili chyby a nemohli sa vyrovnať so službou.
Na tento účel bol špeciálne navrhnutý jednoduchý dizajn. Práca s písmami Google Fonty sa uľahčovalo a počet návštevníkov sa zvýšil. Knižnica sa rozšírila. Minulý rok sa konala nová služba, ktorá sa veľa zhromaždila pozitívna spätná väzba. Teraz sa ľudia ľahšie pripojiť fonty na svoje stránky a zobraziť ich.
Vzhľad
Takže pre tých, ktorí nikdy neboli na stránke so starým dizajnom, musíte urobiť všeobecný obraz o zmenách. V minulosti sa služba vyzerala dosť masívne. Všade tam boli hrubé rámy, chytľavé tlačidlá modrej, grafika nebola najvyšším povolením. To všetko výrazne ovplyvnilo návštevníka.
Teraz sa vývojári zamerali na materiálový dizajn. Všetky získané sofistikované funkcie. Vzhľad Stal sa "ľahší". Jemná animácia, interaktivita sa stala viditeľnými. Nič iné rozptyľuje pozornosť z výberu požadovaných fontov Google Fonts.
Tam bolo vhodné prispôsobenie zdroja mobilné zariadenia. Samozrejme, takáto zmena nie je veľmi viditeľná na pozadí inovácií, ale berúc do úvahy chyby predošlá verzia Bude to pre Avid užívateľov "Manna Heavenly".
Príležitosť
Často podobné služby používajú dizajnéri. Napriek ich skúsenostiam a profesionalite pracujú aj s vizualizáciou. Redesign prezentoval viac podobných funkcií, ktoré by vám umožnili kombinovať vopred, čo bude potrebné vykonávať neskôr vo vašom projekte.
Preto problém s tým, ako je jedno písmo kombinované s inou farbou a tretím pozadím, zmizli. Spoločnosť pridala ďalšie nástroje a palety s univerzálnymi tónmi, ktoré by umožnili experimentovanie a zistiť, ako sa jedno alebo iné písmo bude pozrieť do konkrétnej farby.
Vybraný
Služba Google Fonts Fonts poskytuje používateľom používanie vybraných možností. V špeciálnom záložke sa zhromažďuje súbor štýlov, ktoré developer odporúča použiť. Tieto zbierky sú pridelené medzi ostatnými. Sú vyvíjané odborníkmi z agentúr Google a tretích strán. Väčšina z nich má určitý štýl a špeciálnu filozofiu.
vyhliadka
Jedna z dôležitých zmien postihnutých priamo voľbou písma. Je zrejmé, že skôr užívateľ videl niektoré kreslenie s ďalšími tlačidlami a veľkou modrou, ktorá pridala písmo na kolekciu. Všeobecne platí, že táto možnosť vyzerala dobre, ale nie vždy box bol dosť dobré povolenie Obrázky so štýlom, a preto určite určite určia, ako to bude vyzerať, bolo to ťažké.
Tam boli otázky a tieto ďalšie tlačidlá, ktoré boli na prvý pohľad známe. Bolo potrebné ich buď priniesť na ne alebo používať. Teraz sa stalo viac-menej jasným. Existujú ďalšie funkcie:
- Vyberte špecifický návrh, odsek alebo vlastný textový prvok.
- Experimenty sýtosti písma.
- Rýchle nastavenie veľkostí pomocou posúvača.
Mimochodom, zmena veľkosti fontov Google sa stala prispôsobivým, pretože len jeden príklad sa zmenil, a nie všetko na stránke. V stará verzia Užívatelia by mohli byť prevedení z jedného okraja stránky do druhej, a v novej ste zostali v príklade, ktorý je regulovaný.
Pripojenie
Ak ste pripravení použiť túto službu, môžete sa pokúsiť pripojiť fonty na váš zdroj. Proces získavania odkazov je univerzálny. Problémy môžu vzniknúť v závislosti od vášho systému CMS. Každý používa svoje vlastné spôsoby. Preto pre rôzne projekty budú musieť vybrať individuálne možnosti.
Budeme sa pozrieť na to, ako získať odkaz na pripojenie fontov Google. Musíte ísť na oficiálne webové stránky Google Fonty. Tam si prezeráte katalóg štýlov a vyberte si ten, ktorý najlepšie obleky. Ak to chcete urobiť, vedľa neho kliknite na tlačidlo "Plusik". Po pridaní písma do špeciálneho bloku v dolnej časti stránky.
Kliknite na toto zariadenie a potom ho nakonfigurujte. Tu si môžete vybrať nápis a potrebnú abecedu. Ak potrebujete Google Fonts Cyrilic, potom označte cyrilický reťazec. Po vytvorení odkazu. Na vložke karty sa nachádza v tom istom okne. Stačí len skopírovať alebo použiť celý HTML kód.
Zvyčajne v prostredí lokality je písmo a farby. Existujú štandardné možnosti a môžete pridať rozšírené. Majú samostatnú možnosť pre fonty Google. Ak potom potrebujete stiahnuť fonty cez supreme webfonts plugin.
Populárne možnosti
Samozrejme, je to ťažké posúdiť, aké štýly sú lepšie, najmä pre rôzne predmety lokality. Pri vytváraní vašich stránok si pamätajte, že by nemal rád vás, ale vaše publikum. Preto je lepšie pozrieť sa na stránky konkurentov.
Zvyčajne na komerčné zdroje nikto nemožní občas o štýloch. Koniec koncov, ak vidíte písmo Google Chrome. V on-line obchode je nepravdepodobné, že by ste mu venovali pozornosť. Ale ak máte blog, potom, s najväčšou pravdepodobnosťou, niečo, čo sa vám páči, a niečo, naopak, bude obťažovať.
Google Fonts pripravil mnoho zbierok, v ktorých sú populárne štýly. Napríklad Lobster Láska používať pre jednotlivé bloky v texte. Je ťažké čítať, ak je celý článok napísaný v takomto tučnovi kurzívou. Ale vyzerá to dobre vložky a citácie.
Zlý skript je tiež možnosť pre blogy. Kursívny typ ťažké na čítanie veľkých polí textu, ale môžete prideliť hlavnú myšlienku. Štýl imituje rukopisu rukopisu. Jura Normálna 400 je zaujímavá možnosť pre Cyrillic. Autor tvrdí, že to je Eurostil z rodiny Sens Seripu. Vyzerá to naozaj veľmi dobré a má niekoľko variácií.
Webfonts je technológia používania fontov tretích strán na svojej webovej stránke. Jeden príklad:Ak začnete zo zdroja, značka písma bola predstavená v roku 1995 a už v roku 1996 bola definícia softvéru napísaná do CSS. Od verzie CSS 2.0 bola zavedená syntéza písma a syntéza prehliadačov, ale napriek tomu potom stále populárne, a teraz staré a irelevantné, tj nemali podporu pre načítanie písma, ktoré zabránili rýchlemu rozvoju písiem na svojej webovej stránke.
V moderný internet Webové fonty sú dlhoročnou vecou. Na rôznych miestach môžeme použiť všetky druhy písma, ktoré zase nie sú zahrnuté do dodávky konkrétneho operačného systému, ale je tu nežiaduci vedľajší účinok, ktorý budeme hovoriť o dnešnej dobe a hovoriť.
Formáty súborov
Na pripojenie fontov sa používa inzercia softvéru v CSS, tzv @ -Evilo. Takže, B. jednoduchá forma @ Font-tvár je také vyhlásenie. Vyzerá to takto: / * Deklarovať písmo * / @ font-face (Font-Face: "Názov písma"; SRC: URL ("PATH / UP / IT");) / * Apply * / P (Font-Face: "Názov písma" , Arial;)
TTF alebo OTF - obvyklý súbor fontov, ale načítaný zo servera počas zobrazenia stránky;
Woff je nechránený OTF alebo TTF zdrojový archív, snáď najdôležitejším formátom, ktorý najobľúbenejšie prehliadače podporujú, a súbory vo Woff zvyčajne 2-2.5 krát ľahšie ako originál;
EOT - predstavil archív TT OpenType, ktoré majú ochranné mechanizmy, potrebné na podporu starých prehliadačov Internet Explorer. (Počnúc IE8, okrem TrueType kriviek, podporovaných a PostScript);
SVG - Podpora prehliadača Safari.
Pripravený na implementáciu (@ font-face) na stránke písma dnes musia byť okamžite v niekoľkých formátoch. Uvedomili ste si, že existujú niektoré nezrovnalosti, ako aj nie je jeden druh operačné systémy. Formáty fontov sú dosť veľa, ale betón bude pracovať len v konkrétnom prehliadači. Pokiaľ ide o tieto väčšiny formátov, prečo je potrebné ich špecifikovať tak veľa po pripojení, potom sú potrebné pre podporu prehliadača stránky.
@ Font-face (font-family: "Ashaft_name"; SRC: URL ("File_name_shift.eot"); SRC: URL ("File_file_shift.eot? #IFIX") formát ("Embedded-OpenType"), URL ("súbor name_shift .woff ") Formát (" Woff "), URL (" File_shift.ttf ") formát (" TrueType "), URL (" File_fail_name.svg # dsnotegular ") formát (" SVG "); Font-Hmotnosť: Normal; font -style: normálne;)
Ak chcete použiť šifrovaný kód namiesto súboru, v tomto prípade, Base64 prichádza na pomoc, ktorá funguje na rovnakom princípe a s obrázkami, ale pre starý IE BASE64 nie je spracovaný.
@ Font-face (font-family: "Ashift_name"; SRC: URL ("File_name_shift.eot");) @ font-face (fonta Font-Rodina: "Ashift_name"; SRC: URL (údaje: Font / Woff; Charset \u003d UTF-8; Base64, dátový) formát ("Woff"), URL (Údaje: Font / TruteType; CHARPET \u003d UTF-8; BASE64, DATA) Formát ("TrueType"), URL ("FILE_NAME_SVG #FILE_SHOT_NAME")) "SVG"); Font-Hmotnosť: Normal; Font-Style: Normal;)
Zabudovaný OpenType?
Ako by ste si mohli všimnúť, plug-iny pre IE majú riadok s takýmto parametrom:SRC: URL ("FILE_FILE_SEOT? #IFIX") formát ("Embedded-OpenType")
V klasickej verzii sme museli špecifikovať s vami týmto spôsobom:
SRC: URL ("File_shift.eot") formát ("Embedded-OpenType")
Ale pri pridávaní symbolu "?" Po formáte fontu sme násilne zadali prehliadač, aby sme si nečítali nasledujúci formát ("Embedded-OpenType"). Internet Explorer podporuje vloženie fontov prostredníctvom tzv. Company vloženého opätovného štandardu, počnúc verziou 4.0. Používa metódu riadenia digitálnych práv, aby sa zabránilo písmam, ktoré sa vzťahujú na licenciu.
Čo ak sa písmo nie je podporované v prehliadači?
Už dávno, Bypass Croys boli už vynájdené, takzvané "crrtches" na zobrazenie písma. Existujú prípady, keď bol písmo navrhnutý len vo formáte SVG, alebo len v TTF formáte.1. V starých dňoch, vývojári pripojili obraz, ktorý zase bol text zaznamenaný vizuálny editor. Avšak, teraz sa považuje za zlý tón, pre predpovedanie podpory (musíte redaktor opätovne otvoriť, aby ste zmenili text obrázka), v tomto poradí, užívateľ nemôže skopírovať text z obrázku.
2. Tiež bežné bolo použitie flash roztokov.
3. Ďalším riešením je pomocou javascriptuNa výmenu textu VML (pre Internet Explorer) alebo SVG (pre všetky ostatné prehliadače).
Aké problémy sa stále môžu vyskytnúť?
Prehliadač sa pokúsi synchronizovať načítanie písma, bude sa snažiť skryť text, to znamená, že je neviditeľný, kým sa písmo nebolo načítané. Tento efekt sa nazýva FIIT, účinok "bieleho blesku".Efekt flash
Firefox Firefox Firefox má tendenciu skryť text do maximálne 30 sekúnd pred odmietnutím získania písma, po ktorom je nastavené predvolené písmo.Príklad toho, ako je písmo načítané:
Avšak, 2,7 sekundy sú dlhý čas!
Čo možno urobiť?
Pôvodne bol prístup umožniť konverziu súborov písma na údaje uris, takže tieto fonty môžu byť zahrnuté priamo do definícií rodiny písma v súbore CSS. Stiahnutím tohto súboru CSS Asynchrónneho spôsobu, môžete zaručiť, že prehliadač bude okamžite poskytne text na stránke pomocou vlastných písiem a nové písma by sa použili hneď, ako by bolo CSS načítané.Avšak, v akomkoľvek experimente je vedľajší účinok.
Spočiatku Bram Stein použil vlastné písmo, ale po načítaní písma sa vyskytla "blikanie" v príklade 0,7 sekundy:
Stručne povedané, flicker sa vyskytuje, keď sa prehliadač pokúša zobraziť písmo z písma-facely a aplikovať ho na HTML. Písmo definované v písomnej forme vyhlásenia, ktoré nebolo stále naložené.
Bram Stein ukázal, ako správne pripojiť fonty, vyvinula skript, alternatívu k službe Google pre asynchrónne načítanie písma, toto je skript FontfaceObserver.
Pokus
Analýza
Štandardné pripojenie z GoogleÚprimne, pomocou viac ako jedného fontu na stránke, môžete špecificky spomaliť rýchlosť načítania lokality, čím sa zvyšuje celkový čas zaťaženia. Google Fonts API vám umožňuje rýchlo pridať písmo na stránku pomocou generátora fontu, čím sa rýchlo navrhujete vaše webové stránky. Avšak, musíte si zapamätať účinok foitov. Celkový čas zaťaženia - 322 ms.
Webový font nakladač z Google
Webový font nakladač - knižnica JavaScript pre pokročilú prácu s API, knižnicou, ktorá nám dáva väčšiu kontrolu nad načítaním písma ako štandardné API Google Fonts. Skript nám umožňuje používať mnohé fonty, ktoré ich vkladajte postupne alebo asynchrónne. Na rozdiel od štandardného pripojenia sa na slabých pripojeniach zobrazí text so štandardným písmom, kým sa písmo nenačíta.
Celkový čas zaťaženia: 1132 ms
Fontfaceobserver
Fontfaceobserver je knižnica JavaScript (5KB), takzvaná bootter kompatibilná s akýmkoľvek webovým servisom písma. Skript nám umožňuje oznámiť nám, či sa písmo vložené alebo nie, umožňuje sledovať udalosť po prevzatí a až do zaťaženia písma. Celkový čas zaťaženia: 159 ms
Pomocou skriptu.
Google Fonts je jedným z najlepších zdrojov s bezplatnými webovými fontami a spoločnosť Google vám poskytuje niekoľko spôsobov, ako im dovážať na vaše webové stránky. Bohužiaľ, nikto z nich nezahŕňa populárny wordpress motor. To znamená, že musíte buď použiť plugins, ktoré sú veľa, alebo balenia ruky, chovu s kódom.
Dobrou správou je, že môžete nainštalovať akékoľvek písmo knižnice Google Takmer akúkoľvek tému WordPress bez veľkých problémov. Ako presne - budeme vás dnes naučiť.
Existujú dve možnosti - pripojte plugin, alebo trochu na prepichnutie s funkciami súbormi.
Ale najprv by som rád uviedol výhody a nevýhody Google Fonty, aby ste sa konečne rozhodli použiť ich v našich projektoch alebo nie.
Dobré a zlé webové fonty Google
Pokiaľ ide o webové fonty, Google je jedným z lepšie možnosti z hľadiska výkonu . Vďaka ľahkému dizajnu a systému ukladania do pamäte cache. Návštevníci by nemali čakať na fonty Google, ak nedávno navštívili stránku, na ktorej boli použité. Populárne fonty, ako napríklad Open Sans, môžu zlepšiť výkon vášho stránky znížením času na stiahnutie.
Ďalšou vlastnosťou je Google vám umožní nahrať tieto fonty Takže ich môžete použiť vo vašich rozloženiach.
A nakoniec platforma je úplne zadarmo . Ak chcete začať používať písma, stačí sa prihlásiť alebo začať poštová schránka Na Gmail (a kto dnes nemá poštu do služby Gmail?).
Chyby Môžete to špecifikovať výber Google-Fonts je malý Mnohé z nich sú podobné. Je potrebné stráviť veľa času, aby ste našli slušné, originálne písmo. Fonty pre Cyrillic veľmi málo.
Okrem toho sú obvyklé bezpečnostné problémy - Pri inštalácii fontov z Google na vašich stránkach musíte zadať nejaké osobné údaje.
Ako nainštalovať Google Fonty pomocou pluginov WordPress
Ak hľadáte pluginy, prvá vec, ktorú vidíte vo výsledkoch vyhľadávania - plagings WP Google Fonty a Easy Google Web Fonts . Toto sú naozaj dve najlepšie pluginy.
Pluginy nie sú ideálne riešenie pre nastavenie Google- WordPress Websitestos stránky - nielen z hľadiska výkonu, ale aj preto, že plugins vám nedovoľujú vybrať si určité kusy textu. Avšak, ak ste alebo váš klient sú presvedčení, že je lepšie používať plugins, potom sa pozrieť na tieto dve možnosti.
Tento plugin vám umožňuje zamerať sa na špecifické prvky, ako sú titulky H1, odseky a citácie. Dostanete aj vlastnú možnosť CSS pre ďalšiu prácu s vybranými štýlmi. Pridajte a nakonfigurujte fonty z Google na vašom WordPress Site s týmto pluginom pomerne ľahko.
Jednoduché webové fonty spoločnosti Google ospravedlňuje jeho meno a robí inštaláciu Google Fonts Super Easy Easy Aj pre začiatočníkov. Môžete použiť funkciu Live Preview Funkcia pre prezeranie, testovanie a optimalizáciu fontov bez opustenia webovej stránky, rovnako ako vytvoriť vlastné pravidlá písma bez písania riadku kódu.
Správny spôsob, ako nainštalovať Google Fonty v šablóne WordPress
Nakoniec prídeme na možnosť otvoriť súbor funkcií.php a pracovať s kódom. Predtým, ako to urobíte, musíte vybrať písmo z knižnice Google. Snažte sa napríklad urobiť veľmi populárne Otvorené sans..
Potom musíte vybrať štýl písma - normálne, mastné alebo kurzíva. Si schopní to urobiť sami :)
Po výbere štýlov vám Google poskytne kódu útržku. Naše vyzerá takto:
Okrem toho sme dostali štýl CSS:
fOND-RODINA: "Otvorené sans", Sans-Serif;
Teraz je čas otvoriť súbory.php súbor (cesta k súboru: WP-Content / Themes / YourETheme). Na konci súboru pridajte novú funkciu:
funkcia Load_Fonts ()
{
Wp_register_style ("et-googlefonts",
"http://fonts.googleappis.com/css?faily\u003dopen+ss:300ITALIC 400 500 300"); Wp_enqueue_style ("et-googlefonts");
}
Add_ction ("wp_print_styles", "load_fonts");
Kľúčom tejto funkcie je príkaz "wp_enqueeue_style", ktorý spôsobuje, že WordPress zavolá tabuľku štýlov písma v hlavičke každej stránky. Ak sa pozorne pozeráte, uvidíte, vymažeme href \u003d a rel Link \u003d 'Styles' Type't'Text / CSS ', od kódu, ktorý nám spoločnosť Google dal, a budete musieť urobiť to isté, ak chcete pridať ľubovoľné Iné Google Font pre vaše stránky na WordPress.
Všetko, čo musíte urobiť, je otvoriť hlavný súbor CSS a vložiť štýl s otvorenými sans. Tam sú normálne pravidlá, takže do štýlového listu pridajte nasledujúci kód, uložte a aktualizujte:
telo.
{
Písmo: Normal 1EM "otvorené sans", sans-serif;
Farba: # 313131;
}
Tento štýl bude pracovať v celej stránke. Na jednotlivé fragmenty textu môžete nastaviť iný štýl:
Tučný text
{
font: Bold 1EM "OPEN SANS", SANS-SERIF;
}
Ako vidíte, v skutočnosti je všetko veľmi jednoduché. Skúste a skontrolujte výsledok :)
Napriek novým webovým technológiám a spúšťaniam, až nedávno sme chýbali bohaté a krásna web typografia.
Aj keď máme pomerne široký výber slúchadiel, mohli by sme používať len určitý súbor správnych fontov nainštalovaných a podporovaných väčšina počítačov - tieto písma boli známe ako - Bezpečné webové fonty (webové fonty).
Webová typografia proti tlačenej tlači
Pri vytváraní obsahu na tradičných médiách (noviny, časopisy, knihy) pri používaní typografie, len kreatívny potenciál obmedzí.
Ale teraz sa znižuje oddelenie medzi vytlačenými a virtuálnymi nosičmi. Teraz @ font-face podporu mnoho moderné prehliadače (vrátane programu Internet Explorer Z verzie IE4.0.).
Úvod do Google Font API
Adresár Google Font a Google Font API sú zadarmo webové služby Googlektoré poskytujú vlastníkom stránok s možnosťou používať rôzne fonty jednoduché, pohodlné a efektívne.
Google Font API - nový zástupca výklenku, ktorý zahŕňa Typekit., Typotheque. a atď.
Poďme do neoproku Google Font API.
Čo je to Google Font API?
Veľa ste cestovali na internete, ale videli ste neštandardné fonty na mnohých stránkach alebo blogoch?
Určite neštandardné fonty, ktoré nie sú medzi bezpečné ( Arial, Helvetica., Verdana., Gruzínsko. a Times New Roman.).
Google Font API - Jedná sa o webovú službu poskytujúce vysoko kvalitné otvorené (open source) fonty, ktoré sa dajú ľahko použiť vo vašom dizajne.
Dúfame, že zber fontov Bude aj naďalej rásť, aby sme mali ešte väčšiu voľbu rôznych slúchadiel.
Výhody používania služby Google Font API
Ak sa rozhodnete, či sa používate Google Font APITu sú niektoré z jeho výhod.
Použitie HTML textu
Na rozdiel od používania obrázkov alebo náhrad CSS. Obrázok na pozadí, pomocou funkcie @ font-tvár, ako riešenia pre atraktívnejšiu webovú typografiu, výhodnejšie, pokiaľ ide o plán SEO..
Okrem toho nebudete musieť zmeniť existujúci obsah - aktualizujte iba svoje CSS. Stoly.
Dostupnosť
Ako používate Html Text, nie obrázok alebo pozadie CSS.To neovplyvňuje ľudí pomocou programov pre čítanie na obrazovke.
Spoľahlivá infraštruktúra a zníženie zaťaženia na serveri
Vzhľadom k tomu, sťahovanie tvojej fonty používa spoľahlivú infraštruktúru GoogleMôžete si byť istí, že služba Font File bude rýchlo, a môžete znížiť zaťaženie na vlastnom serveri.
Ako používať Google Font API
Nemusíte byť profesionálnym webovým vývojárom Google Font API. Všetko, čo musíte urobiť, je pridať jednu položku Link Styheet na vašu stránku, po ktorej môžete začať používať tento font CSS..
Tu je všeobecný proces použitia Google Font API:
Krok 1: Pridanie odkazu na štýlový list s vybraným písmom
Začať ísť zber fontov GoogleAk chcete zistiť, ktoré fonty sú k dispozícii na použitie. Tu je hlavný formát zaradenia konkrétneho písma:
Ak potrebujete písmo na jednorazové použitie, môžete vyhlásiť štýl jedného riadka.
< p style = "Fonta fóra:" názov písma ", serif"\u003e Šesť revízií je krásne< / p > |
Krok 3: Vždy máte voľbu.
Nesmiete venovať pozornosť tomu, že v predchádzajúcich fragmentoch kódu sme použili serif ako náhradné písmo. To sa vykonáva, aby sa zabránilo akémukoľvek neočakávaným výsledkom. To znamená, že ak so servermi Google Niečo je nesprávne, prehliadač môže používať jeho štandardné písmo SERIF.. Urobte to so zvykom, keď používate atribút Font-Face Atribút, nezáleží na tom, či používate @ font-face alebo nie, vždy zadajte ďalšie fonty - táto technológia sa nazýva súbor fontov.
Príklad používania API Google Font
Skopírujte a prilepte nasledujúci blokový kód do vášho Html Dokument, uložte ho a potom otvorte vo svojom prehliadači.
Navrhujeme testovanie Html Dokument v rôznych prehliadačoch, takže môžete vidieť rozdiely medzi prehliadačmi (alebo ich neprítomnosť).
Môžete experimentovať s rôznymi písmami, ale napríklad, použili sme náhlavnú súpravu homára.
< html > < head > < link rel = "stylesheet" type = "text/css" < strong > href \u003d. "http://fonts.googleappis.com/css?faily\u003dLobster"< / strong >> < strong > < / strong > < / head > < body > < h1 > Šesť revízií je krásne!< / h1 > < / body > < / html > |
Výsledok:
Žiadosť o použitie viacerých fontov s Google Font API
Povedzme, že potrebujete tri fonty Adresár Google Font.. Nerobte veľa požiadaviek. Viacnásobné požiadavky Zvýšte číslo Http. Žiadosti. Menej množstva Http. Žiadosti znižuje čas odozvy na webovú stránku.
Namiesto množstva tagov odkazov štýly použite nasledujúci formát pre vlastnosť HREF jedného tagy Link Styles.
Príklad nižšie načíta všetky tri fonty ( Volkorn., Yanone. a Droid sans.) Použitie jednej požiadavky.
< strong > Volkorn.< / strong > | < strong > Yanone.< / strong > | < strong > Droid + sans.< / strong > |
Teraz môžete použiť ktorúkoľvek z týchto troch písiem vo vašich štýloch.
Čo by malo venovať pozornosť
Samostatné názvy písiem pomocou bez medzier. Venujte pozornosť používaniu + v písme Droid sans.. Použite symbol + v názvoch písma namiesto priestoru.
Tip: Tiež veľké číslo Fonty v jednom dotaze môžu zvýšiť čas odozvy stránky. Načítajte iba tie fonty, ktoré naozaj potrebujete. Byť konzervatívny.
Hmotnosť a štýl Fonty Fonts písmo API
Hmotnostné fonty majú tiež rôzne parametre hmotnosti / štýlu. Ak chcete použiť ich, pridajte do názvu písma typu Colon (:) a potom zadajte štýl a hmotnosť.
V príklade nižšie uvádzame odvážny. a odvážny pre Volkorn., I. kurzíva pre Inconsolata..
http: //fonts.googleappis.com/css?family\u003dvolkorn: b.,biba| Inconsolata: i.| Droid + sans
Čo je potrebné venovať pozornosť
Použite hrubé črevo (:) bez medzery po názve písma a potom zadajte názov štýlu (t.j. Bolditalic) alebo zodpovedajúce zníženie (t.j. bi). Ak potrebujete veľa odrôd jedného písma, rozdeliť ich s čiarkou (,) bez medzier.
Google Font API robí web typografiu atraktívnejšie
Priemysel webového dizajnu aktívne hľadá riešenie starému problému výberu a používania webových fontov a podobne ako @ font-tvár je odpoveďou.
Samozrejme, že existujú rôzne pluginy, aby mohli používať webové fonty Google Fonts na vašom WordPress stránke, ale ak vyvíjate svoju vlastnú tému, potom možno budete musieť zavrieť typografiu s ním, obchádzaním pluginov. Nižšie ukážeme, ako používať webové fonty Google vo vašej téme.
Po prvé, poďme na stránku Webové fonty Google. A vyberte písmo, ktoré musíme použiť v predmete. Pomocou špeciálnych nástrojov umiestnených na ľavej strane môžete zistiť vyhľadávaciu oblasť, pretože fonty sú naozaj veľa. Vedel som, že som mal tučné serifové písmo pre titulky a názvy blogu, takže som si vybral serif v rozbaľovacej ponuke kategórií a potom posunul hrúbku (hrúbka) vpravo.
V dôsledku toho, 617 možností, ktoré mi ponúka plynulo spadol na 5. Máte dosť možností náhľad Fonty - môžete vidieť, ako bude slovo vyzerať, ponúkne, textový odsek alebo plagát vo zvolenom písme. Môžete vybrať preddefinovaný text, môžete zadať svoj vlastný text, vyberte požadovanú veľkosť písma.
Akonáhle ste našli písmo, ktoré chcete použiť na svojich stránkach, jednoducho kliknite na tlačidlo Pridať do kolekcie.
Kolekciu môžete pridať desiatky písma. Toto sa však vždy nevyžaduje. Ak to môžete urobiť, neznamená to, že by ste to mali urobiť. Snažte sa obmedziť maximálne tri fonty. A ešte lepšie dva. Z dôvodov, stále chcem používať zastarané webové fonty pre hlavný text text a uložiť webové fonty pre titulky a iné prvky, ktoré vyžadujú špeciálnu expresivú alebo pozornosť. KOMMORKOU O CHOZNUKU ZO ZNÍŽENIACH FONTOV - Nemali by ste používať chytľavé písmo, ak vaši návštevníci nemôžu rozoberať to, čo je napísané.
Keď pridáte svoje písma na kolekciu, uvidíte ich v modrej časti v spodnej časti stránky. Akonáhle sa vaša zbierka zobrazí písma, ktoré chcete použiť, jednoducho kliknite na tlačidlo Použiť.
Potom sa budete presunúť na obrazovku, na ktorej bude prezentovaná inštrukcia pozostávajúca zo štyroch krokov. Z neho sa dozviete, ako používať fonty. Ak si želáte stiahnuť vybrané fonty, aby ste ich mohli použiť v grafickom editore, aby ste ich vyhodnotili alebo urobili atraktívny screenshot screenshot.png pre vašu tému, potom stačí kliknúť na tlačidlo Prevziať v hornej časti stránky. Ak chcete len použiť písmo vo vašej téme, potom nemusíte sťahovať do počítača.
V prvom kroku si môžete vybrať štýly a hrúbku plug-in. V druhom kroku si môžete vybrať súbor znakov, ktoré chcete pripojiť. Môžete tiež vyhodnotiť, ako bude vaša zbierka fontov premýšľať o rýchlosti načítania stránky.
Teraz ideme do tretieho kroku, ktorý už nie je taký jednoduchý. V treťom kroku dostaneme kód, ktorý potrebujete na pridanie na naše stránky - tri rôzne možnosti. Vyberieme štandardnú možnosť - Avšak, budeme trochu z pokynov spoločnosti Google, aby sme podporili zavedené metódy pridania štýlov do WordPress Témy. V kóde pre štandardnú verziu skopírujte iba adresu URL, ktorá je zadaná ako atribút HREF pre tag Link.
Potom otvorte funkcie.php Theme File. Vytvoríme funkciu na stiahnutie CSS, ktorú použijeme v našej téme:
Funkcia GGL_LOAD_STYLES () ()
Pozri prefix GGL z mojej funkcie? Toto je jeden z úspešných pracovníkov WordPress. Vždy pridajte predponu na mená vašich funkcií v WordPress, aby ste znížili riziko konfliktov s inými funkciami vo vašej téme, dcérskej spoločnosti alebo plug-in.
Teraz v tejto funkcii musíme zaregistrovať náš tabuľku štýlov prijatých od spoločnosti Google:
Funkcia GGL_LOAD_STYLES () (ak (! Is_admin ()) (WP_REGISTER_STYLE ("WILYFISTER_STYLE (" GOILYFONT), "http://fonts.googleapp.com/css?faily\u003dholtwood+One+sc|rouge+script");)
Používame funkciu wp_register_style. Prvým argumentom je deskriptor, t.j. Zníženie, ktoré môžeme použiť na odvolanie na tento stĺpový stôl v budúcnosti v našom kóde. Druhým argumentom je cesta k súboru. Používame adresu URL, ktorú sme dostali v treťom kroku pokynov Google.
Ďalej pripojujeme našu tabuľku základného štýlu pre našu tému. Dúfam, že ste neumiestňovali tag v hlavovej časti svojho súboru Headter.php? Ak áno, potom sa vrátite do súboru a odstráňte tento kód. Potom pripojte tabuľku štýlov v súbore Funkcie.PhP:
Funkcia GGL_LOAD_STYLES () (IF (! IS_ADMIN ()) (WP_REGISTISTER_STYLE ("GOILYFONT)," http://fonts.googleapp.com/css?faily\u003dholtwood +One+scccycrouge+script "); wp_enqueue_style (" GGL ", get_stylesheet_uri (), pole (" googlefont "));))
Používame funkciu wp_enqueue_style. Má rovnaké argumenty ako wp_register_style. Najprv si viažeme deskriptor k nášmu stylistickému stolu. Potom si cestu do nášho štýlu. Našťastie, v WordPress, môžete získať cestu cez funkciu GET_STYLESHEET_URI (). Potom naznačujeme závislosti. Náš súbor štýlu.css závisí od tabuľky štýlu webového fontov služby Google.
Nakoniec používame hák wp_enqueue_scripts, aby zavolal na našu funkciu:
Funkcia GGL_LOAD_STYLES () (IF (! IS_ADMIN ()) (WP_REGISTISTER_STYLE ("GOILYFONT)," http://fonts.googleapp.com/css?faily\u003dholtwood +One+scccycrouge+script "); wp_enqueue_style (" GGL ", get_stylesheet_uri (), pole (" googlefont "));)) add_action (" wp_enqueue_scripts "," ggl_load_styles ");
S funkciami. Teraz sme odišli, aby sme urobili posledný krok na použitie vybraného písma. Štvrtý krok B. pokyny spoločnosti Google Ukazuje, aké hodnoty musíme prejsť do objektu family family na použitie naše písmo. Chcem robiť všetky moje titulky s Holtwoodom One SC:
H1, H2, H3, H4, H5, H6 (Font-Family: "Holtwood One SC", Serif;)
A chcem urobiť popis stránky, chcem urobiť rouge skript písma:
Popis stránky (Font-Family: "Okrúhly skript", kurzívne;)
Všetko! Už nič nerobte nič! Pridali ste Google Web Fonts Fonty na tému WordPress. Použite ich zodpovedné!
