A Google Web Fonts betűtípusok hozzáadása WordPress témában. Hogyan kell csatlakoztatni a betűtípust a Google Betűtípusokból? Betűtípusok csatlakoztatása a Google Fonts CSS-ből

Hogy megtudja mindent magad - nem könnyű, de nagyon érdekes. Ha legalább egy felszínes elképzelése van arról, hogy az oldal működik, akkor jobb, ha magad megvalósíthatod a projektet. Ugyanakkor nem csak egy csomó pénzt takarít meg, hanem sok "zseton", titkok, stb. A Google betűtípusok általában nem vonzza a figyelmet, bár köszönjük nekik egy blog lehet érdekesebbé válhat.

Szolgáltatás

Hosszú ideig a web betűtípusok nagy szolgáltatása megjelent az interneten. Ezt a Google fejlesztette ki. A felhasználók ingyenesen használhatják. Annak ellenére, hogy az ilyen típusú beállítás nem tekinthető Superernek, még mindig vannak olyan emberek, akik hibákat tettek, és nem tudtak megbirkózni a szolgáltatással.

Ehhez egy egyszerű kialakítást terveztek kifejezetten. Most a Google Betűtípusok betűtípusai megkönnyebbültek, és a látogatók száma nőtt. A könyvtár bővült. Tavaly egy új szolgáltatást tartottak, amely sokat gyűjtött pozitív visszajelzést. Most az emberek könnyebbé váltak a betűtípusok csatlakoztatásához a webhelyeikhez, és megtekinthetik őket.

Megjelenés

Tehát azok számára, akik soha nem voltak a helyszínen a régi design, akkor általános képet kell készítenie a változásokról. A múltban a szolgáltatás nagyon masszívan nézett ki. Mindenhol vastag keretek voltak, a kék fülbemászó gombok, a grafika nem volt a legmagasabb engedély. Mindez jelentősen befolyásolta a látogatót.

Most a fejlesztők az anyagtervezésre összpontosítottak. Minden megszerzett kifinomult funkció. Megjelenés "Könnyebb" lett. A finom animáció, az interaktivitás észrevehetővé vált. Semmi más nem zavarja a figyelmet a kívánt Google Fonts betűtípus kiválasztásáról.

Az erőforrás kényelmes adaptációja volt mobil eszközök. Természetesen az ilyen változás nem sokkal észrevehető az innovációk hátterében, de figyelembe véve a hibákat előző verzió Ez lesz a "Manna mennyei" lelkes felhasználóinak.

Lehetőség

Gyakran hasonló szolgáltatásokat használnak a tervezők. A tapasztalatuk és a szakmaiságuk ellenére a vizualizációval is dolgoznak. Az újratervezés több hasonló funkciót nyújtott be, amely lehetővé tenné, hogy előre egyesítse, hogy mi lesz szükség későbbi megvalósításához a projektben.

Ezért a probléma, hogy az egyik betűtípus kombinálva van egy másik színnel és a harmadik háttérrel, eltűnt. A cég több eszközt és egy palettát adott hozzá univerzális hangokkal, ami lehetővé tenné a kísérletezést, és megtudja, hogy egy vagy másik betűtípus hogyan fog egy bizonyos színben.

Kiválasztott

A Google Fonts Fonts szolgáltatás a kiválasztott opciók használatával biztosítja a felhasználókat. Egy speciális lapon egy olyan stílus, amelyet a fejlesztő javasol, összegyűjti. Ezeket a gyűjteményeket a többiek között osztják ki. Ezeket a Google és a harmadik féltől származó ügynökségek szakértői dolgoznak ki. A legtöbbjüknek van egy bizonyos stílusa és különleges filozófia.

Kilátás

Az egyik fontos változás közvetlenül érintette a betűtípusok választását. Magától értetődik, hogy korábban a felhasználó látta néhány rajzot további gombokkal és egy nagy kék, amely hozzáadott egy betűtípust a gyűjteményhez. Általában ez az opció jól néz ki, de nem mindig volt elég a doboz jó engedély Képek a stílus, és ezért határozottan meghatározzák, hogy a betűtípus hogyan fog kinézni, nehéz volt.

Volt kérdések és ezek a további gombok, amelyek kevéssé ismertek az első pillantásra. Szükséges volt, hogy elhozzák őket, vagy használhatják őket. Most már többé-kevésbé világossá vált. További funkciók vannak:

Válasszon egy adott javaslatot, bekezdést vagy saját szöveges elemét.
Betűtípus telített kísérletek.
A méretek gyors beállítása csúszkával.

Egyébként a Google betűtípusok méretének változása alkalmazkodóképessé vált, mivel csak egy példa megváltozott, és nem minden az oldalon. BAN BEN régi verzió A felhasználók átkerülhetnek az oldal egyik széléről a másikra, és az újonnan csak a szabályozott példában maradsz.

Kapcsolat

Ha készen áll a szolgáltatás használatára, megpróbálhatja betűtípusokat csatlakozni az erőforráshoz. A linkek megszerzésének folyamata univerzális. A CMS rendszertől függően problémák merülhetnek fel. Mindegyik saját módjait használja. Ezért különböző projekteknek kell kiválasztani az egyes lehetőségeket.

Megnézzük, hogyan kaphatunk egy linket a Google betűtípusok csatlakoztatásához. El kell mennie a Google Betűtípusok hivatalos honlapjához. Ott megtekintheti a stílusok katalógusát, és válassza ki a legjobb ruhákat. Ehhez mellette kattintson a "Plusik" gombra. Miután a betűtípus hozzáadódik az oldal alján található speciális blokkhoz.

Kattintson erre a készülékre, majd konfigurálja azt. Itt kiválaszthatja a feliratot és a szükséges ábécét. Ha szüksége van a Google Fonts Cyrillicra, akkor jelölje meg a cirill sztringet. A kapcsolat kialakítása után. Ugyanabban az ablakban található a Beágyazás fülön. Elég csak azért, hogy másolja, vagy használja a teljes HTML kódot.

Általában a webhelybeállításokban van egy betűtípus és színek. Vannak standard opciók, és bővíthető. Külön lehetőségük van a Google betűtípusok számára. Ha akkor kell letölteni a betűtípusokat a Supreme Webfonts plugin segítségével.

Népszerű lehetőségek

Nehéz, természetesen megítélni, hogy milyen stílusok vannak, különösen a különböző témakörök számára. A webhely létrehozásakor ne feledje, hogy nem tetszik neked, de a közönséged. Ezért jobb, ha megnézzük a versenytársak helyeit.

Általában kereskedelmi források esetén senki sem zavarja a stílusokat. Végtére is, ha látja a betűtípust Google Chrome. Az online áruházban valószínűleg nem figyelni rá. De ha van egy blogod, akkor valószínűleg valami, amit tudsz, és valami, az ellenkező, bosszantó.

A Google Fonts számos gyűjteményt készített, amelyekben népszerű stílusok vannak. Például a Lobster Love használni az egyéni blokkok a szövegben. Nehéz elolvasni, ha az egész cikk ilyen merész dőlt. De jól néz ki, és idézetek.

A Bad Script a blogok számára is lehetőség. A kurzív típus nehéz, hogy olvassa el a nagy szöveges tömböket, de a fő ötletet feloszthatja. A stílus utánozza kézírásos kézírást. Jura Normal 400 egy érdekes lehetőség a cirill. A szerző azt állítja, hogy ez az Eurostil az Sens Serip családból. Nagyon jónak tűnik, és több változata van.

A WebFonts a harmadik fél betűkészleteinek használatának technológiája a weboldalán. Egy példa:

Ha indul a forrás, a font tag-ben vezették be 1995-ben, és már 1996-ban egy szoftver definíció volt írva, hogy CSS. A CSS 2.0 verziójától kezdve a betűtípus szintézise bevezetésre került, és a böngészők szintézise, \u200b\u200bde mégis még mindig népszerű, és most a régi és irreleváns, azaz nem volt támogatta a betűtípus betöltését, amely megakadályozta a betűtípusok gyors fejlődését a honlapján.

BAN BEN modern internet A web betűtípusok hosszú távú dolog. Különböző helyszíneken mindenféle betűtípust használhatunk, amelyek viszont nem szerepelnek egy adott operációs rendszer kínálatában, de van egy nemkívánatos mellékhatás, amelyet ma beszélünk és beszélünk.

Fájlformátumok

A betűtípusok csatlakoztatásához a CSS szoftver beillesztését használják, az úgynevezett @ -evilo. Zokogás. egyszerű alak @ Font-face egy ilyen nyilatkozat. Ez így néz ki:

/ * Kijelentse meg a betűtípus * / @ betűtípus-face (font-face: "Betűtípus"; SRC: URL ("PATH / UP / IT");) / * Alkalmaz * / P (font-face: "Font név" , Arial;)
Ttf vagy OTF - a szokásos betűtípusfájl, de a kiszolgálóból a webhelynézési idő alatt betöltve;

A Woff egy nem védett OTF vagy TTF forrás archívum, talán a legjelentősebb formátum, amely a legnépszerűbb böngészők támogatja, és a WHOFF-ben lévő fájlok általában 2-2,5-szeresek könnyebbek, mint az eredeti;

EOT - bevezetett TT Opentype Archívum, amelynek védelmi mechanizmusa van, a régi böngészők támogatásához szükséges Internet böngésző. (az IE8-tel kezdődően, kivéve a TrueType görbéket, támogatott és PostScript);

SVG - a Safari böngésző támogatása.

Elkészült a megvalósításhoz (@ font-face) a webhely betűtípusához ma azonnal több formátumban kell lennie. Rájöttél, hogy vannak eltérések, valamint nincsenek egyfajta operációs rendszer. A betűkészletek sok sokat, de a beton csak egy adott böngészőben dolgozik. Ami ezeket a legtöbb formátumot illeti, miért kell meghatározni őket annyira, ha csatlakozik, akkor szükség van arra, hogy a webhely böngésző támogatásához szükségesek legyenek.

@ Font-Face (Font-Family: "Ashift_Name"; SRC: URL ("file_name_shift.eot"); src: URL ("file_file_shift.eot? # #" Beágyazott-opentype "), URL (" NAME_SHIFT .WOFF ") FORMAT (" WOFF "), URL (" file_shift.ttf ") formátum (" True_shift.TF ") formátum (" TrueType "), URL (" file_fail_name.svg # dsnotereGular ") formátum (" svg "); Betűtípus: Normál; betűtípus -style: Normál;)
Ha a fájl helyett a titkosított kódot szeretné használni, ebben az esetben a Base64 segítséget nyújt, amely ugyanazon elven és képekkel működik, azonban a régi, azaz a base64-nek nem kerül feldolgozásra.

@ Font-Face (font-family: "Ashift_Name"; src: URL ("file_name_shift.eot");) @ font-face (font-family: "Ashift_Name"; src: URL (adatok: font / whoff, der) UTF-8, BASE64, DATA) formátum ("Woff"), URL (adatok: font / truetype, Charset \u003d UTF-8, BASE64, DATA) formátum ("TrueType"), URL ("file_name_svg #file_shot_name") formátum ( "Svg"); Betűtípus: Normál; Font-Style: Normál;)

Beágyazott opentype?

Amint észreveszed, az IE plug-ineket tartalmaz egy vonalat egy ilyen paraméterrel:

SRC: URL ("FILE_FILE_SEOT? # #EFIX") formátum ("Beágyazott-opentype")
A klasszikus verzióban így kellett megadnunk veled:

SRC: URL ("file_shift.eot") formátum ("Beágyazott-opentype")
De egy szimbólum hozzáadásával "?" A betűtípus formátum után erőszakkal meghatároztuk a böngészőt, hogy ne olvassa el a következő jelzési formátumot ("Beágyazott-opentype"). Az Internet Explorer támogatja a betűtípusok beágyazását az úgynevezett Cégbe ágyazott opentype szabványon keresztül, az IE 4.0 verzióval kezdődően. Digitális jogkezelési módszert használ, hogy megakadályozza az engedélyre érvényes betűtípusokat.

Mi van, ha a betűtípus nem támogatja a böngészőben?

Hosszú idővel ezelőtt a bypass utak már feltaláltak, az úgynevezett "mankók" a betűtípus megjelenítéséhez. Vannak olyan esetek, amikor a betűtípust csak SVG formátumban tervezték, vagy csak TTF formátumban.

1. A régi napokban a fejlesztők csatlakoztatták a képet, ami viszont a szöveg volt vizuális szerkesztő. Azonban most rossz hangzásnak számít, mert a támogatást előre jelzik (újra meg kell nyitnia a szerkesztőt a kép szövegének megváltoztatásához), illetve a felhasználó nem tudja átmásolni a szöveget a képről.

2. Gyakori a vaku megoldások használata.

3. Egy másik megoldás javaScript használatávalA szöveg cseréje VML (Internet Explorer) vagy SVG (minden más böngésző számára).

Milyen problémák merülhetnek fel?

A böngésző megpróbálja szinkronizálni a betűtípus betöltését, megpróbálja elrejteni a szöveget, vagyis, hogy láthatatlanná váljon, amíg a betűtípus betartása nem töltötte be. Ezt a hatást FOIT, a "fehér vaku" hatása.

Vakuhatás

Foit hatása böngészők, mint a Safari, Chrome, Opera, Firefox hajlamos elrejteni a szöveget, legfeljebb 30 másodpercig, mielőtt megtagadta, hogy egy font, amely után az alapértelmezett betűtípus van beállítva.

Példa arra, hogy a betűtípus betartja:

Mindazonáltal 2,7 másodperc hosszú ideig!

Mit lehet tenni?

Kezdetben a megközelítés az volt, hogy a font file konverzió URIS adatokat úgy, hogy azok a betűtípusok is, amelyet közvetlenül az betűtípuscsaládból meghatározásokat a CSS fájlban. A CSS-fájl letöltésével aszinkron módon garantálhatja, hogy a böngésző azonnal megadja az oldalt az egyéni betűtípusok segítségével, és az új betűtípusokat a CSS betöltésekor használják.

Azonban bármilyen kísérletben van mellékhatás.

Kezdetben Bram Stein egyéni betűtípust használt, de a betűtípust betöltötte, a "villogás" történt, a példában 0,7 másodperc:

Röviden, a villogás akkor fordul elő, ha a böngésző megpróbálja megjeleníteni a betűtípust a betűtípussal, és alkalmazza azt a HTML-re. A betűtípus a nyilatkozat @ betűtípus-arca, amely még mindig nem volt betöltve.

Bram Stein megmutatta, hogyan kell csatlakoztatni a betűtípus helyesen, hogy kifejlesztett egy script, alternatívát Google aszinkron font betöltése, ez egy fontfaceobserver script.

Próbál

Elemzés

Szabványos kapcsolat a Google-tól

Őszintén szólva, több betűtípust használva a webhelyen kifejezetten lassíthatja a webhely terhelési sebességét, ezáltal növelve a teljes terhelési időt. A Google Fonts API lehetővé teszi, hogy gyorsan hozzáadjon egy betűtípust az oldalhoz a betűtípus-generátor segítségével, ezáltal gyorsan megtervezi webhelyét. Mindazonáltal emlékezni kell a fúvás hatására. Teljes terhelési idő - 322 ms.

Webes betűtípus-betöltő a Google-tól

Web betűtípus Loader - JavaScript könyvtár korszerű munka API, a könyvtár, amely ad nekünk több beleszólásuk a betűtípus töltése, mint a normál Google Fonts API. A szkript lehetővé teszi számunkra, hogy sok betűtípust használjunk, egymás után vagy aszinkronban. A standard kapcsolattal ellentétben a standard betűtípusú szöveg a gyenge csatlakozásokon jelenik meg, amíg a betűtípus betartja.
Teljes terhelési idő: 1132 ms

Fontfaceobserver

FontFaceObserver egy JavaScript könyvtár (5 KB), egy úgynevezett bootter kompatibilis minden font internetes szolgáltatást. A script lehetővé teszi számunkra, hogy jelezzék, hogy a font betöltött vagy sem, lehetővé teszi, hogy nyomon kövesse az esemény letöltés után, és akár a betűtípus terhelést. Teljes terhelési idő: 159 ms

A szkript használata.

A Google betűtípusok az egyik legjobb erőforrás ingyenes webes betűtípusokkal, és a Google számos módon adhatja meg azokat a webhelyére. Sajnos egyikük sem tartalmaz népszerű Wordpress motorot. Ez azt jelenti, hogy be kell használniuk a bővítményeket, amelyek sok, vagy csomagolják a kezét, a kóddal.

Jó hír az, hogy bármilyen betűtípust telepíthet google könyvtárak Szinte bármilyen téma a WordPress anélkül, hogy sok baj lenne. Hogy pontosan mit fogunk tanítani ma.

Két lehetőség van - csatlakoztassa a plugint, vagy egy kicsit átszúrja a funkciók.php fájlban.

De először szeretném felsorolni a Google betűtípusok előnyeit és hátrányait, hogy végül úgy döntenek, hogy a projektjeinkben használják őket, vagy sem.

Jó és rossz Google web betűtípusok

Ami a webes betűtípusokat illeti, a Google az egyik jobb lehetőségek a teljesítmény szempontjából . Mindegyik a könnyű kialakítás és a gyorsítótárazat miatt. A látogatóknak nem várhatják a Google betűtípusokat, ha nemrégiben meglátogatták azokat a webhelyet, amelyeken használták őket. A népszerű betűtípusok, mint például a nyílt SANS javíthatja webhely teljesítményét a letöltési idő csökkentésével.

Egy másik jellemző az A Google lehetővé teszi a betűtípusok feltöltését Tehát használhatja őket az elrendezésekben.

És végül a platform teljesen ingyenes . A betűtípusok használatához csak be kell jelentkeznie vagy el kell kezdene postafiók A Gmailen (és aki ma nincs e-mailje a gmailre?).

Hibák Ezt megadhatja a Google-Betűtípusok kiválasztása kicsi Sokan közülük hasonlóak egymáshoz. Sok időt kell töltenie a keresésben, hogy megtalálja a tisztességes, eredeti betűtípust. Fontss a cirillikus nagyon kevés.

Ezenkívül szokásos biztonsági problémák - Meg kell adnia néhány személyes adatot, amikor betűtípusokat telepít a Google-ból a webhelyén.

A Google betűtípusok telepítése WordPress Plugins használatával

Ha bővítményeket keres, az első dolog, amit a keresési eredményekben látsz - becsenyék WP Google betűtípusok és egyszerű Google Web Betűtípusok . Ezek valójában a két legjobb bővítmény.

A bővítmények nem az ideális megoldás -ért a Google telepítése- WordPress WebsiteStos site - nemcsak a szempontból a teljesítmény, hanem azért is, mert a beépülő modulok nem teszi lehetővé, hogy kiválasztanak bizonyos szöveget tartalmaznak. Mindazonáltal, ha Ön vagy az ügyfelek biztosak abban, hogy jobb, ha a bővítményeket használni, majd nézd meg ezt a két lehetőséget.

Ez a plugin lehetővé teszi, hogy bizonyos elemekre, például H1 címsorokra, bekezdésekre és idézőjelekre összpontosítson. Az egyéni CSS opciót is megkapja a kiválasztott stílusok további munkájához. Adja hozzá és állítsa be a Betűtípusokat a Google-ból a WordPress webhelyen Ezzel a bővítményrel könnyen.

Az Easy Google Webes betűtípusok igazolják a nevét, és a Google Fonts Super könnyebben történő telepítését még a kezdőknek is. Használhatja a élőkép előnézeti funkció megtekintésére, tesztelése és optimalizálása betűtípusok elhagyása nélkül a honlapon, valamint hozzon létre saját betűtípus szabályok írása nélkül egy sor kódot.

A Google betűtípusok telepítésének megfelelő módja a WordPress sablonba

A végén eljutunk a funkciók.php fájl megnyitásához és egy kóddal. Mielőtt ezt megtenné, meg kell választania egy betűtípust a Google Könyvtárból. Például próbáljunk nagyon népszerűvé tenni Nyitott sans..

Ezután ki kell választania a betűtípust - normál, zsíros vagy dőlt. Meg tudod csinálni magad :)

Miután kiválasztotta a stílusokat, a Google megadja Önnek egy töredékkódot. Úgy néz ki, mint ez:

Ezenkívül CSS-stílusunk van:

font-Család: "Nyitott sans", sans-serif;

Most itt az ideje, hogy nyissa meg a functions.php fájlt (a fájl elérési útját: WP-content / themes / Yourtheme). A fájl végén adjon hozzá egy új funkciót:

funkció teher_fonts ()
{
Wp_register_style ("et-googofonts",
"http://fonts.googleapis.com/css?family\u003dOpen+sans:300italic 400,500,300"); Wp_enqueue_style ("et-googofonts");
}
Add_ction ("wp_print_styles", "load_fonts");

Ennek a funkciónak a kulcsa a "WP_enqueue_style" parancs, amely a WordPress hívja az egyes oldalak fejlécében lévő betűtípus stílusát. Ha óvatosan néz ki, akkor töröljük a href \u003d és a rel link \u003d 'stylesheet' type'text / CSS ', a Google által megadott kódtól, és meg kell tennie ugyanezt, ha hozzá akarsz adni Egyéb Google betűtípus a webhelyén a WordPressen.

Mindössze annyit kell tennie, hogy megnyitja a fő CSS-fájlt, és helyezzen be egy stílus nyílt sans-ot. Itt vannak normális szabályok, ezért adjuk hozzá a következő kódot a stíluslapra, mentse és frissítheti:

test.
{
Fontos: Normál 1 "nyitott sans", sans-serif;
Szín: # 313131;
}

Ez a stílus az egész webhelyen fog működni. Az egyes szöveges töredékekhez egy másik stílust állíthat be:

Félkövér szöveg
{
Font: Bold 1em "Open Sans", Sans-Serif;
}

Ahogy láthatod, valójában minden nagyon egyszerű. Próbálja meg és ellenőrizze az eredményt :)

Az új webes technológiák és az indítások ellenére a közelmúltig hiányoztunk a gazdagok és gyönyörű web tipográfia.

Bár a fejhallgatók meglehetősen széles választéka van, csak a legtöbb számítógép által telepített és támogatott megfelelő betűtípusokat használhatunk - ezek a betűtípusok ismertek Biztonságos webes betűtípusok (Web-Safe Betűtípusok).

Webes tipográfia a nyomtatott nyomtatott ház ellen

A hagyományos média (újságok, magazinok, könyvek) tartalmának megteremtésekor a tipográfia használatában csak a kreatív lehetséges korlátok vannak.

De most a nyomtatott és virtuális fuvarozók közötti elválasztás csökken. Most @ font-face támogatja sok modern böngészők (beleértve az Internet Explorer-et Változatból IE4.0.).

Bevezetés a Google Font Api-hoz

A Google Font könyvtár és a Google Font API ingyenes webszolgáltatások GoogleEz biztosítja a webhely tulajdonosainak lehetőséget, hogy különböző betűtípusokat használjon egyszerű, kényelmes és hatékony módon.

Google Font Api - a niche új képviselője, amely magában foglalja Betűtípus., Typotheque. satöbbi.

Szóval menjünk be a felderítetlen potenciálba Google Font Api.

Mi a Google font API?

Sokat utazott az interneten, de számos webhelyen vagy blogon nem szabványos betűtípusokat láttál?

Tartsuk meg a nem szabványos betűtípusokat, amelyek nem a biztonságos ( Arial, Helvetica., Verdana., Grúzia. és Times New Roman.).

Google Font Api - Ez egy webes szolgáltatás, amely kiváló minőségű nyitott (nyílt forráskódú) betűtípusokat kínál, amelyek könnyen használhatók a tervezésben.

Reméljük betűtípusok gyűjteménye Továbbra is növekszik, hogy még nagyobb választéka van a különböző fejhallgatók közül.

A Google Font Api használatának előnyei

Ha még mindig eldönti, hogy használja-e Google Font Api, itt van néhány előnye.

HTML szöveg használata

A képek vagy cserék használatával ellentétben CSS. Háttérkép, @ font-face, mint megoldások egy vonzóbb webes tipográfia, kedvezőbb a terv szempontjából SEO..

Ezenkívül nem kell megváltoztatnia a meglévő tartalmat - csak frissíti CSS. Táblázatok.

Elérhetőség

Ahogy használod Html Szöveg, nem kép vagy háttér CSS.Ez nem érinti az embereket a képernyőn megjelenő olvasáshoz.

Megbízható infrastruktúra és csökkentett terhelés a szerveren

Mivel letöltötte a @ font-face megbízható infrastruktúrát használ GoogleBiztos lehet benne, hogy a betűtípus-fájl szolgáltatás gyorsan lesz, és csökkentheti a terhelést a saját szerveren.

A Google Font Api használata

Nem kell professzionális webfejlesztőnek lennie Google Font Api. Mindössze annyit kell tennie, hogy hozzáad egy stíluslapos link elemet az oldalához, majd elkezdheti használni ezt a betűtípust CSS..

Itt van egy általános felhasználási folyamat Google Font Api:

1. lépés: Link hozzáadása egy stíluslapra a kiválasztott betűtípussal

Elkezdeni menni betűtípusok gyűjteménye GoogleLátni, hogy mely betűtípusok állnak rendelkezésre. Itt van a fő formátum egy adott betűtípus bevonására:

Ha egy alkalommal betűtípusra van szüksége, akkor az egyik sor stílusait deklarálhatja.

3. lépés: Mindig van egy tartalék opció.

Lehet, hogy nem figyelhet arra a tényre, hogy az előző kódfragmensekben a Serif-t tartalék betűtípusként használtuk. Ez történik a váratlan eredmények elkerülése érdekében. Ez azt jelenti, hogy ha a szerverekkel Google Valami rossz, a böngésző használhatja a szabványos betűtípust Serif.. Legyen egy szokás, ha a betűtípus-face attribútumot használja, nem számít, hogy használja-e @ font-face-t, vagy sem, mindig adja meg a további betűtípusokat - ezt a technológiát betűtípus-készleteknek nevezik.

Példa a Google Font API használatára

Másolja és illessze be a következő blokkkódot az Önbe Html Dokumentum, mentse el, majd nyissa meg a böngészőjét.

Javasoljuk, hogy teszteljük Html Dokumentum különböző böngészőkben, így láthatja a böngésző különbségeket (vagy távollétüket).

Kísérletezhet különböző betűtípusokkal, de például a homár fülhallgatót használtuk.

< html >

< head >

< link rel = "stylesheet" type = "text/css" href \u003d. "http://fonts.googleapis.com/css?family\u003dlobster">

< / head >

< body >

< h1 > Hat módosítás szép!< / h1 >

< / body >

< / html >

Eredmény:

A további betűtípusok használata a Google Font API-val

Tegyük fel, hogy három betűtípust kell Google Font könyvtár.. Ne tegyen sok kérést. Több kérés növeli a számot Http. Kérelmek. Kevesebb mennyiség Http. A kérések csökkenti a weboldal válaszidőt.

A stíluslap link címkéinek sokasága helyett a következő formátumot használja az egyik stíluslap link címke HREF tulajdonságának.

Az alábbi példa betölti az összes három betűtípust ( VOLLKORN., Yanone. és Droid sans.) Egy kérés alkalmazásával.

VOLLKORN. | Yanone. | Droid + Sans.

Most használhatja ezeket a három betűtípust a stílusodban.

Mit kell fordítania

Külön betűtípusok használata | szóközök nélkül. Figyeljen a + betűtípus használatára Droid sans.. Használja a + szimbólumot a betűtípus nevében egy hely helyett.

Tipp: Használva is nagyszámú Az egyik lekérdezésben betűtípusok növelhetik az oldal válaszidejét. Töltse be azokat a betűtípusokat, amelyeket tényleg szükséged van. Légy konzervatív.

Súly és stílus Fonts Betütipusok betűtípus API

A súly betűtípusok is különböző súly / stílus paraméterek is vannak. Használja őket, add hozzá a vastagbél betűtípus nevét (:), majd adja meg a stílust és a súlyt.

Az alábbi példában jelezzük bátor. és félkövér dőlt -ért VOLLKORN., I. dőlt -ért Inconsolata..

http: //fonts.googleapis.com/css?family\u003dvollkorn: b.,kETTŐS| INCONSOLATA: ÉN.| Droid + sans

Mit kell fordítania

Használja a vastagbél (:) a betűtípus nevét követően, majd adja meg a stílus nevét (azaz a bolditalic) vagy a megfelelő csökkentés (azaz Bi). Ha sok betűtípusra van szüksége, oszd meg őket vesszővel (,) szóköz nélkül.

A Google Font API vonzóbbá teszi a webes tipográfia

A web design iparág aktívan keresi a megoldást, hogy a régi probléma választotta, és a webes betűtípusok, és mint, @ font-face válasz.

Persze, vannak különböző bővítmények használata érdekében a Google Web Fonts betűtípusok a WordPress oldal, de ha a fejlődő saját téma, akkor lehet, hogy lezárja a tipográfia vele te, megkerülve a dugó. Az alábbiakban megmutatjuk, hogyan kell használni a Google Web betűtípusokat a témában.

Először menjünk az oldalra Google web betűtípusok. És válassza ki azt a betűtípust, amelyet a témában kell alkalmazni. A bal oldalon található speciális eszközök segítségével szűkítheti a keresési területet, mivel a betűtípusok nagyon sokat vannak. Tudtam, hogy van egy kövér serif betűtípusa a címsorokhoz és a blognevekhez, így a kategóriák legördülő menüjét választottam, majd jobbra mozgatta a vastagság csúszkát (vastagság).

Ennek eredményeként az általam kínált 617 lehetőségek zökkenőmentesen csökkentek. 5-re van szükséged előnézet Fonts - Láthatja, hogy a szó hogyan fog kinézni, ajánlat, szöveg bekezdés vagy poszter a kiválasztott betűtípusban. Kiválaszthat egy előre definiált szöveget, megadhatja saját szövegét, válassza ki a kívánt betűméretet.

Miután megtalálta a webhelyén használni kívánt betűtípust, egyszerűen kattintson a Hozzáadás gombra.

Tucatnyi betűtípust adhat hozzá a gyűjteményéhez. Ez azonban nem mindig szükséges. Ha meg tudod csinálni, ez nem jelenti azt, hogy meg kell tenned. Próbáljon meg maximum három betűtípust korlátozni. És még jobb kettő. Az okokból még mindig szeretnék egy elavult webes biztonságos betűtípust használni a fő szöveges szöveghez, és menthetek webes betűtípusokat a címsorokhoz és más elemekhez, amelyek különleges kifejezést vagy figyelmet igényelnek magának. Végrevállalás a betűtípusok tisztességéről - ne használjon fülbemászó betűtípust, ha a látogatók nem tudják szétszerelni, hogy mit írtak.

Ha hozzáadja a betűtípusokat a gyűjteményhez, akkor a webhely alján található kék szakaszban látja őket. Miután a gyűjtemény megjelenik a használni kívánt betűtípusok, egyszerűen kattintson a Használat gombra.

Ezután átmegy a képernyőre, amelyen négy lépésből álló utasítást fognak bemutatni. Ettől fogva megtudhatja, hogyan kell betűtípusokat használni. Ha szeretné letölteni a kiválasztott betűtípusokat, hogy használja őket egy grafikus szerkesztőben, hogy értékelje őket, vagy vonzó képernyőképet készítsen a screenshot.png-ről a témához, akkor csak az oldal tetején található letöltési gombra kattint. Ha csak a téma betűtípusát szeretné használni, akkor nem kell letöltenie a számítógépére.

Az első lépésben kiválaszthatja a dugaszolás stílusait és vastagságát. A második lépésben kiválaszthatja a csatlakoztatni kívánt karakterkészletet. Azt is értékelheti, hogy a betűtípusok gyűjteménye hogyan tükrözi az oldal betöltését.

Most megyünk a harmadik lépéshez, ami már nem olyan egyszerű, mint az előzőek. A harmadik lépésben megkapjuk a kódot, amit hozzá kell adnod a webhelyeinkhez - három különböző lehetőség. Kiválasztjuk a standard opciót - azonban kissé lesz kissé a Google utasításaiból annak érdekében, hogy támogassuk a kialakított módszereket a WordPress témákhoz. A standard verzió kódjában csak az URL-t másolja, amely a Link címke HREF attribútumának megfelelően van megadva.

Ezután nyissa meg a funkciók.php téma fájlt. Létrehozunk egy funkciót a CSS letöltéséhez, amelyet a mi témánkban fogunk használni:

Funkció GGL_LOAD_STYLES () () ()

Nézze meg a GGL előtagomat a funkciómtól? Ez az egyik sikeres WordPress Orvos. Mindig adjunk hozzá egy előtagot a WordPress funkcióinak nevéhez, hogy csökkentse a konfliktusok kockázatának kockázatát a témában, leányvállalaton vagy plug-inekben.

Most ebben a funkcióban regisztrálnunk kell a Google-tól kapott stílusainkat:

Funkció GGL_LOAD_STYLES () (ha (! IS_ADMIN ()) (WP_REGISTER_STYLE ("GoogleFont", "http://fonts.googleapis.com/css?family\u003dholtwood+one+sc|rouge+script");))

Használjuk a wp_register_style funkciót. Az első argumentum egy leíró, azaz Csökkentés, amelyet a kondenzunkban a jövőben fellebbezhetünk erre a stylist asztalra. A második argumentum a fájl elérési útja. A Google-utasítás harmadik lépésében kapott URL-t használjuk.

Ezután összekapcsoljuk alapvető stílusunkat a témánkhoz. Remélem, nem helyezte a Link címkét a fejléc fejrészébe? Ha igen, akkor menjen vissza a fájlba, és törölje ezt a kódot. Ezután csatlakoztassa a stílus táblázatban a funkciók.php fájlban:

Funkció GGL_LOALE_STYLES () (ha (! IS_ADMIN ()) (WP_REGISTER_STYLE ("GoogleFont", "http://fonts.googleapis.com/css?family\u003dhountwoodlewood+); wp_enqueue_style (" GGL) ", get_stylesheet_uri (), tömb (" GoogleFont "));))

A wp_enqueue_style funkciót használjuk. Ugyanazok az érvek, mint a wp_register_style. Először egy leírót kötünk a stylist asztalunkhoz. Ezután kapd meg az utat a stílus asztalunkhoz. Szerencsére a WordPress, akkor megkaphatja az utat a get_stylesheet_uri () funkción keresztül. Ezt követően a függőségeket jelezzük. A style.css fájlunk a Google Web Betűtípusok stílusától függ.

Végül a wp_enqueue_scripts horogot használjuk, hogy hívja a funkciót:

A funkciókkal.php fájl befejeződött. Most már elhagytuk az utolsó lépést a kiválasztott betűtípus használatához. Negyedik lépés B. a Google utasításai Megmutatja, hogy milyen értékeket kell adnunk a betűtípus-családi tulajdonhoz a betűtípusunk használatához. Azt akarom, hogy az összes fejlécet Holtwood ONE SC:

H1, H2, H3, H4, H5, H6 (Font-Family: "Holtwood One Sc", Serif;)

És szeretném leírni a webhelyről. Rouge Script:

Helyszíni leírás (font-family: "kerek szkript", kurzív;)

Minden! Nincs többé semmi sem! Hozzáadottad a Google Web Fonts betűtípusokat a WordPress témához. Használja őket felelős!