Google-fontit eivät toimi Kiinassa - kuinka korjata se

Syy, miksi käytämme Google API: ta palvelemaan kirjastoja, kuten jQuery ja Web Fonts, on, että se palvelee nopeasti Googlen luotettavien infrastruktuurien kautta. Sitä käytetään lähes kaikkialla, ja niin paljon, että joillakin käyttäjillä on jo tallennettu välimuisti niiden selaimeen, mikä tekee kirjastojen lataamisesta jopa nopeampi.

Valitettavasti näin ei ole Kiinassa. Kiinan hallitus sulki pääsyn moniin Googlen palveluihin, mukaan lukien Google API, vuonna 2014. Mahdollisuudet ovat, että sivustosi saattaa näkyvät osittain rikki Kiinassa, koska Googlen isännöimät jQuery- ja web-kirjasimet eivät ole käytettävissä.

Tässä tehtävässä aiomme nähdä, miten kiertää Kiinan "digitaalinen" Great Wall, joten verkkosivumme voi ajaa kuin miten sitä tarkastellaan Kiinan ulkopuolella. Käytämme vaihtoehtoista fonttikirjastoa, joka heijastaa Google-fontteja ja kirjastoja, mutta ensin meidän on toteutettava joitakin toimenpiteitä, joiden avulla tunnistetaan käyttäjät, jotka kotoisin Kiinasta.

Käyttäjän sijainnin tunnistaminen

Ensinnäkin meidän on löydettävä, missä kävijämme on, ja käytämme tätä, käytämme tätä WIPMania-sovellusliittymää, jonka avulla voit hakea kävijän maantieteellisen sijainnin, mukaan lukien maan nimi:

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', toiminto (data) swal ('Olet peräisin', data.address.country);); 

Käytämme jQueryä $ .getJSON kutsua API: ta. Sitten välitämme data.address.countryjoka kertoo meille, mistä kävijä on. Tässä on demo.

Vaihtoehtoisen Web-fontin lähde

Nyt kun voimme hakea vierailijasi sijainnin, aiomme korvata Googlen fontit Useso-kirjastoilla, CDN-palvelulla, joka peittää fontit ja kirjastot Google API: sta..

Tässä vaiheessa meidän fonttityylimme osoittavat edelleen Google-sovellusliittymää:

Korvataan href sisällä linkki elementti, jossa on JavaScript-toiminto.

 toiminto korvaaGoogleCDN () $ ('linkki'). kukin (toiminto () var $ intial = $ (tämä) .attr ('href'), $ aizstaa = $ intial.replace ('// fonts.googleapis.com / ',' //fonts.useso.com/ '); $ (tämä) .attr (' href ', $ aizstaa););  

Tämä toiminto korvaa kunkin linkin //fonts.useso.com/ sen sijaan, että osoittaisit Googlen API-osoitteeseen, //fonts.googleapis.com/.

Toiminto toimii vain, kun kävijä on CN, Kiinan kansainvälinen maakoodi.

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

Olemme kaikki asettuneet. Nyt kävijöitä Kiinasta palvelee fontteja //fonts.useso.com/ jota Kiinan hallitus ei estä.