Google Fontovi ne rade u Kini - kako to popraviti

Razlog zbog kojeg koristimo Google API za posluživanje knjižnica kao što su jQuery i web-fontovi jest da služi brzo kroz pouzdane Googleove infrastrukture. Koristi se gotovo svugdje i toliko da neki korisnici možda već imaju spremljenu predmemoriju u pregledniku, što knjižnice učitava čak brže.

Nažalost, to nije slučaj u Kini. Kineska vlada zatvorila je pristup mnogim Googleovim uslugama, uključujući Google API u 2014. godini djelomično slomljena u Kini jer su jQuery i web-fontovi hostirani u Googleu nedostupni.

U ovom postu, vidjet ćemo kako zaobići kineski "digitalni" Great Wall, tako da naša web stranica može funkcionirati kao što je prikazana izvan Kine. Koristit ćemo alternativnu knjižnicu fontova koja zrcali Google fontove i knjižnice, ali najprije ćemo morati uvesti neke mjere kako bismo identificirali korisnike koji dolaze iz Kine..

Identificiranje korisničke lokacije

Za početak, morat ćemo pronaći odakle je naš posjetitelj i kako bismo to učinili, koristit ćemo ovaj WIPMania API koji omogućuje dohvaćanje geolokacije posjetitelja, uključujući i naziv zemlje:

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', funkcija (podaci) swal ('Vi ste iz', data.address.country);); 

Koristimo jQuery $ .getJSON za pozivanje API-ja. Zatim prolazimo data.address.countrykoji bi nam trebao reći odakle je posjetitelj. Ovdje je demo.

Pružanje alternativnog izvora web-fonta

Sada kada možemo dohvatiti našu lokaciju za posjetitelje, zamijenit ćemo Google fontove s Useso knjižnicama, CDN uslugom koja zrcali fontove i knjižnice iz Google API-ja, kako bi poslužila posjetitelje iz Kine.

U ovom trenutku još uvijek imamo stilove fontova koji upućuju na Google API:

Mi ćemo zamijeniti href unutar veza element s funkcijom JavaScript.

 funkcija zamijeniGoogleCDN () $ ('link'). svaki (funkcija () var $ intial = $ (this) .attr ('href'), $ replace = $ intial.replace ('// fonts.googleapis.com / ',' //fonts.useso.com/ '); $ (this) .attr (' href ', $ zamjena););  

Ova funkcija zamjenjuje svaku vezu na koju se upućuje //fonts.useso.com/ umjesto da upućuju na adresu Google API-ja, //fonts.googleapis.com/.

Funkcija će se pokrenuti samo kada je posjetitelj CN, Kineski međunarodni kôd zemlje.

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

Svi smo spremni. Posjetitelji iz Kine bit će posluženi fontovima putem //fonts.useso.com/ što ne blokira kineska vlada.