Google-skrifttyper virker ikke i Kina - Sådan løses det

Årsagen til, at vi bruger Google API til at betjene biblioteker som jQuery og Web Fonts, er, at det tjener hurtigt gennem Googles pålidelige infrastrukturer. Den bruges næsten overalt, og så meget, at nogle brugere måske allerede har cachen gemt i deres browser, hvilket gør bibliotekerne belastede også selvom hurtigere.

Det er desværre ikke tilfældet i Kina. Kinas regering har lukket adgang til mange af Googles tjenester, herunder Google API i 2014. Det er sandsynligt, at dit websted kan vises delvist brudt i Kina, fordi jQuery og web skrifttyper hostet i Google er utilgængelige.

I dette indlæg vil vi se, hvordan vi kan omgå Kinas "digitale" muren, så vores hjemmeside kan løbe som hvordan det ses uden for Kina. Vi bruger et alternativ skrifttype bibliotek, der afspejler Google Fonts og biblioteker, men først skal vi indføre nogle foranstaltninger for at identificere brugere, der hagler fra Kina.

Identifikation af brugerens placering

Til at begynde med skal vi finde ud af, hvor vores besøgende er fra og for at gøre det, vi bruger denne WIPMania API, der tillader hentning af en besøgers geolokation, herunder deres landnavn:

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', funktion (data) swal ('Du er fra', data.address.country);); 

Vi bruger jQuery $ .getJSON at ringe til API'en. Vi passerer så data.address.countrysom skal fortælle os, hvor den besøgende er fra. Her er en demo.

Tilvejebringelse af alternativ web skrifttype kilde

Så nu vi kan hente vores besøgendes placering, skal vi erstatte Google Fonts med Useso-biblioteker, en CDN-tjeneste, der afspejler skrifttyper og biblioteker fra Google API, for at tjene besøgende fra Kina.

På dette tidspunkt har vi stadig vores skrifttypestile, der peger på Google API:

Vi vil erstatte href indenfor link element med en JavaScript-funktion.

 funktionen erstatterGoogleCDN () $ ('link'). hver (funktion ) var $ intial = $ (dette) .attr ('href'), $ erstat = $ intial.replace ('// fonts.googleapis.com / ',' //fonts.useso.com/ '); $ (dette) .attr (' href ', $ erstatte););  

Denne funktion erstatter hvert link for at henvise til //fonts.useso.com/ i stedet for at pege på Google API-adresse, //fonts.googleapis.com/.

Funktionen kører kun, når den besøgende er fra CN, Kinas internationale landekode.

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', funktion (data) if (data.address.country_code == 'CN') erstatterGoogleCDN ();); 

Vi er alle sammen. Nu vil besøgende fra Kina blive serveret skrifttyper via //fonts.useso.com/ som ikke er blokeret af den kinesiske regering.