Lai uzzinātu par visu sev - nav viegli, bet ļoti interesanti. Ja jums ir vismaz virspusēja ideja par to, kā vietne darbojas, tad tas ir labāk, lai viņi īstenotu savu projektu pats. Tajā pašā laikā, jūs ne tikai ietaupīsiet ķekars naudas, bet arī uzzināt daudz "čipsi", noslēpumi utt. Izmantojot Google fontus, parasti nepiesaista uzmanību, lai gan, pateicoties tiem, blogs var kļūt interesantāks.
apkalpošana
Ilgu laiku internetā parādījās galvenais tīmekļa fontu pakalpojums. To izstrādāja Google. Lietotāji to varētu izmantot bez maksas. Neskatoties uz to, ka šāda veida noteikšana netiek uzskatīts par virsotni, joprojām ir tādi cilvēki, kas kļūdījās un nevarēja tikt galā ar pakalpojumu.
Lai to izdarītu, vienkāršs dizains tika speciāli izstrādāts. Tagad strādājiet ar Google fontu fontu ir kļuvis vieglāks, un apmeklētāju skaits ir palielinājies. Bibliotēka paplašinājās. Pagājušajā gadā notika jauns pakalpojums, kas daudz apkopoja pozitīvas atsauksmes. Tagad cilvēki ir kļuvuši vieglāk savienot fontus savām vietnēm un apskatīt tos.
Izskats
Tātad, tiem, kuri nekad nav bijuši vietnē ar veco dizainu, jums ir nepieciešams veikt vispārēju priekšstatu par izmaiņām. Agrāk pakalpojums izskatījās diezgan masveidā. Visur tur bija biezi rāmji, zilā pogas, grafika nebija visaugstākā atļauja. Tas viss ir būtiski ietekmējis apmeklētāju.
Tagad izstrādātāji ir vērsti uz materiālo dizainu. Visas iegūtās izsmalcinātās funkcijas. Izskats Viņš kļuva par "vieglāku". Smalka animācija, interaktivitāte kļuva pamanāma. Nekas cits neuztrauc uzmanību no vēlamā Google fonta fonta izvēles.
Bija ērts adaptācija resursu zem mobilās ierīces. Protams, šādas izmaiņas nav daudz pamanāmas pret inovāciju fonu, bet ņemot vērā kļūdas iepriekšējā versija Tas būs Avid lietotājiem par "Manna Heavenly".
Iespēja
Bieži līdzīgi pakalpojumi tiek izmantoti dizaineri. Neskatoties uz viņu pieredzi un profesionalitāti, viņi arī strādā ar vizualizāciju. Pārprojektēšana prezentēja vairāk līdzīgas iezīmes, kas ļautu jums iepriekš apvienot to, kas būs nepieciešams, lai īstenotu vēlāk savā projektā.
Tāpēc problēma ar to, kā viens fonts ir apvienots ar citu krāsu un trešo fonu, pazuda. Uzņēmums pievienoja vairāk rīku un paletes ar universāliem toņiem, kas ļautu eksperimentēt un uzzināt, kā viens vai otrs fonts izskatīsies konkrētā krāsā.
Izvēlēts
Google Fonts Fonts Service nodrošina lietotājiem izmantot izvēlētās iespējas. Īpašā cilnē ir savākti stilu kopums, ko izstrādātāja iesaka izmantot. Šīs kolekcijas tiek piešķirtas starp citiem. Tos izstrādā Google un trešo pušu aģentūru eksperti. Lielākā daļa no tiem ir noteiktu stilu un īpašu filozofiju.
Skats
Viena no svarīgākajām izmaiņām tieši ietekmē fontu izvēli. Tas ir saprotams, ka agrāk lietotājs redzēja kādu zīmējumu ar papildu pogām un lielu zilu, kas pievienoja fontu kolekcijai. Kopumā šī iespēja izskatījās labi, bet ne vienmēr bija pietiekama kaste laba atļauja Attēli ar stilu, un tādēļ noteikti noteikti, kā fonts izskatīsies, tas bija grūti.
Bija jautājumi, un šīs papildu pogas, kas bija maz zināms no pirmā acu uzmetiena. Bija nepieciešams vai nu tos uz tiem vai izmantot. Tagad tas ir kļuvis vairāk vai mazāk skaidrs. Ir papildu funkcijas:
- Izvēlieties konkrētu priekšlikumu, punktu vai savu teksta elementu.
- Fontu piesātinājuma eksperimenti.
- Ātra izmēru iestatīšana, izmantojot slīdni.
Starp citu, Google fontu lieluma izmaiņa ir kļuvusi pielāgojama, jo tikai viens piemērs mainījās, nevis viss lapā. Iebildums vecā versija Lietotājus var pārnest no vienas lapas malas uz otru, un jaunajā jūs vienkārši paliekat uz piemēru, kas tiek regulēts.
Savienojums
Ja esat gatavs izmantot šo pakalpojumu, varat mēģināt savienot fontus jūsu resursam. Saites iegūšanas process ir universāls. Problēmas var rasties atkarībā no CMS sistēmas. Katrs izmanto savus veidus. Tāpēc dažādiem projektiem būs jāizvēlas individuālās iespējas.
Mēs apskatīsim, kā iegūt saiti, lai savienotu Google fontus. Jums jādodas uz Google fontu oficiālo tīmekļa vietni. Tur jūs skatāties stilu katalogu un izvēlieties to, kas vislabāk atbilst. Lai to izdarītu, blakus viņam noklikšķiniet uz "Plusik". Pēc tam, kad fonts tiks pievienots īpašajam blokam apakšā lapas.
Noklikšķiniet uz šīs ierīces un pēc tam konfigurējiet to. Šeit jūs varat izvēlēties uzrakstu un nepieciešamo alfabētu. Ja jums ir nepieciešams Google fonts kirilics, tad atzīmējiet kirilicu virkni. Pēc saites veidošanās. To var atrast tajā pašā logā iegultā cilnē. Tas ir pietiekami, lai kopētu to vai izmantotu pilnu HTML kodu.
Parasti vietnes iestatījumos ir fonts un krāsas. Ir standarta iespējas, un jūs varat pievienot pagarināt. Viņiem ir atsevišķa iespēja Google fontiem. Ja jums ir nepieciešams lejupielādēt fontus caur Augstākās Webfonts spraudni.
Populāras opcijas
Protams, ir grūti spriest, kādi stili ir labāki, jo īpaši dažādiem vietnes priekšmetiem. Veidojot savu vietni, atcerieties, ka viņam nepatīk, bet jūsu auditorija. Tāpēc labāk ir apskatīt konkurentu vietnes.
Parasti komerciāliem resursiem neviens neierobežo par stiliem. Galu galā, ja redzat fontu Google Chrome. In tiešsaistes veikalā, jums ir maz ticams, lai pievērstu uzmanību uz to. Bet, ja jums ir emuārs, tad, visticamāk, kaut ko jūs varat, un kaut kas, gluži pretēji, kaitēs.
Google fonti ir sagatavojuši daudzas kolekcijas, kurās ir populāri stili. Piemēram, omāru mīlestība izmantot atsevišķiem blokiem tekstā. Ir grūti lasīt, ja viss raksts ir rakstīts šādā treknā slīprakstā. Bet tas izskatās labi ieliktņi un citāti.
Bad skripts ir arī iespēja blogiem. Cursive tipa smags, lai lasītu lielus teksta masīvus, bet jūs varat piešķirt galveno ideju. Stils imitē roku rakstītu rokrakstu. Jura Normal 400 ir interesanta iespēja kirilicam. Autors apgalvo, ka tas ir Eurostil no Sear Serip ģimenes. Tas izskatās ļoti labi un ir vairākas variācijas.
Webfonts ir trešo pušu fontu izmantošanas tehnoloģija savā tīmekļa vietnē. Viens piemērs:Ja sākat no avota, fonta tag tika ieviests 1995. gadā, un jau 1996. gadā programmatūras definīcija tika rakstīta CSS. Sākot no CSS 2.0 versijas, tika ieviesta fonta sintēze un pārlūkprogrammu sintēze, bet tomēr pēc tam vēl joprojām ir populārs, un tagad vecajam un neatbilstošajam, ti, nebija atbalsta fontu ielādēšanai, kas neļāva strauju fontu attīstību savā tīmekļa vietnē.
Iebildums mūsdienu internets Tīmekļa fonti ir ilgstoša lieta. Dažādās vietās mēs varam izmantot visu veidu fontus, kas savukārt nav iekļauti konkrētas operētājsistēmas piegādē, bet ir nevēlama blakusparādība, ko mēs runājam par šodien un runāt.
Failu formāti
Lai savienotu fontus, tiek izmantota programmatūras ievietošana CSS, tā saukto @ -evilo. Tātad, B. vienkārša forma @ Font-Face ir šāda deklarācija. Tas izskatās šādi: / * Atzīt fontu * / @ font-face (Font-Face: "Fonta nosaukums"; SRC: URL ("PATH / UP / IT");) / * Piesakies * / P (Font-Face: "Fonta nosaukums" , Arial;)
TTF vai OTF - parastais fonta fails, bet vietnes skatīšanās laikā ielādēts no servera;
WOFF ir neaizsargāts OTF vai TTF avota arhīvs, varbūt vissvarīgākais formāts, ko populārākie pārlūkprogrammas atbalsta, un faili, kas atrodas vaļā, parasti 2-2,5 reizes vieglāk nekā oriģināls;
EOT - ieviesa TT OpenType arhīvu, kam ir aizsardzības mehānismi, kas vajadzīgi, lai atbalstītu vecās pārlūkprogrammas Internet Explorer. (sākot ar IE8, izņemot TrueType līknes, atbalstīto un postscript);
SVG - atbalstīt safari pārlūku.
Sagatavots īstenošanai (@ font-sejai) uz vietas fontiem šodien ir nekavējoties vairākos formātos. Jūs sapratāt, ka ir dažas neatbilstības, kā arī nav viena veida operētājsistēmas. Fontu formāti ir diezgan daudz, bet betons darbosies tikai konkrētā pārlūkprogrammā. Attiecībā uz šiem visvairāk formātiem, kāpēc tas ir nepieciešams, lai tie tik daudz, ja tie ir savienoti, tad tie ir nepieciešami, lai pārrobežu pārlūku atbalstu vietnē.
@ Font-Face (fonta ģimene: "Ashift_name"; SRC: URL ("FILILE_NAME_SHIFT.EOT"); SRC: URL ("File_File_shift.eot? #Iefix") formāts ("iegultais-opentype"), URL ("Fails nest_shift .woff ") formāts (" woff "), URL (" File_shift.ttf ") formāts (" TrueType "), URL (" FILE_FAIL_NAME.SVG # DSNOTEREGLOR ") formāts (" SVG "); fonta svars: normāls; fonts -style: normāls;)
Ja vēlaties izmantot šifrēto kodu, nevis faila, šajā gadījumā, base64 nāk, lai palīdzētu, kas darbojas ar to pašu principu un ar attēliem, tomēr veciem IE base64 netiek apstrādāti.
@ Font-Face (Font-Family: "Ashift_name"; SRC: URL ("FILILE_NAME_SHIFT.EOT");) @ Font-Face (fonta ģimene: "Ashift_name"; SRC: URL (dati: fonts / woff; Charset \u003d UTF-8; Base64, datu) formāts ("Woff"), URL (dati: fonts / TrueType; Charset \u003d UTF-8; Base64, datu) formāts ("TrueType"), URL ("File_name_svg #File_shot_name") formāts ( "SVG"); fonta svars: normāls; fontu stils: normāls;)
Iegulto opentype?
Kā jūs varētu pamanīt, spraudņus IE ir līnija ar šādu parametru:SRC: URL ("File_File_seot? #Iefix") formāts ("iegultais-opentype")
Klasiskajā versijā mums bija jānorāda ar jums šādā veidā:
SRC: URL ("File_shift.eot") formāts ("iegultais-opentype")
Bet, pievienojot simbolu "?" Pēc fonta formātā mēs varam norādīt pārlūkprogrammu, lai izlasītu šādu norādi - formātu ("iegulto-opentype"). Internet Explorer atbalsta fontu iegulšanu, izmantojot tā saukto uzņēmumu iegulto Opentype standartu, sākot ar IE 4.0 versiju. Tā izmanto digitālo tiesību pārvaldības metodi, lai novērstu fontus, kas attiecas uz licenci.
Ko ja fonts netiek atbalstīts pārlūkprogrammā?
Ilgu laiku, bypass ceļi jau tika izgudrots, tā sauktie "kruķi", lai parādītu fontu. Ir gadījumi, kad fonts tika izstrādāts tikai SVG formātā vai tikai TTF formātā.1. Vecajās dienās izstrādātāji savienoja attēlu, kas savukārt bija teksts, kas iegūts vizuālā redaktors. Tomēr tagad tas tiek uzskatīts par sliktu toni, lai atbalstītu prognozēts (jums ir nepieciešams, lai atvērtu redaktoru vēlreiz, lai mainītu tekstu attēla), attiecīgi, lietotājs nevar kopēt tekstu no attēla.
2. arī kopīgs bija zibspuldzes risinājumu izmantošana.
3. Vēl viens risinājums ir izmantojot JavaScriptLai aizstātu tekstu ar VML (Internet Explorer) vai SVG (visām pārējām pārlūkprogrammām).
Kādas problēmas joprojām var rasties?
Pārlūks mēģinās sinhronizēt fontu ielādi, tas mēģinās slēpt tekstu, tas ir, lai tas būtu neredzams, līdz fonts ir ielādēts. Šo efektu sauc par foit, efekts "White Flash".Flash efekts
Foit efekts pārlūkprogrammās, piemēram, Safari, Chrome, Opera, Firefox mēdz slēpt tekstu ne vairāk kā 30 sekundes, pirms atsakās iegūt fontu, pēc kura noklusējuma fonts ir iestatīts.Piemērs tam, kā fonts ir ielādēts:
Neskatoties uz to, 2,7 sekundes ir ilgs laiks!
Ko var izdarīt?
Sākotnēji pieeja bija iespējot fonta failu konvertēšanu uz URIS datiem, lai šos fontus varētu iekļaut tieši Fonta ģimenes definīcijās CSS failā. Lejupielādējot šo CSS failu asinhronā, jūs varat garantēt, ka pārlūks nekavējoties sniegs tekstu lapā, izmantojot pielāgotus fontus, un jauni fonti tiks izmantoti, tiklīdz CSS tiks ielādēts.Tomēr jebkurā eksperimentā ir blakusparādība.
Sākotnēji Bram Stein izmantoja pielāgotu fontu, bet pēc tam, kad viņa fonts tika ielādēts, "mirgošana" notika, piemērā 0,7 sekundes:
Īsāk sakot, mirgošana notiek, kad pārlūks mēģina parādīt fontu no fonta, un uzklājiet to HTML. Fonts, kas noteikts deklarācijas @ font-sejā, kas vēl nebija ielādēta.
Bram Stein parādīja, kā pareizi savienot fontus, tas izveidoja skriptu, alternatīvu Google asinhrono fontu ielāde, tas ir fontfaceobserver skripts.
Mēģināt
Analīze
Standarta savienojums no GoogleGodīgi sakot, izmantojot vairāk nekā vienu fontu uz vietas, jūs varat īpaši palēnināt vietnes iekraušanas ātrumu, tādējādi palielinot kopējo slodzes laiku. Google Fonts API ļauj ātri pievienot fontu vietnē, izmantojot fonta ģeneratoru, tādējādi ātri izstrādājot jūsu vietni. Tomēr jums ir jāatceras foit efekts. Kopējais slodzes laiks - 322 ms.
Web Fonta iekrāvējs no Google
Web Fonta Loader - JavaScript bibliotēka uzlabotai darbam ar API, bibliotēku, kas dod mums lielāku kontroli pār fontu ielādi nekā standarta Google Fonts API. Skripts ļauj mums izmantot daudzus fontus, ielādējot tos secīgi vai asinhroni. Atšķirībā no standarta savienojuma teksts ar standarta fontu tiek parādīts vājos savienojumus, līdz tiek ielādēts fonts.
Kopējais slodzes laiks: 1132 ms
Fontfaceobserver
FONTFACEOBSERVER ir JavaScript bibliotēka (5KB), tā sauktais sākējs ir saderīgs ar jebkuru fontu tīmekļa pakalpojumu. Skripts ļauj mums paziņot mums, vai fonts ielādēts vai nē, ļauj izsekot notikumu pēc lejupielādes un līdz fonta slodzei. Kopējais slodzes laiks: 159 ms
Izmantojot skriptu.
Google fonti ir viens no labākajiem resursiem ar bezmaksas tīmekļa fontiem, un Google sniedz jums vairākus veidus, kā tos importēt uz jūsu vietni. Diemžēl neviens no tiem nav iekļauts populārs WordPress dzinējs. Tas nozīmē, ka jums ir vai nu izmantot spraudņus, kas ir daudz, vai pack rokas, audzēšana ar kodu.
Laba ziņa ir tā, ka jūs varat instalēt jebkuru fontu no google bibliotēkas Gandrīz jebkura tēma WordPress bez daudz nepatikšanas. Kā tieši mēs šodien iemācīsim jūs.
Ir divas iespējas - pievienojiet spraudni vai mazliet caurdurtu ar funkcijām.fp failu.
Bet vispirms es gribētu uzskaitīt Google fontu priekšrocības un trūkumus, lai jūs beidzot nolemtu tos izmantot mūsu projektos vai nē.
Labi un slikti Google tīmekļa fonti
Attiecībā uz tīmekļa fontiem Google ir viens no labākas iespējas runājot par sniegumu . Viss viegls dizaina un kešatmiņas sistēmas dēļ. Apmeklētājiem nevajadzētu gaidīt Google fontus, ja viņi nesen apmeklēja vietni, kurā tie tika izmantoti. Populāri fonti, piemēram, atvērtie sans, var uzlabot vietnes veiktspēju, samazinot lejupielādes laiku.
Vēl viena iezīme ir tā Google ļauj jums augšupielādēt šos fontus Tātad jūs varat tos izmantot jūsu izkārtojumos.
Un visbeidzot platforma ir pilnīgi bez maksas . Lai sāktu izmantot fontus, jums ir nepieciešams pieteikties vai jāsāk pastkaste Par gmail (un kas šodien nav pastu uz Gmail?).
Trūkumi To var norādīt google-fontu izvēle ir maza Daudzi no tiem ir līdzīgi viens otram. Ir nepieciešams pavadīt daudz laika, lai atrastu pienācīgu, oriģinālu fontu. Ļoti maz fonti kiriliem.
Turklāt ir parasts drošības problēmas - Jums ir jānorāda daži personas dati, instalējot fontus no Google jūsu vietnē.
Kā instalēt Google fontus, izmantojot WordPress spraudņus
Ja jūs meklējat spraudņus, pirmā lieta, ko redzat meklēšanas rezultātos - pLAGES WP Google fonti un Easy Google Web fontus . Tie ir patiešām divi labākie spraudņi.
Spraudņi nav ideāls risinājums priekš setup Google- WordPress tīmekļa vietnes vietne - ne tikai no darbības viedokļa, bet arī tāpēc, ka spraudņi neļauj izvēlēties noteiktus teksta gabalus. Tomēr, ja jūs vai jūsu klients ir pārliecināts, ka labāk ir izmantot spraudņus, tad apskatiet šīs divas iespējas.
Šis spraudnis ļauj koncentrēties uz konkrētiem elementiem, piemēram, virsrakstiem H1, punkti un citāti. Jūs arī saņemat pielāgotu CSS opciju tālākai darbam ar izvēlētajiem stiliem. Pievienojiet un konfigurējiet fontus no Google uz jūsu WordPress vietni ar šo spraudni diezgan viegli.
Easy Google Web Fonti attaisno tā nosaukumu, un padara instalēšanu Google fontus super viegli pat iesācējiem. Jūs varat izmantot LIVE priekšskatījuma funkciju, lai apskatītu, pārbaudītu un optimizētu fontus, neatstājot tīmekļa vietni, kā arī izveidojiet savus fontu noteikumus, nerakstot koda rindu.
Pareizais veids, kā instalēt Google fontus WordPress veidnē
Galu galā mēs nonākam pie opcijas, lai atvērtu funkcijas.Php failu un darbu ar kodu. Pirms jūs to izdarītu, jums ir jāizvēlas fonts no Google bibliotēkas. Piemēram, mēģināsim veikt ļoti populāru Atvērtie sans..
Tad jums ir jāizvēlas fonta stils - normāls, taukains vai slīpraksts. Jūs varat to darīt pats :)
Kad esat izvēlējies stilus, Google sniegs jums fragmenta kodu. Mūsu izskatās šādi:
Turklāt mēs saņēmām CSS stilu:
fonta ģimene: "Atvērtie Sans", Sans-Serif;
Tagad ir pienācis laiks, lai atvērtu funkcijas.Php failu (ceļš uz failu: WP-saturu / tēmas / yourstheme). Faila beigās pievienojiet jaunu funkciju:
funkcija load_fonts ()
{
Wp_register_style ("et-googlefonts",
"http://fonts.googleapis.com/css?family\u003dopen+sans:300Italic,400,500,300"); Wp_enqueue_style ("et-googlefonts");
}
Add_styles ("wp_print_styles", "load_fonts");
Šīs funkcijas atslēga ir komanda "wp_enqueue_style", kas izraisa WordPress, lai izsauktu fonta stilu tabulu katras lapas galvenē. Ja jūs uzmanīgi izskatīsiet, jūs redzēsiet, ka mēs izdzēsim href \u003d un rel saiti \u003d 'Stylesheet' tips'text / CSS ', no koda, ko Google deva mums, un jums būs nepieciešams darīt to pašu, ja vēlaties pievienot jebkuru Cits Google fonts jūsu vietnei WordPress.
Viss, kas jums jādara, tagad ir atvērt galveno CSS failu un ievietot stilu ar atvērtiem sans. Šeit ir normāli noteikumi, tāpēc pievienojiet šādu kodu stila lapā, saglabājiet un atjauniniet:
Ķermenis.
{
Fonts: Normal 1em "Open Sans", Sans-Serif;
Krāsa: # 313131;
}
Šis stils darbosies visā vietnē. Atsevišķiem teksta fragmentiem jūs varat iestatīt citu stilu:
Treknraksts
{
Fonts: Bold 1em "Open Sans", Sans-Serif;
}
Kā jūs varat redzēt, patiesībā viss ir ļoti vienkāršs. Mēģiniet pārbaudīt rezultātu :)
Neskatoties uz jaunajām tīmekļa tehnoloģijām un startupiem, līdz nesen mums trūkst bagāto un skaista tīmekļa tipogrāfija.
Lai gan mums ir diezgan plaša austiņu izvēle, mēs varētu izmantot tikai noteiktu pareizu fontu komplektu, ko uzstādīja un atbalstīja vairums datoru - šie fonti bija pazīstami kā - Droša tīmekļa fonti (tīmekļa drošie fonti).
Tīmekļa tipogrāfija pret iespiedkrāsu
Veidojot saturu par tradicionālajiem medijiem (laikrakstiem, žurnāliem, grāmatām), izmantojot tipogrāfijas, tikai radoši potenciāli ierobežo jūs.
Bet tagad tiek samazināts nodrukātu un virtuālo nesēju atdalīšana. Tagad @ fonts-sejas atbalsts daudz mūsdienu pārlūkprogrammas (ieskaitot Internet Explorer No versijas IE4.0.).
Ievads Google fontu API
Google fonta katalogs un Google fonts API ir bezmaksas interneta pakalpojumi no Googlekas nodrošina vietņu īpašniekus ar iespēju izmantot dažādus fontus vienkāršus, ērtus un efektīvus veidus.
Google fontu API - jauns pārstāvis nišu, kas ietver TypeKit., Typotheque. utt.
Tāpēc iet uz neizpētīto potenciālu Google fontu API.
Kas ir Google fonts API?
Jūs daudz ceļojis internetā, bet esat redzējis nestandarta fontus daudzās vietnēs vai blogos?
Pieņemsim noteikt nestandarta fontus, kas nav seifs ( Ariāls, Helvetica., Verdana., Gruzija. un Times New Roman.).
Google fontu API - Tas ir tīmekļa pakalpojums, kas nodrošina augstas kvalitātes atvērtu (atvērtā koda) fontus, kurus var viegli izmantot savā dizainā.
Mēs ceram, ka fontu kolekcija Tā turpinās augt, lai mums būtu vēl lielāka dažādu austiņu izvēle.
Ieguvumi no Google fonta API izmantošanas
Ja jūs joprojām izlemjat, vai izmantot Google fontu API, Šeit ir dažas tās priekšrocības.
Izmantojot HTML tekstu
Atšķirībā no attēliem vai aizvietotājiem CSS. Fona attēls, izmantojot @ fontu, kā risinājumi pievilcīgākai tīmekļa tipogrāfijai, labvēlīgāk attiecībā uz plānu SEO..
Turklāt jums nav nepieciešams mainīt esošo saturu - jūs tikai atjaunināt savu CSS. Tabulas.
Pieejamība
Kā jūs izmantojat Html. Teksts, nevis attēls vai fons CSS.Tas neietekmē cilvēkus, izmantojot programmas ekrāna lasīšanai.
Uzticama infrastruktūra un samazināta slodze jūsu serverī
Tā kā jūsu @ fonta sejas lejupielāde izmanto uzticamu infrastruktūru GoogleJūs varat būt pārliecināti, ka fonta failu pakalpojums būs strauji, un jūs varat samazināt slodzi savā serverī.
Kā lietot Google fontu API
Jums nav jābūt profesionālam tīmekļa izstrādātājam, lai to izmantotu Google fontu API. Viss, kas jums jādara, ir pievienot vienu stiluheet saiti uz jūsu lapu, pēc tam jūs varat sākt izmantot šo fontu CSS..
Šeit ir vispārējs lietošanas process Google fontu API:
1. solis: saites pievienošana uz stila lapu ar izvēlēto fontu
Sākt iet uz fontu kolekcija GoogleLai redzētu, kuri fonti ir pieejami lietošanai. Šeit ir galvenais formāts konkrēta fonta iekļaušanai:
Ja jums ir nepieciešams fonts vienreizējai lietošanai, jūs varat paziņot par vienu rindu stilu.
< p style = "Font-Family:" Fonta nosaukums ", Serif"\u003e Seši pārskatījumi ir skaisti< / p > |
3. solis: vienmēr ir rezerves iespēja.
Jūs nedrīkstat pievērst uzmanību tam, ka iepriekšējos kodu fragmentos mēs izmantojām serifu kā rezerves fontu. Tas tiek darīts, lai izvairītos no negaidītiem rezultātiem. Tas nozīmē, ka, ja ar serveriem Google Kaut kas ir nepareizi, pārlūks var izmantot savu standarta fontu Serif.. Padariet to ar ieradumu, kad izmantojat fonta sejas atribūtu, nav svarīgi, vai jūs izmantojat @ \u200b\u200bfont-seju vai ne, vienmēr norādiet papildu fontus - šo tehnoloģiju sauc par fontu komplektiem.
Piemērs, izmantojot Google fontu API
Kopējiet un ielīmējiet šādu bloka kodu savā Html. Dokumentu, saglabājiet to un pēc tam atveriet pārlūkprogrammā.
Mēs iesakām pārbaudīt savu Html. Dokumentu dažādās pārlūkprogrammās, lai jūs varētu redzēt savstarpējās pārlūkprogrammas atšķirības (vai to prombūtnes).
Jūs varat eksperimentēt ar dažādiem fontiem, bet, piemēram, mēs izmantojām omāru austiņas.
< html > < head > < link rel = "stylesheet" type = "text/css" < strong > href \u003d. "http://fonts.googleapis.com/css?family\u003dlobster"< / strong >> < strong > < / strong > < / head > < body > < h1 > Seši pārskatījumi ir skaisti!< / h1 > < / body > < / html > |
Rezultāts:
Pieprasījums izmantot vairākus fontus ar Google fontu API
Pieņemsim, ka jums ir nepieciešami trīs fonti no Google fontu katalogs.. Nelietojiet daudz pieprasījumu. Vairāki pieprasījumi palielina skaitu Http. Pieprasījumi. Mazāks daudzums Http. Pieprasījumi samazina tīmekļa lapas reakcijas laiku.
Tā vietā, lai veiktu daudzus stilu lapas saites tagus, izmantojiet šādu formātu viena stila lapas saites taga href īpašumam.
Tālāk redzamais piemērs ielādēs visus trīs fontus ( Volkstorn., Yanone. un Droid sans.), Izmantojot vienu pieprasījumu.
< strong > Volkstorn.< / strong > | < strong > Yanone.< / strong > | < strong > Droid + sans.< / strong > |
Tagad jūs varat izmantot kādu no šiem trim fontiem jūsu stilos.
Kas jāpievērš uzmanība
Atsevišķi fontu nosaukumi, izmantojot | bez atstarpēm. Pievērsiet uzmanību + fontam Droid sans.. Izmantojiet + simbolu fonta nosaukumos vietā.
Padoms: Izmantojot too liels skaits Fonti vienā vaicājumā var palielināt lapas reakcijas laiku. Ievietojiet tikai tos fontus, kas jums patiešām ir vajadzīgi. Būt konservatīvs.
Svars un stila fonti fonti font API
Svara fontiem ir arī dažādi svara / stila parametri. Lai tos izmantotu, pievienojiet resnās zarnas fonta nosaukumu (:) un pēc tam norādiet stilu un svaru.
Piemēram, mēs norādām, ka mēs norādām treknrakstā. un treknots slīpris priekš Volkstorn., I. slīpraksts priekš Inconsolata..
http: //fonts.googleapis.com/css?family\u003dvolkkorn: b.,bi| Inconsolata: i.| Droid + sans
Ko pievērst uzmanību
Izmantojiet resnās zarnas (:) bez atstarpes pēc fonta nosaukuma, un pēc tam norādiet stila nosaukumu (I.E. Boldital) vai atbilstošo samazinājumu (I.E BI). Ja jums ir nepieciešamas daudzas viena fonta šķirņu, sadaliet tos ar komatu () bez atstarpēm.
Google fonts API padara web tipogrāfiju pievilcīgāku
Web dizaina nozare aktīvi meklē risinājumu vecajai problēmai, izvēloties un izmantojot tīmekļa fontus, un, piemēram, @ font-face ir atbilde.
Protams, ir dažādi spraudņi, lai izmantotu Google tīmekļa fontu fontus savā WordPress vietā, tomēr, ja jūs izstrādājat savu tēmu, tad jums var būt nepieciešams aizvērt tipogrāfiju ar to, apejot spraudņus. Zemāk mēs parādīsim, kā izmantot Google tīmekļa fontus savā tēmā.
Pirmkārt, dodieties uz vietni Google tīmekļa fonti. Un izvēlieties fontu, kas mums ir jāpiemēro objektā. Izmantojot īpašus rīkus, kas atrodas kreisajā pusē, varat sašaurināt meklēšanas apgabalu, jo fonti ir patiešām daudz. Es zināju, ka man bija tauku serif fonts virsrakstiem un emuāru nosaukumiem, tāpēc es izvēlējos Serif kategorijās nolaižamās izvēlnes kategorijās un pēc tam pārvietojās biezuma slīdni (biezums) pa labi.
Tā rezultātā, 617 iespējas, kas man piedāvātas vienmērīgi samazinājās līdz 5. Jums ir diezgan daudz iespēju, lai veiktu priekšskatījums Fonti - jūs varat redzēt, kā vārds izskatīsies, piedāvājums, teksta punkts vai plakāts izvēlētajā fontā. Varat izvēlēties iepriekš noteiktu tekstu, varat norādīt savu tekstu, izvēlieties vajadzīgo fonta lielumu.
Kad esat atradis fontu, kuru vēlaties izmantot savā vietnē, vienkārši noklikšķiniet uz pogas Pievienot uz kolekcijas.
Jūs varat pievienot desmitiem fontu jūsu kolekcijai. Tomēr tas ne vienmēr ir nepieciešams. Ja jūs to varat izdarīt, tas nenozīmē, ka jums tas jādara. Mēģiniet ierobežot sevi ar ne vairāk kā trim fontiem. Un vēl labāk divi. Tādu iemeslu dēļ es joprojām gribētu izmantot novecojušu tīmekļa drošu fontu galvenajam teksta tekstam un saglabāt tīmekļa fontus virsrakstiem un citiem elementiem, kam nepieciešama īpaša izteiksme vai uzmanība sev. Commier par jūsu fontu skaidrību - jums nevajadzētu izmantot āķīgs fontu, ja apmeklētāji nevar izjaukt to, kas ir rakstīts.
Kad jūs pievienot savus fontus kolekcijai, jūs redzēsiet tos zilā sadaļā apakšā vietnes. Kad jūsu kolekcija parādīsies fonti, kurus vēlaties izmantot, vienkārši noklikšķiniet uz pogas Lietot.
Pēc tam jūs pāriet uz ekrānu, kurā tiks iesniegts norādījums, kas sastāv no četriem soļiem. No tā jūs uzzināsiet, kā izmantot fontus. Ja vēlaties lejupielādēt atlasītos fontus, lai tos izmantotu grafiskajā redaktorā, lai novērtētu tos vai padarītu pievilcīgu ekrānuzņēmumu ekrānuzņēmumu .png par savu tēmu, tad jūs vienkārši noklikšķināt uz lejupielādes pogas augšpusē lapas. Ja jūs vienkārši vēlaties izmantot fontu savā tēmā, tad jums nav nepieciešams to lejupielādēt datorā.
Pirmajā posmā jūs varat izvēlēties spraudņa stilu un biezumu. Otrajā posmā jūs varat izvēlēties savienojumu rakstzīmju kopu. Varat arī novērtēt, kā jūsu fontu kolekcija atspoguļos lapas iekraušanas ātrumu.
Tagad mēs ejam uz trešo soli, kas vairs nav tik vienkārši kā iepriekšējās. Trešajā posmā mēs saņemam kodu, kas nepieciešams, lai pievienotu mūsu vietnēs - trīs dažādas iespējas. Mēs izvēlamies standarta opciju - tomēr mēs kaut ko nedaudz no Google norādījumiem, lai atbalstītu noteiktās metodes, lai pievienotu stilus WordPress tēmām. Standarta versijas kodeksā kopējiet tikai URL, kas norādīts kā saite taga href atribūts.
Pēc tam atveriet funkcijas.php tēmas failu. Mēs izveidosim funkciju, lai lejupielādētu CSS, ko mēs izmantosim mūsu tēmā:
Funkcija Ggl_Load_Styles () ()
Skatiet GGL prefiksu no manas funkcijas? Tas ir viens no veiksmīgajam WordPress praktizētājam. Vienmēr pievienojiet prefiksu jūsu funkciju nosaukumiem WordPress, lai samazinātu konfliktu risku ar citām jūsu tēmas funkcijām, meitasuzņēmuma vai spraudņiem.
Tagad šajā funkcijā mums ir jāreģistrē mūsu no Google saņemto stilu tabula:
Funkcija GGL_LOGE_STYLES () (ja (! IS_Admin ()) (WP_Register_style ("GoogleFont", "http://fonts.googleapis.com/css?family\u003dholtwood+one+Sc|rouge+script");))
Mēs izmantojam wp_register_style funkciju. Pirmais arguments ir deskriptors, t.sk. Samazinājums, ko mēs varam izmantot, lai pārsūdzētu šo stilistu tabulu mūsu kodeksā. Otrais arguments ir ceļš uz failu. Mēs izmantojam URL, ko mēs saņēmām Google-instrukciju trešajā posmā.
Tālāk mēs savienojam mūsu pamata stila tabulu mūsu tēmai. Es ceru, ka jūs neesat ievietojis saites tagu galvu sadaļā jūsu header.php failu? Ja tā, tad dodieties atpakaļ uz failu un dzēsiet šo kodu. Pēc tam pievienojiet stila tabulu funkcijās.Php failā:
Funkcija GGL_LOGE_STYLES () (ja (! IS_Admin ()) (wp_register_style ("GoogleFont", "http://fonts.googleapis.com/css?family\u003dholtwood+oneSsC|rouge+Script"); wp_enqueue_style ("GGT ", Get_stylesheet_uri (), masīvs (" GoogleFont "));))
Mēs izmantojam wp_enqueue_style funkciju. Tam ir tādi paši argumenti kā wp_register_style. Vispirms mēs piesiet deskriptoru mūsu stilista tabulā. Tad iegūstiet ceļu uz mūsu stila tabulu. Par laimi, WordPress, jūs varat iegūt ceļu caur Get_Stylesheet_uri () funkciju. Pēc tam mēs norādām atkarības. Mūsu style.css fails ir atkarīgs no Google tīmekļa fonta stila tabulas.
Visbeidzot, mēs izmantojam wp_enqueue_scripts āķi, lai izsauktu mūsu funkciju:
Funkcija GGL_LOGE_STYLES () (ja (! IS_Admin ()) (wp_register_style ("GoogleFont", "http://fonts.googleapis.com/css?family\u003dholtwood+oneSsC|rouge+Script"); wp_enqueue_style ("GGT ", get_stylesheet_uri (), masīvs (" googlefont ");))) add_action (" wp_enqueue_scripts "," ggl_load_styles ");
Ar funkcijām.Php ir pabeigta. Tagad mēs esam atstājuši, lai veiktu pēdējo soli, lai izmantotu izvēlēto fontu. Ceturtais solis B. google instrukcijas Parāda, kādas vērtības mums ir jāpanāk fonta ģimenes īpašums, lai izmantotu mūsu fontu. Es gribu darīt visus savus virsrakstus ar Holtwood One SC:
H1, H2, H3, H4, H5, H6 (fonta ģimene: "Holtwood One SC", Serif;)
Un es vēlos veikt vietnes aprakstu. Rouge skripts:
Site-Apraksts (Fonta ģimene: "Apaļais skripts", kursīvs;)
Viss! Ne vairāk neko nedariet! Jūs esat pievienojis Google Web fontu fontus jūsu WordPress tēmai. Izmantojiet tos atbildīgus!
