Et teada saada kõike ise - mitte lihtne, kuid väga huvitav. Kui teil on vähemalt pealiskaudne idee, kuidas sait töötab, siis on parem nende projekti ise rakendada. Samal ajal ei pääse sa lihtsalt raha raha, vaid ka õppida palju "kiipe", saladusi jne. Google fontide kasutamine tavaliselt ei meelita tähelepanu, kuigi tänu neile blogi võib muutuda huvitavamaks.
Teenus
Pikka aega ilmus internetis veebifontide suur teenus. See töötas välja Google. Kasutajad võiksid seda tasuta kasutada. Hoolimata asjaolust, et selle tüübi seadistus ei peeta superlejaks, on veel selliseid inimesi, kes tegid vigu ja ei suutnud teenusega toime tulla.
Selleks oli lihtne disain spetsiaalselt konstrueeritud. Nüüd töötage Google'i fontide fontidega lihtsamaks ja külastajate arv on suurenenud. Raamatukogu laiendatud. Eelmisel aastal toimus uus teenus, mis kogunes palju positiivne tagasiside. Nüüd inimesed on muutunud lihtsamaks ühendada fonte oma saitidele ja vaadata neid.
Välimus
Niisiis, neile, kes pole kunagi vana disainiga kohapeal olnud, peate muutustest üldise pildi tegema. Varem tundus teenus üsna massiliselt. Kõikjal olid paksud raamid, sinise meeldejäävad nupud, graafika ei olnud suurim luba. Kõik see on külastaja oluliselt mõjutanud.
Nüüd on arendajad keskendunud materiaalsele disainile. Kõik omandatud keerulised omadused. Välimus Ta sai "lihtsamaks". Peen animatsioon, interaktiivsus muutus märgatavaks. Midagi muud ei häiriks soovitud Google'i fontide fondi valikule tähelepanu.
Seal oli mugav kohandamine ressursi all mobiilseadmed. Loomulikult ei ole selline muutus uuenduste taustal palju märgatav, vaid võttes arvesse vigu eelmine versioon See on "manna taevase" innukate kasutajate jaoks.
Võimalus
Sageli sarnaseid teenuseid kasutavad disainerid. Vaatamata nende kogemustele ja professionaalsusele töötavad nad ka visualiseerimisega. Rediisija tutvustas sarnasemaid funktsioone, mis võimaldaksid teil kombineerida eelnevalt, mida on vaja rakendada hiljem oma projekti.
Seetõttu on probleem, kuidas üks font kombineeritakse erineva värvi ja kolmanda taustaga, kadus kadunud. Ettevõte lisas rohkem tööriistu ja paleti universaalsete toonidega, mis võimaldaks eksperimenteerida ja teada saada, kuidas üks või muu font vaatab konkreetse värvi.
Valitud
Google Fonte Fonte Service pakub kasutajatele valitud valikute kasutamist. Vahekaardil spetsiaalses vahekaardil on kogutud stiilide kogum, mida arendaja soovitab kasutada. Need kogud on teiste seas eraldatud. Neid on välja töötanud Google'i ja kolmanda osapoole asutuste eksperdid. Enamik neist on teatud stiil ja eriline filosoofia.
Vaade
Üks olulisi muudatusi mõjutasid otseselt fontide valikut. On arusaadav, et varasem kasutaja nägi mõned joonise lisanuppude ja suur sinine, mis lisas font kogumise. Üldiselt nägi see valik hea, kuid mitte alati kast oli piisav hea luba Pildid stiiliga ja seega määrata kindlasti, kuidas font näeb välja, oli raske.
Oli küsimusi ja neid täiendavaid nuppe, mis vähe olid tuntud esmapilgul. See oli vaja kas neile tuua või kasutada. Nüüd on see muutunud enam-vähem selgeks. On täiendavaid funktsioone:
- Valige konkreetne ettepanek, lõik või oma tekstielement.
- Fondi küllastumise katsed.
- Fast seadistus suurused kasutades liugurit.
Muide, Google'i fontide suuruse muutus on muutunud kohandatavaks, kuna ainult üks näide muutus ja mitte kõik lehel. Sisse vana versioon Kasutajaid võiks üle kanda ühest lehekülje servast teise ja uued jäävad lihtsalt reguleeritud näitele.
Ühendus
Kui olete valmis kasutama seda teenust, võite proovida ühendada fonte oma ressursiga. Linkide saamise protsess on universaalne. Probleemid võivad tekkida sõltuvalt teie CMS-süsteemist. Igaüks kasutab oma teed. Seetõttu peavad erinevate projektide jaoks valima individuaalsed valikud.
Me vaatame, kuidas saada linki Google'i fontide ühendamiseks. Sa pead minema Google'i fontide ametlikule veebisaidile. Seal sa vaatad kataloogi stiilide ja valida üks, mis kõige paremini sobib. Selleks klõpsa tema kõrval "Plusik". Pärast seda, kui font lisatakse lehe allosas spetsiaalse plokile.
Klõpsake sellel seadmel ja seadistage see. Siin saate valida pealdi ja vajalik tähestik. Kui vajate Google'i fontide kirillitsat, siis märgistage kirillitsat. Pärast linki moodustumist. Seda võib leida samas aknas asuvas vahekaardil. See on piisav lihtsalt selle kopeerimiseks või täieliku HTML-koodi abil.
Tavaliselt on saidi seaded on font ja värvid. On tavalisi võimalusi ja saate laiendada. Neil on Google'i fontide jaoks eraldi võimalus. Kui teil on vaja alla laadida fonte läbi Supreme Webfonts plugin.
Populaarsed valikud
Loomulikult on raske hinnata, millised stiilid on paremad, eriti saidi erinevate teemade jaoks. Teie saidi loomisel pidage meeles, et ta ei taha sulle meeldida, vaid teie publikule. Seetõttu on parem vaadata konkurentide saite.
Tavaliselt ei kommertsressursse keegi häirib stiile. Lõppude lõpuks, kui näete fondi sisse Google Chrome. Online poes, te ei ole tõenäoliselt tähelepanu pöörata sellele. Aga kui teil on blogi, siis tõenäoliselt midagi, mida sa võid meeldivad ja midagi vastupidi, häirib.
Google Fonte on valmistanud palju kogusid, kus on populaarseid stiile. Näiteks lobster armastus kasutada üksikute plokkide teksti. On raske lugeda, kui kogu artikkel on kirjutatud sellises julgetes kaldkirjas. Aga see tundub hea lisas ja hinnapakkumisi.
Bad Script on ka võimalus blogide jaoks. Kursiivne tüüp raske lugeda suur hulk teksti, kuid saate eraldada peamine idee. Stiil imiteerib käsitsi kirjutatud käekirja. JURA Normal 400 on kirillitsa huvitav valik. Autor väidab, et see on EUROSTIL SEN-SERIP-perekonnast. See tundub tõesti väga hea ja tal on mitu variante.
Webfonts on tehnoloogia kolmanda osapoole fontide kasutamise veebilehel. Üks näide:Kui alustate allikast, tutvustati fondi tag 1995. aastal ja juba 1996. aastal oli CSS-ile kirjutatud tarkvara määratlus. Alustades CSS 2.0 versioonist, tutvustati fondi sünteesi ja brauseri sünteesi, kuid siiski siiski populaarne ja nüüd on vana ja ebaoluline, st fontide laadimise toetamine, mis takistas fonte kiiret arengut oma veebisaidil.
Sisse kaasaegne internet Web fonte on pikaajaline asi. Erinevatel saitidel saame kasutada igasuguseid fonte, mis omakorda ei kuulu konkreetse operatsioonisüsteemi pakkumisse, kuid on ebasoovitav kõrvaltoime, mida me täna ja rääkida räägime.
Failivormingud
Fontide ühendamiseks kasutatakse tarkvara sisestamist CSS-is, nn @ -evilo. Niisiis, B. lihtne vorm @ Font-nägu on selline deklaratsioon. See näeb välja selline: / * Deklareerige font * / @ font-nägu (font-nägu: "fondi nimi"; SRC: URL ("Path / Up / IT");) / * Rakenda * / P (font-nägu: "Font nimi" , Aroom;)
TTF või OTF - tavaline fondifail, kuid serverist laaditud saidi vaatamise ajal;
Woff on kaitsmata OTF või TTF-i allika Arhiiv, võib-olla kõige olulisem vormingus, mida kõige populaarsemad brauserid toetavad ja failid Woffis tavaliselt 2-2,5 korda lihtsam kui originaal;
EOT - kasutusele TT OPENTYPE arhiiv, millel on kaitsemehhanismid, mis on vajalikud vanade brauserite toetamiseks Internet Explorer. (Alustades IE8-st, välja arvatud truetüübi kõverad, toetatud ja PostScript);
SVG - Toetada Safari brauserit.
Valmistatud rakendamiseks (@ font-nägu) saidi fondid täna peavad olema kohe mitmetes formaatides. Sa mõistsid, et seal on mõned erinevused, samuti ei ole ühte liiki operatsioonisüsteemid. Fondi formaate on üsna palju, kuid betoon töötab ainult konkreetses brauseris. Mis puudutab neid kõige rohkem formaadid, miks on vaja täpsustada neid nii palju, kui see on ühendatud, siis need on vaja saidi ristjuurdeerimiseks.
@ Font-nägu (font-perekond: "Ashift_name"; SRC: URL ("FILE_NAME_SHIFT.EOT"); SRC: URL ("FILE_FILE_SHIFIFT.EOT? #IEFIXIX") FORMAT ("Sisseehitatud-Opentype"), URL (fail nimi_shift .woff ") formaat (" Woff "), URL (" FILE_SHIFT.TTF ") Formaat (" TrueType "), URL (" FILE_FAIL_NAME.SVG # dsnotereregular ") formaadis (" SVG "); fondi kaal: normaalne; Font -Style: Normaalne;)
Kui soovite faili asemel kasutada krüpteeritud koodi, tuleb sel juhul base64 abi, mis töötab samal põhimõttel ja piltidega, kuid vana IE baasi64 puhul ei töödelda.
@ Font-nägu (font-perekond: "Ashift_name"; SRC: URL ("FILE_NAME_SHIFT.EOT");) @ font-nägu (font-perekond: "Ashift_name"; SRC: URL (andmed: font / woff; charset \u003d UTF-8; Base64, Data) vorming ("Woff"), URL (andmed: font / trueterüüp; Charset \u003d UTF-8; Base64, andmete) vorming ("TrueType"), URL ("File_NAME_SVG #File_Shot_Name") Formaat (" "SVG"); fondi kaal: normaalne; font-stiilis: normaalne;)
Sisseehitatud opentüüp?
Nagu te märgata, plug-in IE-l on sellise parameetriga joon:SRC: URL ("FILE_FILE_SEOT? #IEFIXIX") formaadis ("varjatud-opentüüp")
Klassikalises versioonis pidime teiega sel viisil täpsustama:
SRC: URL ("FILE_SHIFT.EOT") Formaat ("varjatud-opentontype")
Aga sümboli lisamisel "?" Pärast fondi formaadis täpsustame me sunniviisiliselt brauseri mitte lugeda järgmist märke - formaat ("varjatud-opentontype"). Internet Explorer toetab fonte kaasamist nn ettevõtte sisseehitatud Opentüübi standardi kaudu, alustades st 4.0 versioonist. Ta kasutab digitaalse õiguste haldamise meetodit, et vältida litsentsile kohaldatavate fonte.
Mis siis, kui fondi brauseris ei toetata?
Kaua aega tagasi leiutati möödasõidu teed juba nn "crutches", et kuvada font. On juhtumeid, kui font oli projekteeritud ainult SVG-vormingus või ainult TTF-vormingus.1. Vanadel päevadel ühendasid arendajad pildi, mis omakorda oli tekstis näidanud visuaalne redaktor. Kuid nüüd peetakse eeldatavaks halbaks tooniks halvaks tooniks (peate redaktorit uuesti avama pildi teksti muutmiseks), ei saa kasutaja teksti pildist teksti kopeerida.
2. Ka tavaline oli välgu lahenduste kasutamine.
3. Teine lahendus on javaScripti kasutamineTeksti asendamiseks VML-iga (Internet Explorer) või SVG (kõigi teiste brauserite jaoks).
Milliseid probleeme saab veel esineda?
Brauser püüab sünkroonida fontide laadimist, püüab seda teksti varjata, see tähendab, et see on nähtamatu, kuni font on laaditud. Seda toimet nimetatakse FOIT, "valge välk" mõju.Välgu mõju
FOIT efekt brauserites nagu safari, kroom, ooper, Firefox kipub teksti peitmiseks maksimaalselt 30 sekundi jooksul enne, kui keelduge fondi saamisest, pärast mida vaikimisi font on määratud.Näide sellest, kuidas font on laaditud:
Sellegipoolest on 2,7 sekundit pikka aega!
Mida saaks teha?
Esialgu oli lähenemine võimaldada fondifaili konverteerimist URI-andmetele, et neid fonte saab otseselt kaasata CSS-faili fontide perekonna määratlustesse. Allalaadides seda CSS-faili asünkroonset teed, saate garanteerida, et brauser annab lehel kohe teksti, kasutades kohandatud fondiid ja uusi fonte kasutataks niipea, kui CSS-i laaditakse.Kuid igal katses on kõrvaltoime.
Esialgu kasutas Bram Stein kohandatud fondi, kuid pärast tema fondi laadimist tekkis "Flicker", näiteks 0,7 sekundi näites:
Lühidalt öeldes tekib vilkumine siis, kui brauser üritab fontilt fontidelt näidata ja rakendada seda HTML-ile. Font defineeritud @ font-nägu deklaratsiooni, mis ei olnud veel laaditud.
Bram Stein näitas, kuidas ühendada fonte õigesti, see arendas skripti, alternatiivina Google'ile asünkroonse fondi laadimise jaoks, see on fontfaceobserver skript.
Üritama
Analüüs
Standardühendus Google'istAusalt, kasutades rohkem kui ühte fonti saidil, saate konkreetselt aeglustada saidi laadimiskiirust, suurendades seeläbi kogu koormuse aega. Google Fonte API võimaldab teil kiiresti lisada fondi, kasutades fontigeneraatorit, projekteerides sellega kiiresti teie veebisaidi. Siiski peate mäletama Foiti mõju. Kogu koormuse aeg - 322 ms.
Web Font Laadur Google'ist
Web Font Loader - JavaScript Library Appliga API-ga API-ga, raamatukogu, mis annab meile rohkem kontrolli fontide laadimise üle kui standardse Google fontide API-ga. Skript võimaldab meil kasutada paljusid fonte, laadides neid järjestikku või asünkroonselt. Erinevalt standardsest ühendusest kuvatakse nõrkade ühenduste standardfondiga tekst, kuni font on koormatud.
Kogu koormuse aeg: 1132 ms
Fontfaceobserver
Fontfaceobserver on JavaScript'i raamatukogu (5KB), nn saapja mis tahes fondi veebiteenusega ühilduv. Skript võimaldab meil meile teatada, kas font laaditakse või mitte, võimaldab teil pärast allalaadimist ja fontide laadimist jälgida sündmust. Kogu koormuse aja: 159 ms
Kasutades skripti.
Google Fonts on üks parimaid ressursse tasuta web fonte ja Google annab teile mitu võimalust importida neid oma veebilehel. Kahjuks ei sisalda ükski neist populaarset WordPressi mootorit. See tähendab, et peate kasutama pluginaid, mis on palju või paki käed, kasvatavad koodiga.
Hea uudis on see, et saate installida kõik fondid google'i raamatukogud Peaaegu igasugune WordPressi teema ilma palju vaevata. Kuidas täpselt - me õpetame teid täna.
On kaks võimalust - ühendage plugin või natuke functions.php-failiga.
Aga kõigepealt tahaksin loetleda Google'i fontide eeliseid ja puudusi, nii et te otsustate lõpuks neid meie projektides kasutada või mitte.
Hea ja halb Google Web Fonte
Web Fonte puhul on Google üks parem valik tulemuste osas . Kõik kerge disaini ja vahemälude süsteemi tõttu. Külastajad ei tohiks oodata Google'i fontide, kui nad hiljuti külastasid saidi, kus neid kasutati. Populaarsed fonte nagu avatud sans suudavad parandada teie saidi jõudlust, vähendades allalaadimise aega.
Teine funktsioon on see Google võimaldab teil need fonte üles laadida Nii saate neid oma paigutustes kasutada.
Ja lõpuks platvorm on täiesti tasuta . Fontide kasutamise alustamiseks on vaja sisse logida või alustada postkast Gmailil (ja kellel ei ole täna maili Gmaili?).
Vigadest Saate selle määrata google-fontide valik on väike Paljud neist on üksteisega sarnased. On vaja kulutada palju aega otsides, et leida korralik, originaalne font. Küljenduse fonte väga vähe.
Lisaks on tavalisi ohutusprobleemid - Sa pead täpsustama mõned isikuandmed installides fonte Google'i saidil.
Kuidas installida Google'i fonte WordPressi pluginate abil
Kui otsite pluginad, esimene asi, mida näete otsingutulemustes - klarvid WP Google Fonts ja lihtne Google Web Fonte . Need on tõesti kaks parimat pluginat.
Pluginad ei ole ideaalne lahendus jaoks google'i seadistamine- WordPress WebiteStose sait - mitte ainult jõudluse seisukohast, vaid ka seetõttu, et pluginad ei võimalda teil valida teatud teksti. Siiski, kui teie või teie klient on kindel, et see on parem kasutada pluginad, siis vaadake neid kahte võimalust.
See plugin võimaldab teil keskenduda konkreetsetele elementidele, nagu pealkirjad H1, punktid ja hinnapakkumised. Saate ka kohandatud CSS-i võimaluse valitud stiilide edasiseks tööks. Lisa ja konfigureerige fonte Google'ist WordPressi saidil selle pluginaga üsna lihtsalt.
Lihtne Google Web Fonte õigustab selle nime ja teeb Google'i fontide paigaldamise jaoks väga lihtne isegi algajatele. Võite kasutada live-eelvaate funktsiooni vaatamiseks, katsetamiseks ja optimeerides fonte ilma lahkumata veebilehel, samuti luua oma fondireeglid ilma koodi kirjutamiseta.
Õige viis Google'i fontide installimiseks WordPressi mallis
Lõpuks jõuame võimaluse avada funktsioone.php-faili ja töötada koodiga. Enne seda, kui te seda teete, peate valima Google'i raamatukogu fondi. Näiteks proovime võtta väga populaarne Avatud sans..
Siis peate valima fondi stiili - tavaline, rasvane või kaldkirjas. Sa suudad seda ise teha :)
Pärast stiilide valimist annab Google Scippeti koodi. Meie näeb välja selline:
Lisaks saime CSS-stiili:
font-perekond: "Avatud sans", sans-serif;
Nüüd on aeg avada funktsioone.php faili (tee faili: WP-sisu / teemad / yourtheme). Faili lõpus lisage uus funktsioon:
funktsioon Load_fonts ()
{
Wp_register_style ("et-googlefononts",
"http://fonts.googleapis.com/css?family\u003dopen+sans:300Itaalis 400 500 300"); Wp_enqueue_style ("et-Googlefononts");
}
Lisa_ction ("wp_print_styles", "Load_fonts");
Selle funktsiooni võti on käsk "WP_ENQUEUEE_STYLE", mis põhjustab WordPressi helistamiseks iga lehe päises oleva fondi stiilide tabelile. Kui te vaatate hoolikalt, siis näete, kustutame href \u003d ja rel link \u003d 'Stylehesheet "tüüp / CSS", koodist, mida Google meile andis, ja peate tegema sama, kui soovite lisada Muu Google Font saidi WordPressis.
Kõik, mida pead tegema Nüüd on avada peamine CSS-faili ja sisestada stiili avatud sans. Siin on tavalised reeglid, seega lisage järgmine kood stiililehele, salvestage ja uuendage:
keha.
{
Font: Normaalne 1EM "Avatud sans", sans-serif;
Värv: # 313131;
}
See stiil töötab kogu saidil. Individuaalseteks tekstifragmentidena saate teise stiili seadistada:
Julge-tekst
{
Font: Bold 1EM "avatud sans", sans-serif;
}
Nagu näete, tegelikult on kõik väga lihtne. Proovige ja kontrollige tulemust :)
Hoolimata uutest veebitehnoloogiatest ja käivitamisest kuni hiljuti puudus me rikkaks ja ilus veebi tüpograafia.
Kuigi meil on üsna lai peakomplektide valik, võiksime kasutada ainult teatud komplekti õigeid fonte installitud ja toetatasid enamik arvuteid - need fondid olid tuntud kui - Secure Web Fonte (Web-Safe Fonte).
Veebi tüpograafia trükitud trükikoja vastu
Sisu loomisel traditsioonilise meedia (ajalehed, ajakirjad, raamatud) kasutamisel tüpograafia, ainult loominguline potentsiaali piirab sind.
Kuid nüüd väheneb trükitud ja virtuaalsete vedajate vaheline eraldamine. Nüüd @ font-nägu toetab paljusid kaasaegsed brauserid (sealhulgas Internet Explorer Versioonist IE4.0.).
Sissejuhatus Google Font API-le
Google Fondi kataloog ja Google Font API on tasuta veebiteenused GoogleSee annab saidi omanikud võimaluse kasutada erinevaid fonte lihtne, mugav ja tõhus viis.
Google Font API - uus niši esindaja, mis hõlmab Kirjutage., Typotheque. ja jne
Nii lähme uurimata potentsiaalile Google Font API.
Mis on Google Font API?
Sa sõitsid internetis palju, kuid olete näinud mitmeid saite või blogisid mittestandardseid fonte?
Määrake kindlaks mittestandardsed fondid, mis ei ole ohutu seas ( Aroom, Helvetica., Verdana., Gruusia. ja Times New Roman.).
Google Font API - See on veebiteenus, mis pakub kvaliteetset avatud (avatud lähtekoodiga) fonte, mida saate oma disainis kergesti kasutada.
Loodame, et fontide kogumine See kasvab jätkuvalt nii, et meil oleks veelgi suurem valik erinevatest peakomplektidest.
Google Fondi API kasutamise eelised
Kui te otsustate endiselt kasutada, kas kasutada Google Font APISiin on mõned selle eelised.
HTML-teksti kasutamine
Erinevalt piltide kasutamisest või asendustest CSS. Taustapildi, kasutades @ font-nägu, lahenduste atraktiivsemat veebipõhist tüpograafiat, soodsamalt plaani osas SEO..
Lisaks ei pea te olemasolevat sisu muutma - värskendage oma ainult teie CSS. Tabelid.
Kättesaadavus
Kui kasutate Html Tekst, mitte pilt või taust CSS.See ei mõjuta inimesi, kes kasutavad ekraani lugemise programme.
Usaldusväärne infrastruktuur ja vähendatud koormus teie serveris
Kuna allalaadimine oma @ font-nägu kasutab usaldusväärset infrastruktuuri GoogleVõite olla kindel, et fondifailiteenus on kiiresti ja saate vähendada oma serverit koormust.
Kuidas kasutada Google Font API-d
Te ei pea kasutama professionaalset veebiarendajat Google Font API. Kõik, mida pead tegema, on teie lehele lisada ühe stiilide lingi elemendi, mille järel saate selle fondi kasutamise alustada CSS..
Siin on üldine kasutusprotsess Google Font API:
1. samm: lingi lisamine valitud fondi stiililehele
Alustada minna fontide kogumine GoogleEt näha, millised fondid on kasutamiseks kättesaadavad. Siin on põhivorming konkreetse fondi lisamiseks:
Kui vajate ühekordse kasutamise jaoks fondi, saate ühe rea stiili deklareerida.
< p style = "Font-perekond:" Font nimi ", Serif"\u003e Kuus parandusi on ilus< / p > |
3. samm: alati vaba valik.
Te ei tohi pöörata tähelepanu asjaolule, et eelmistes koodifragmentides kasutasime Serif-i varustatud fondi. Seda tehakse ootamatute tulemuste vältimiseks. See tähendab, et serveritega Google Midagi on vale, brauser saab kasutada oma standard fondi Serif.. Tee selle harjumuseks, kui kasutate font-nägu atribuuti, ei ole oluline, kas kasutate @ font-nägu või mitte, määrake alati täiendavaid fonte - seda tehnoloogiat nimetatakse fontideks.
Näide Google Fondi API kasutamisest
Kopeeri ja kleepige järgmise ploki koodi oma Html Dokument, salvestage see ja seejärel avage oma brauseris.
Soovitame testida teie Html Dokument erinevates brauserites, nii et näete risti brauseri erinevusi (või nende puudumist).
Saate eksperimenteerida erinevate fontidega, kuid näiteks kasutasime homaari peakomplekti.
< html > < head > < link rel = "stylesheet" type = "text/css" < strong > href \u003d. "http://fonts.googleapis.com/css?family\u003dlobster"< / strong >> < strong > < / strong > < / head > < body > < h1 > Kuus parandusi on ilus!< / h1 > < / body > < / html > |
Tulemus:
Taotlus mitmete fontide kasutamiseks Google Font API-ga
Oletame, et vajate kolme fondi Google'i fondi kataloog.. Ärge tehke palju taotlusi. Mitmed taotlused suurendavad numbrit Http. Taotlused. Vähem kogus Http. Taotlused vähendab veebilehe vastuse aega.
Selle asemel, et paljude stiilide link sildid, kasutage järgmist vormingut href vara ühe stiilis link silt.
Alltoodud näide laaditakse kõik kolm fonte ( VollkKorn., Yanone. ja Droid-sans.) Kasutades ühte taotlust.
< strong > VollkKorn.< / strong > | < strong > Yanone.< / strong > | < strong > Droid + sans.< / strong > |
Nüüd saate oma stiile kasutada ühtegi neist kolmest fontidest.
Mida peaks pöörama tähelepanu
Eraldi fontide nimed ilma tühikuteta. Pöörake tähelepanu + fontide kasutamisele Droid-sans.. Kasutage tühiku asemel fondi nimede sümbolit.
Vihje: Ka kasutades suur number Üks päring fonte saab suurendada lehe reageerimisaega. Laadige ainult need fonte, mida sa tõesti vajate. Olge konservatiivne.
Kaal ja stiil Fontide fondid Font API
Kaal Fontidel on ka erinevad kaalu / stiili parameetrid. Nende kasutamiseks lisage käärsoole fondi nimi (:) ja seejärel määrake stiili ja kaal.
Allpool toodud näites näitame julge. ja bold-itachic jaoks VollkKorn., I. kald- jaoks IncosoSolata..
http: //fonts.Googleapis.com/css?family\u003dvollrvorn: b.,bi-| IncosoSolata: i.| Droid + Sans
Mida pöörata tähelepanu
Kasutage käärsoole (:) ilma ruumi pärast fondi nime ja seejärel määrata stiili nimi (s.t. Boldionalic) või vastava vähendamise (st BI). Kui vajate mitmeid ühe fondi sorte, jagage need komaga (,) ilma ruumideta.
Google Font API teeb veebi tüpograafia atraktiivsemaks
Web Design Industry otsib aktiivselt lahendust vanale probleemile valides ja kasutades Web Fonte ja nagu @ font-nägu on vastus.
Muidugi on olemas erinevad pluginad Google Web Fonte Fonte oma WordPressi saidil, aga kui te arendate oma teema, siis võib tekkida vajadus sulgeda tüpograafia koos sinu poolt, mööda pluginad. Allpool näidata, kuidas kasutada Google Web Fonte oma teema.
Esiteks lähme saidile Google Web Fonte. Ja valige font, mida me teeme rakendada. Abi abil spetsiaalsed tööriistad asub vasakul küljel, saate kitsendada otsinguala, sest fonte on tõesti palju. Ma teadsin, et mul oli pealkirjade ja blogi nimede rasva-serif-font, nii et ma valisin rippmenüüsse kategooriate kategooriate serif ja seejärel kolis paremale paksuse liuguri (paksus).
Selle tulemusena 617 võimalust pakutakse mulle sujuvalt langenud 5. Sul on üsna palju võimalusi eelvaade Fondid - näete, kuidas sõna näeb välja nagu valitud fondi tekst, teksti lõik või plakat. Saate valida eelnevalt määratud teksti, saate määrata oma teksti, valige soovitud fondi suurus.
Kui olete leidnud fondi, mida soovite oma saidil kasutada, klõpsa lihtsalt kogumise nupule.
Saate lisada kümneid fonte oma kollektsiooni. Kuid see ei ole alati vajalik. Kui te seda teete, ei tähenda see, et sa peaksid seda tegema. Püüdke piirata ennast maksimaalselt kolme fontidega. Ja isegi parem kaks. Põhjendused, ma ikka meeldib kasutada aegunud web seif font põhiteksti teksti ja salvestada web fonte pealkirju ja muid elemente, mis vajavad erilist ekspressiivsust või tähelepanu ise. Comier umbes selguse oma fonte - te ei tohiks kasutada meeldejäävat fonti, kui külastajad ei suuda lahti võtta, mis on kirjutatud.
Kui lisate oma fonte kollektsioonile, näete neid saidi allosas sinises osas. Kui teie kollektsioon ilmub kasutatavad fonte, klõpsake lihtsalt nuppu Kasutusnuppu.
Pärast seda liigute ekraanile, millele esitatakse neljast etapist koosnev juhend. Sellest saate teada, kuidas kasutada fonte. Kui soovite alla laadida valitud fonte, et neid graafilises redaktoris alla laadida, et neid hinnata või teha oma teema jaoks atraktiivne ekraanipilt. Kui sa tahad lihtsalt oma teema fonti kasutada, siis te ei pea seda arvutisse alla laadima.
Esimeses etapis saate valida plug-in stiilide ja paksuse. Teises etapis saate valida komplekti tähemärki soovite ühendada. Samuti saate hinnata, kuidas teie fontide kogumine peegeldab lehe laadimise kiirust.
Nüüd läheme kolmanda sammu juurde, mis ei ole enam sama lihtsad kui eelmised. Kolmandas etapis saame koodi, mida peate meie saitidele lisama - kolm erinevat võimalust. Valime standardvalik - Siiski me SOMNAKE mõnevõrra Google'i juhistest, et toetada loodud meetodeid stiilide lisamiseks WordPress teemadele. Standardversiooni koodis kopeerida ainult URL-i, mis on määratud link-sildi href atribuutiks.
Seejärel avage funktsioone.php teema faili. Loome funktsiooni CSS-i allalaadimiseks, mida me meie teemal kasutame:
Funktsioon GGL_Load_styles () ()
Vaadake GLL eesliide minu funktsioonist? See on üks eduka Wordpressi praktiku. Lisage alati eesliide oma funktsioonide nimedele WordPressis, et vähendada konfliktide ohtu teiste teemadega teie teema, tütarettevõtte või plug-ins.
Nüüd selles funktsioonis peame registreerima meie Google'i stiilide tabeli:
Funktsioon GLL_Load_styles () (kui (!
Me kasutame wp_register_style funktsiooni. Esimene argument on deskriptor, s.t. Vähendamine, et me saame kasutada pöörduda selle stilist laual tulevikus meie koodis. Teine argument on faili tee. Me kasutame URL-i, mida saime Google'i juhiste kolmandas etapis.
Järgmisena ühendame meie põhiliikide tabeli meie teema jaoks. Loodan, et te ei asetanud linki sildi oma Headder.php-faili peaosas? Kui jah, siis mine tagasi faili ja kustutage see kood. Seejärel ühendage funktsiooni stiili tabelis Functions.php-failis:
Funktsioon GGL_Load_styles () (IF (! ", get_stylesesheet_uri (), massiiv (Googlefonont"));))
Me kasutame wp_enqueue_style funktsiooni. Sellel on samad argumendid nagu wp_register_style. Kõigepealt seome meie stilist tabelis deskriptor. Siis saada tee meie stiililauale. Õnneks saate WordPressis teed saada läbi Get_stylesesHeet_uri () funktsiooni. Pärast seda näitame sõltuvusi. Meie stiilis.css faili sõltub Google Web Fonte stiilis tabelis.
Lõpuks kasutame WP_ENQUEUE_SCRIPTSi konksu, et helistada meie funktsioonile:
Funktsioon GGL_Load_styles () (IF (! ", get_stylesesheet_uri (), massiiv (" Googlefonont "));)) lisamine (" wp_enqueue_Scripts "," ggl_load_styles ");
Functions.php-fail on lõppenud. Nüüd oleme lahkunud viimaseks sammuks valitud fondi kasutamiseks. Neljas samm B. google'i juhised Näitab, milliseid väärtusi peame oma fondi kasutamiseks font-perekonnale edastama. Ma tahan teha kõik mu pealkirjad Holtwood One SC:
H1, H2, H3, H4, H5, H6 (font-perekond: "Holtwood One SC", Serif;)
Ja ma tahan teha saidi kirjelduse. Rouge Script:
Saidi kirjeldus (font-perekond: "Round Script", kursiivne;)
Kõik! Enam ei tee midagi! Te olete lisanud Google Web Fonte Fonte oma WordPress teema. Kasutage neid vastutavaks!
