Naučiť sa všetko sami, nie je ľahké, ale veľmi zaujímavé. Ak máte aspoň povrchné znalosti o tom, ako stránka funguje, potom je pre implementáciu vášho projektu lepšie to urobiť sami. Pri tom nielen ušetríte veľa peňazí, ale aj sa naučíte veľa „čipov“, tajomstiev atď. Používanie písem Google spravidla nepúta pozornosť, aj keď vďaka nim môže byť blog oveľa zaujímavejší.
Služba
Pomerne dávno sa na internete objavila veľká služba webových fontov. Bol vyvinutý spoločnosťou Google. Používatelia ho mohli používať zadarmo. Napriek tomu, že tento typ nastavenia nie je považovaný za super náročný, stále existujú ľudia, ktorí robia chyby a nedokážu sa so službou vyrovnať.
Na to bol špeciálne vyvinutý jednoduchý dizajn. S Google Fonts je teraz jednoduchšie pracovať a získať viac návštevníkov. Rozšírila sa aj knižnica. V minulom roku došlo k redizajnu služby, ktorý získal veľa pozitívnych recenzií. Teraz je pre ľudí jednoduchšie pripojiť sa a prehliadať písma na svojich stránkach.
Vzhľad
Takže pre tých, ktorí nikdy neboli na webe so starým dizajnom, musíte získať všeobecný obraz o zmenách. V minulosti vyzerala táto služba dosť masívne. Všade boli hrubé rámy, chytľavé modré tlačidlá, grafika nemala najvyššie rozlíšenie. To všetko veľmi ovplyvnilo návštevníka.
Teraz sa vývojári zamerali na Material Design. Všetko získalo sofistikované funkcie. Vzhľad sa stal "ľahším". Nápadná bola jemná animácia a interaktivita. Už nič neodvádza pozornosť od výberu správnych Písiem Google.
Ukázalo sa pohodlné prispôsobenie zdroja pre mobilné zariadenia. Takáto zmena samozrejme nie je na pozadí inovácií veľmi nápadná, ale vzhľadom na chyby predchádzajúcej verzie sa pre zanietených používateľov stane „nebeskou manou“.
Príležitosť
Dizajnéri často používajú túto službu. Napriek svojim skúsenostiam a profesionalite pracujú aj s vizualizáciou. Redizajn predstavil viac z týchto funkcií, čo by vám umožnilo vopred skombinovať to, čo bude potrebné neskôr implementovať do vášho projektu.
Preto zmizol problém s tým, ako sa jedno písmo skombinuje s inou farbou a tretím pozadím. Spoločnosť na stránku pridala ďalšie nástroje a paletu s univerzálnymi tónmi, ktoré im umožnili experimentovať a zistiť, ako by konkrétne písmo vyzeralo v konkrétnej farbe.
Obľúbené
Služba Google Fonts poskytuje používateľom výber z ich obľúbených. Špeciálna karta obsahuje sadu štýlov, ktoré vývojár odporúča použiť. Tieto zbierky vynikajú nad ostatnými. Vyvíjajú ich odborníci z Googlu a agentúr tretích strán. Väčšina z nich má špecifický štýl a filozofiu.
vyhliadka
Jedna z dôležitých zmien priamo ovplyvnila výber písem. To znamená, že predtým používateľ videl pred sebou určitú kresbu s ďalšími tlačidlami a veľkou modrou, ktorá pridala do zbierky písmo. Vo všeobecnosti táto možnosť vyzerala dobre, ale škatuľka nemala vždy dostatočne dobré rozlíšenie obrázku so štýlom, a preto bolo ťažké jednoznačne určiť, ako bude písmo vyzerať.
Otázky boli aj ohľadom týchto dodatočných tlačidiel, o ktorých sa na prvý pohľad vedelo len málo. Bolo potrebné ich buď nasmerovať, alebo použiť. Teraz je všetko viac -menej jasné. Objavili sa ďalšie funkcie:
- Vyberte konkrétnu vetu, odsek alebo vlastný textový prvok.
- Experimenty s váhami písma.
- Rýchle nastavenie veľkosti pomocou posúvača.
Mimochodom, zmena veľkosti písma Google teraz lepšie reaguje, pretože sa zmenil iba jeden príklad, nie všetko na stránke. V starej verzii mohli používatelia prechádzať z jednej strany stránky na druhú, ale v novej verzii jednoducho zostávate na príklade, ktorý upravujete.
Pripojenie
Ak ste pripravení používať túto službu, môžete skúsiť prepojiť písma s vašim zdrojom. Samotný proces získavania odkazu je univerzálny. Problémy môžu nastať v závislosti od vášho systému CMS. Každý z nich používa svoje vlastné metódy. Preto pre rôzne projekty budete musieť vybrať samostatné možnosti.
Pozrime sa, ako získať odkaz na prepojenie písem Google. Musíte ísť na oficiálnu stránku Google Fonts. Tam si prezrite katalóg štýlov a vyberte si ten, ktorý najlepšie vyhovuje vašim potrebám. Ak to chcete urobiť, kliknite na znamienko plus vedľa neho. Potom bude písmo pridané do špeciálneho bloku v spodnej časti stránky.
Kliknite na tento blok a ďalej ho prispôsobte. Tu si môžete vybrať štýly a požadovanú abecedu. Ak potrebujete písma cyriliky Google, skontrolujte riadok cyriliky. Potom sa vygeneruje odkaz. Nájdete ho v rovnakom okne na karte Vložiť. Stačí ho skopírovať alebo použiť celý kód HTML.
V nastaveniach webu je zvyčajne nastavenie pre písma a farby. Existujú štandardné možnosti, ale môžete pridať rozšírené. Obsahujú samostatnú možnosť pre písma Google. Ak je to vaše, musíte si stiahnuť písma prostredníctvom doplnku Supreme Google Webfonts.
Populárne možnosti
Je samozrejme ťažké posúdiť, ktoré štýly sú najlepšie, najmä pre rôzne témy stránok. Pri vytváraní svojej webovej stránky pamätajte na to, že by sa vám nemala páčiť ona, ale vaše publikum. Preto je lepšie sa bližšie pozrieť na konkurenčné stránky.
Pri komerčných zdrojoch sa štýlom spravidla nikto nezaujíma. Koniec koncov, ak vidíte písmo v prehliadači Google Chrome v internetovom obchode, pravdepodobne sa nad ním nebudete pozastavovať. Ale ak máte pred sebou blog, s najväčšou pravdepodobnosťou sa vám môže niečo páčiť, ale niečo, naopak, bude nepríjemné.
Google Fonts pripravilo mnoho kolekcií, ktoré obsahujú aj obľúbené štýly. Lobster sa napríklad používa pre jednotlivé bloky v texte. Je ťažké čítať, ak je celý článok napísaný takou tučnou kurzívou. Vložky a úvodzovky však vyzerajú dobre.
Bad Script je tiež možnosťou pre blogovanie. Kurzívou sa ťažko čítajú veľké textové polia, ale môžu zvýrazniť hlavnú myšlienku. Štýl napodobňuje rukopis. Jura normal 400 je zaujímavý variant pre azbuku. Autor tvrdí, že ide o Eurostyle z rodiny Sans-Serif. Vyzerá to naozaj dobre a má niekoľko variácií.
Prvá časť tejto kapitoly je venovaná úvodu do CSS fontov. Na tejto stránke sa naučíte, ako zahrnúť písma do CSS, čo sú to webové písma a ako s nimi pracovať, aké formáty písem existujú, ako používať písma Google. Začnime tým, že sa pozrieme na ľahký príklad zahrnutia písma CSS:
P (rodina písma: Verdana;)
Tento malý kúsok kódu znamená, že všetky značky
Písmo je Verdana. Vlastnosť font-family určuje, ktoré písmo alebo rodina písem sa použije. Správne zobrazenie tohto štýlu v prehliadači používateľa závisí od toho, či je zadané písmo nainštalované v jeho počítači. V našom prípade, ak na počítači používateľa chýba písmo Verdana, prehliadač zobrazí predvolené písmo.
Dizajnéri museli svojho času dodatočne špecifikovať niekoľko záložných písem pre prípad, že v počítači používateľa bude chýbať to hlavné. Povedzme, že chcete text štylizovať pomocou písma Verdana a ako záložné prvky nainštalovať písma Trebuchet MS, Ženeva a akékoľvek bezpatkové písmo. Je to napísané týmto spôsobom:
P (rodina písem: Verdana, "Trebuchet MS", Ženeva, bezpatkové;)
Pri spracovaní tohto kódu prehliadač najskôr skontroluje prítomnosť písma Verdana v počítači používateľa. Ak je prítomné písmo, obsah značiek
Zobrazené týmto písmom. Ak písmo chýba, prehliadač vyhľadá ďalšie písmo v zozname - Trebuchet MS. Ak toto písmo chýba, skontroluje sa ďalšie písmo - Ženeva. Ak používateľ nemá na počítači Ženevu, prehliadač vyberie iné dostupné bezpatkové písmo a zobrazí s ním text.
Poznámka: v kóde sme zapísali názov písma Trebuchet MS do úvodzoviek. Keď názov písma obsahuje medzery, je potrebné ho uzavrieť do dvojitých alebo jednoduchých úvodzoviek.
O tom, čo je to pätkové a bezpatkové písmo, si môžete prečítať na stránke Wikipedia.
Webové písma
Vyššie uvedený spôsob používania písem má obrovskú nevýhodu - ste obmedzený počtom písem. Budete sa musieť uspokojiť iba s možnosťami, ktoré sú pravdepodobne nainštalované na väčšine počítačov.
Ako môžete zvýšiť výber písiem, aby bol dizajn stránky individuálny a pridal originalitu? Webové písma prichádzajú na záchranu. Prečítajte si kapitolu o tom, ako s nimi pracovať.
Aby sa teda v prehliadači používateľa zobrazilo požadované písmo, potrebujeme, aby sa toto písmo stiahlo do jeho samotného počítača. To je celkom ľahké dosiahnuť. Tento spôsob prepojenia písem s CSS otvára dizajnérom skutočne veľké možnosti. Za zmienku však stojí mucha v masti: po prvé, nie každý prehliadač podporuje určitý formát písma (čo povedie k tomu, že sa písmo nezobrazí), a po druhé, ak má súbor s písmom veľkú váhu, môže spomaliť dole načítanie stránky.
Podpora formátu
Ako sa vysporiadať s problémom nesúladu formátu súboru? Pozrime sa na tabuľku zobrazujúcu najobľúbenejšie formáty písem a zistíme, ktoré prehliadače ich podporujú:
Poznámka: Najnovšie informácie o podpore formátu písma nájdete vždy na caniuse.com. Do vyhľadávacieho panela musíte zadať názov formátu (napríklad ttf).
Ak zacieľujete na moderné prehliadače, budete potrebovať iba formát písma TTF - najbežnejší a najpoužívanejší. V prípade, že potrebujete mať niekoľko formátov jedného písma, môžete použiť špeciálne online prevodníky z jedného formátu do druhého a potom pripojiť všetky súbory jeden po druhom. Prehliadač si teda bude môcť vybrať formát písma, s ktorým bude pracovať.
Vrátane webového písma pomocou @ font-face
Predpokladajme, že máte vlastné jedinečné písmo s názvom MyUniqueFont vo formáte TTF a chcete, aby sa hlavný text vašej webovej stránky zobrazoval týmto písmom. Prvá vec, ktorú musíte urobiť, je skopírovať súbor písma do priečinka, kde sa nachádzajú všetky ostatné súbory lokality. Aby ste sa vyhli neporiadku, môžete vytvoriť samostatný priečinok špeciálne pre písma, pomenovaný napríklad pre písma.
@ font-face (rodina fontov: MyUniqueFont; src: url ("fonts / MyUniqueFont.ttf");)
Vlastnosť rodina fontov v tomto prípade hrá inú úlohu: priradíme k nemu písmo, aby sme ho mohli použiť pri písaní štýlu:
P (rodina fontov: MyUniqueFont;)
Druhý riadok obsahuje cestu k súboru písma. V našom prípade je súbor MyUniqueFont.ttf umiestnený v priečinku písem. Vaša adresa URL sa môže líšiť.
Písma Google
Google uľahčuje pripojenie akéhokoľvek písma zo zbierky Google Fonts. Všetko, čo musíte urobiť, aby ste mohli začať používať písmo, ktoré sa vám páči, je zadať niekoľko nastavení na stránke písma v službe Google, potom skopírovať špeciálny odkaz na toto písmo a pridať ho do webového dokumentu.
Poznámka: na webe je k dispozícii celá zbierka písem od spoločnosti Google Písma Google... Na stránke môžete pomocou rôznych filtrov vyhľadávať písma podľa kategórie, hrúbky, abecedy.
Ďalej popíšeme každý krok pripojenia písma z Googlu. Aby ste pochopili, o čo ide, vyberte akékoľvek písmo na stránke Google Fonts a otvorte ho kliknutím na tlačidlo Rýchle použitie.
Krok 1: vyberte si tvár
V prvom rade sa na stránke vybraného písma zobrazia možnosti jeho štýlu a ikona rýchlomera, čo neznamená nič iné ako rýchlosť načítania písma. Čím viac štýlov písma vyberiete, tým dlhšie bude trvať jeho stiahnutie. Preto sa odporúča vybrať iba tie možnosti písma, ktoré plánujete použiť.
Krok 2: vyberte abecedu
Ďalej na stránke je možné vybrať sadu znakov: latinku, azbuku atď. V závislosti od písma nemusia byť k dispozícii všetky varianty abecedy. Podobne ako v predchádzajúcom bode je lepšie zaškrtnúť iba abecedu, ktorú potrebujete.
Krok 3: Pridajte kód na web
Prvá metóda zahŕňa pridanie odkazu na server Google v kóde HTML, odkiaľ sa sťahuje písmo. Hotový kus kódu musíte skopírovať a umiestniť medzi značky
vo vašom dokumente HTML. Príklad:...
Druhým spôsobom je prepojenie písma pomocou smernice @import. Hotový kód je na druhej karte bodu 3 na stránke vybraného písma Google. Je potrebné ho pridať na úplný začiatok šablóny so štýlmi (v opačnom prípade sa súbor neimportuje). Kód vyzerá takto:
@import url (http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);
Zvláštnosťou prvej metódy je, že do názvu každej stránky, na ktorej ju plánujete použiť, musíte pridať odkaz na písmo. To sa dá ľahko vykonať na stránkach s niekoľkými stránkami, ale je to problematické pre veľké zdroje. Druhá metóda je výhodná, pretože kód je možné umiestniť na úplný začiatok externého listu štýlov a potom všetky stránky, ku ktorým je táto tabuľka pripojená, dostanú potrebné písmo, ktoré sa načíta pomocou direktívy @import.
Krok 4: vytvorte štýl
Po dokončení predchádzajúcich krokov môžete začať používať písmo. Už ste videli, ako je takéto pravidlo CSS napísané:
P (rodina fontov: "Roboto", bez pätky;)
Ak ste v prvom kroku vybrali pre písmo niekoľko možností (napríklad pridali variant tučného typu Bold 700), v treťom kroku sa kód mierne upraví:
@import url (http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
Aby bolo písmo potom tučné, napíšte štýl CSS takto:
P (rodina písem: "Roboto", bezpatkové; hmotnosť písma: 700;)
Poznámka: Google Fonts používa na označenie hmotnosti písma iba konvenčné jednotky od 100 do 900. Napríklad normálny štýl (štandardne) je ekvivalentný 400 (normálny) a štandardný hrubý je 700 (hrubý).
Hlavnými výhodami služby Google Fonts sú:
- jednoduché použitie (službu môže zistiť aj začiatočník a všetok potrebný kód sa vygeneruje automaticky - stačí ho skopírovať);
- dostupnosť písem (nie je potrebné za ne platiť);
- k dispozícii sú všetky použité formáty písma (to znamená, že každý prehliadač si bude môcť stiahnuť presne ten formát písma, s ktorým funguje).
Medzi nevýhody služby nepatrí veľmi široká škála písem, najmä cyriliky. Mimochodom, na internete existujú ďalšie podobné služby, napríklad TypeKit (platený).
Výsledky
Dnes máme niekoľko možností na prepojenie pôvodných a neštandardných písem s webovými stránkami. Každá z týchto metód má svoje výhody a nevýhody. Ktorú z možností je lepšie použiť, musíte sa rozhodnúť sami. To často závisí od situácie a v rôznych prípadoch môžu byť užitočné rôzne prístupy. V tomto mieste stačí vedieť, ako používať písma v CSS.
Google Fonts je jedným z najlepších zdrojov bezplatných webových písem a Google vám ponúka niekoľko spôsobov, ako ich importovať na webové stránky. Žiadny z nich bohužiaľ neobsahuje populárny engine WordPress. To znamená, že musíte buď použiť doplnky, ktorých je veľa, alebo si zašpiniť ruky popletením kódu.
Dobrou správou je, že ľubovoľné písmo z knižnice Google môžete nainštalovať na takmer akúkoľvek tému WordPress bez zbytočných starostí. Ako presne - to vás dnes naučíme.
Existujú dve možnosti - prepojiť doplnok alebo sa trochu pohrávať so súborom functions.php.
Najprv by som však chcel uviesť výhody a nevýhody Google Fonts, aby ste sa mohli konečne rozhodnúť, či ich vo svojich projektoch použijete alebo nie.
Dobré a zlé webové písma Google
Pokiaľ ide o webové písma, Google je jednou z najlepších možností. z hľadiska výkonu ... Všetko kvôli ľahkej konštrukcii a systému ukladania do vyrovnávacej pamäte. Ak návštevníci nedávno navštívili web, ktorý ich používa, nemusia čakať na načítanie Písiem Google. Populárne písma, ako napríklad Open Sans, môžu zlepšiť výkon vašich stránok skrátením času načítania.
Ďalšou vlastnosťou je, že Google vám umožňuje stiahnuť tieto písma takže ich môžete použiť vo svojich rozloženiach.
A nakoniec platforma je úplne zadarmo ... Ak chcete začať používať písma, stačí sa prihlásiť alebo si vytvoriť schránku v Gmaile (a kto dnes nemá poštu v Gmaile?).
Z nedostatkov môžeš to naznačiť výber Google fontov je malý , mnohé z nich sú si navzájom podobné. Na nájdenie slušného, originálneho písma je potrebné veľa hľadania. Existuje veľmi málo cyrilských písem.
Okrem toho existujú obvyklé obavy o bezpečnosť - pri inštalácii písiem od spoločnosti Google na svoj web musíte poskytnúť niektoré osobné informácie.
Ako nainštalovať písma Google pomocou doplnkov WordPress
Ak hľadáte doplnky, prvá vec, ktorú vo výsledkoch vyhľadávania uvidíte, je WP Doplnky Google Fonts a Easy Google Web Fonts ... Toto sú skutočne dva najlepšie doplnky.
Doplnky nie sú ideálnym riešením na inštaláciu Písiem Google na web WordPress - nielen z hľadiska výkonu, ale aj preto, že doplnky vám neumožňujú vybrať určité časti textu. Ak ste však vy alebo váš klient presvedčený, že je lepšie používať doplnky, pozrite sa na tieto dve možnosti.
Tento doplnok vám umožňuje zacieliť na konkrétne prvky, ako sú nadpisy H1, odseky a úvodzovky. Získate tiež vlastnú možnosť CSS na ďalší štýl konkrétnych písem. S týmto doplnkom je pridávanie a prispôsobovanie písem Google na váš server WordPress veľmi jednoduché.
Jednoduché Google Web Fonts dodržiava svoj názov a uľahčuje inštaláciu Google Fonts aj pre začiatočníkov. Funkciu živého náhľadu môžete použiť na zobrazenie ukážky, testovanie a optimalizáciu písem bez toho, aby ste museli opustiť webovú stránku, a vytvárať si vlastné pravidlá písma bez písania riadka kódu.
Správny spôsob, ako nainštalovať písma Google do šablóny WordPress
Nakoniec prichádzame na možnosť otvoriť súbor functions.php a urobiť trochu kódu. Predtým než to urobíte, musíte vybrať písmo z knižnice Google. Skúsme si pre príklad vziať veľmi populárne Otvorené sans.
Potom musíte vybrať štýl písma - normálne, tučné alebo kurzívu. Zvládneš to sám :)
Keď si vyberiete štýly, Google vám poskytne útržok kódu. Náš vyzerá takto:
Okrem toho sme dostali štýl CSS:
rodina fontov: "Open Sans", bezpatkové;
Teraz je čas otvoriť súbor functions.php (cesta k súboru: wp-content / themes / yourtheme). Na konci súboru pridajte novú funkciu:
funkcia load_fonts ()
{
wp_register_style ("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style ("et-googleFonts");
}
add_action ("wp_print_styles", "load_fonts");
Kľúčom k tejto funkcii je príkaz „wp_enqueue_style“, ktorý núti WordPress vyvolať listy so štýlmi písma v hlavičke každej stránky. Ak sa pozriete pozorne, zistíte, že sme z kódu, ktorý nám poskytol Google, odstránili odkaz href = a rel = 'stylesheet' type'text / css 'a to isté budete musieť urobiť aj vy, ak chcete pridať akékoľvek iné písmo pre váš web WordPress.
Všetko, čo musíte urobiť, je otvoriť hlavný súbor CSS a prilepiť štýl z Open Sans. Tu fungujú obvyklé pravidlá, preto do svojej šablóny štýlov pridajte nasledujúci kód, uložte a aktualizujte:
telo
{
font: normal 1em "Open Sans", sans-serif;
farba: # 313131;
}
Tento štýl bude fungovať na celom webe. Pre jednotlivé fragmenty textu môžete nastaviť iný štýl:
Tučný text
{
písmo: tučné 1em "Open Sans", bezpatkové;
}
Ako vidíte, je to v skutočnosti veľmi jednoduché. Skúste a overte si výsledok :)
Vlad Merzhevich
Písmo je neoddeliteľnou súčasťou webového dizajnu, dodáva webu expresivitu a uznanie, vyjadruje charakteristický štýl webu a priamo súvisí s vnímaním textov. Dobre zvolené písmo si možno nevšimne, ale bez neho nebude žiadna chuť, ktorá dotvorí dizajn webovej stránky.
Ak už máte v počítači nainštalované konkrétne písmo, potom v štýloch stačí pridať riadok.
h1 (rodina písem: SuperPuperFont;)
Hodnota vlastnosti font-family je názov písma, bude aplikovaný na všetky nadpisy
... Čo však uvidia návštevníci webových stránok, ak nebudú mať nainštalované naše veľkolepé a vzácne písmo? Táto situácia je najpravdepodobnejšia, takže ak prehliadač nerozpozná deklarované písmo, použije predvolené písmo, napríklad v systéme Windows je to Times New Roman. Celý náš starostlivo premyslený typový dizajn sa cez noc rozpadne, takže musíme hľadať najuniverzálnejšie riešenie. Prvá vec, ktorá vás hneď napadne, je zorganizovať stiahnutie súboru písma do počítača používateľa a zobraziť text vo vybranom fonte. V porovnaní s inými metódami, ako je zobrazenie textu prostredníctvom obrázku, je táto metóda najjednoduchšia a najuniverzálnejšia.
Aké sú výhody sťahovania súboru písma a jeho následnej aplikácie prostredníctvom CSS.
- Text je možné ľahko pridávať a upravovať.
- V prehliadači môžete použiť vyhľadávanie a nájsť požadované frázy.
- V nastaveniach prehliadača môžete zmenšiť alebo zväčšiť veľkosť písma, aby ste dosiahli pohodlné sledovanie.
- Vyhľadávače dobre indexujú obsah dokumentu.
- Text je možné vybrať a skopírovať do schránky, ako aj preložiť do iného jazyka.
- Textové parametre, ako sú riadkovanie, farba, veľkosť a podobne, je možné ľahko zmeniť pomocou vlastností CSS.
- Prostredníctvom CSS môžete do textu jednoducho pridať rôzne efekty, napríklad tieň.
Ako vidíte, existuje veľa výhod. Existujú určité menšie nevýhody a kvôli rovnováhe stoja za zmienku.
- Nie všetky verzie prehliadača podporujú písmo na stiahnutie a rovnaký formát pre všetkých.
- Súbor obsahujúci písmo môže byť veľký, čo spomaľuje načítanie webovej stránky.
Tabuľka 1 uvádza verzie prehliadača a formáty písem, ktoré podporujú.
| Formát | internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| TTF | 9.0+ | 4.0+ | 10.0+ | 3.1+ | 3.5+ | 2.2+ | |
| EOT | 5.0-8.0 | ||||||
| WOFF | 9.0+ | 5.0+ | 3.6+ | ||||
| SVG | 1.0+ | 9.0+ | 3.1+ | 3.5+ | 1.0+ |
Najviac podporovaným formátom je TTF. S výnimkou IE do verzie 9.0 a iOS mu všetky prehliadače dokonale rozumejú. Ak teda máte písmo v tomto formáte a cielite na moderné prehliadače, nemusíte robiť žiadne ďalšie kroky. Nasledujúci kód stačí napísať v štýloch (príklad 1).
Príklad 1. Pripojenie TTF
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Najprv načítajte samotný súbor písma pomocou pravidla @ font-face. Do jeho vnútra zapíšeme názov písma pomocou parametra family-font a cestu k súboru pomocou src. Ďalej použijeme písmo ako obvykle. Ak teda potrebujeme nastaviť písmo pre nadpis, potom pre selektor h1, ako je znázornené na príklade, nastavíme vlastnosť font-family s názvom načítaného písma. Pri starších verziách IE uvádzame záložné odkazy oddelené čiarkami. V tomto prípade bude titulné písmo „Comic Sans MS“, pretože IE8 a nižšie nepodporujú formát TTF.
Výsledok tohto príkladu je znázornený na obr. jeden.
Ryža. 1. Hlavička so stiahnutým písmom
Čo keď potrebujete ozdobné písmo v IE8? Našťastie @ font-face vám umožňuje zahrnúť viacero súborov písem rôznych formátov súčasne. Prehliadač musí vybrať iba ten správny. Univerzálne riešenie, ktoré funguje vo všetkých prehliadačoch, sa teda zameriava na prevod existujúceho formátu TTF na EOT a následné prepojenie oboch súborov.
Na konverziu existuje niekoľko online služieb, ktoré vám umožňujú stiahnuť súbor TTF a získať na výstupe súbor EOT. Väčšina týchto služieb má bohužiaľ rovnaký problém - súbor dostaneme, ale ruský jazyk v ňom nie je podporovaný. Výsledkom je, že požadovaný výsledok sa nedosiahne, prevod je nesprávny. Medzi webmi, ktoré som skontroloval, bol jeden, ktorý v IE správne zobrazoval text.
Prejdite na tento web, načítajte súbor TTF a stlačte tlačidlo „Previesť TTF na EOT“, potom výsledný súbor uložíme do priečinka písem. V štýloch zostáva malý trik, ktorý prinúti rôzne prehliadače načítať písmo v správnom formáte. Za týmto účelom pridajte dva parametre src. Prvý ukazuje na súbor EOT a je pre staršie verzie IE. Druhý parameter src musí obsahovať dve adresy oddelené čiarkami, z ktorých jedna ukazuje na súbor TTF. Faktom je, že verzia IE 8.0 a staršia nerozumie čiarke v parametri src, a preto bude parameter úplne ignorovať. Môže existovať niekoľko možností pravopisu, napríklad opakovať adresu URL, zadať názov písma v miestnom parametri alebo napísať neexistujúce písmo celkom. Ak prehliadač nemôže načítať takéto písmo, prejde na druhé miesto v zozname a my ho máme napísané správne. Prijateľné spôsoby písania.
src: url (fonty / pompadur.ttf), url (fonty / pompadur.ttf);
src: local (pompadur), url (fonts / pompadur.ttf);
src: local ("bla bla"), url (fonts / pompadur.ttf);
V príklade 2 je zobrazená funkčná možnosť pripojenia písma pre všetky verzie prehliadačov.
Príklad 2. Pripojenie EOT
HTML5 CSS3 IE Cr Op Sa Fx
Moderný prvok politického procesu
Politické učenie Montesquieu v skutočnosti vedie kontinentálno-európsky typ politickej kultúry, čo sa odrazilo v dielach Michelsa.
Pokiaľ ide o iOS, zdá sa mi, že nemá veľký význam vytvárať a sťahovať samostatné písmo vo formáte SVG. Publikum stránok, ktoré si ho prezerajú cez iOS, je stále malé, okrem toho sa pokúšajú uľahčiť verziu webu pre mobilné zariadenia a nie je žiaduce sťahovať ďalších niekoľko desiatok kilobajtov.
Webové písma Google
Pohodlnú službu, ktorá preberá rutinu podpory rôznych formátov písma a verzií prehliadača, nájdete na www.google.com/webfonts... Napriek tomu, že v zbierke je relatívne málo rôznych písem (je ich niekoľko desiatok), všetky sú veľmi kvalitné a voľne použiteľné na webových stránkach.
Pred výberom písma prepnite hodnotu Script na azbuku, potom sa vám zobrazí zoznam písem, ktoré podporujú ruštinu (obr. 2).
Ryža. 2. Výber písem vo webových písmach Google
Písmo, ktoré sa vám páči, by ste mali najskôr pridať do zbierky kliknutím na tlačidlo „Pridať do zbierky“ a potom na tlačidlo „Použiť“ v pravom dolnom rohu obrazovky. Na ďalšej strane (obr. 3) si konečne môžete vybrať potrebné fonty. Malo by byť zrejmé, že písmo môže obsahovať niekoľko štýlov a každý z nich zvyšuje objem stiahnutých súborov.
Ryža. 3. Písma načítané na stránke
Vybraté písma môžete pripojiť jedným z troch spôsobov; pridaný kód je možné skopírovať na stránku.
1. Prostredníctvom živlu ... Riadok bude vyzerať nasledovne.
2. Prostredníctvom pravidla @import. Tento riadok vložíme do nášho súboru CSS úplne hore.
@import url (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);
3. Prostredníctvom JavaScriptu.
V zásade sú všetky cesty rovnaké, preto si vyberte podľa svojich preferencií.
Výhody používania tejto služby sú nasledujúce.
- Písma sú voľne použiteľné, nemusíte za ne platiť.
- Ponúkané písma sú „naostrené“ na prezeranie na obrazovke, súbory sú optimalizované a zaberajú relatívne malý objem.
- Prehliadač sa detekuje automaticky a zobrazí sa mu písmo v požadovanom formáte.
Jednou z hlavných výhod služby je, že písma sú uložené vo formátoch TTF, EOT, WOFF, SVG a načítajú sa po kontrole prehliadača. Formát EOT bude teda k dispozícii iba pre staršie verzie IE.
Je na vás, či použijete Webové písma Google alebo nie. Ak ste tam nenašli vhodné písmo, vždy môžete pripojiť obľúbené a rozšírené TTF. Navyše je podporovaný najnovšími verziami všetkých populárnych prehliadačov.
Písmo hrá dôležitú úlohu v dizajne webu, môže zdôrazniť všeobecný štýl a pomôcť používateľovi orientovať sa v textovom obsahu. Hľadanie bezplatných písem a následné prepojenie zväzku súborov pre rôzne prehliadače nie je potešujúce, ale existuje východisko - písma z programu Google Fonts.
Nájdenie správneho písma v službe Google Fonts
Prejdeme k samotnej službe písem Google a pozrieme sa na jej možnosti.
V ľavom (bočnom) paneli môžete konfigurovať parametre filtrovania písma a hlavne vybrať, či patrí do azbuky alebo latinky.
V hornej časti môžete zmeniť zobrazenie ukážkového textu vo forme: slovo, veta, odsek, plagát. Zmeňte veľkosť písma a namiesto demo verzie zadajte svoj vlastný text.
Pripojenie písma z Google Fonts
Potom, čo ste vybrali požadované písmo, kliknite na tlačidlo „rýchle použitie“ (pozri obrázok nižšie)
Na stránke pripojenia písma musíte vybrať:
1. Štýly písma, tučné, kurzíva atď. Príliš netaktujte, vyberte si len to najnutnejšie, pretože to všetko ovplyvňuje rýchlosť načítania písma a podľa toho aj rýchlosť načítania textu na váš web. Postupujte podľa indikátorov snímača vpravo (bod 5 na obrázku)
2. Vyberte, aké znaky potrebujete v tomto písme (hlavne latinka a azbuka).
3. Skopírujte kód značky odkazu do bloku HEAD
4. Deklaráciu písma používame v štýloch uvedených v odseku 4 (pozri obrázok)
