Hemsida » Kodning » Google-teckensnitt fungerar inte i Kina - hur man åtgärdar det

    Google-teckensnitt fungerar inte i Kina - hur man åtgärdar det

    Anledningen till att vi använder Google API för att betjäna bibliotek som jQuery och Web Fonts är att det tjänar snabbt genom Googles pålitliga infrastruktur. Den används nästan överallt, och så mycket att vissa användare kanske redan har cacheminnet lagrat i sin webbläsare, vilket gör att biblioteken laddar även snabbare.

    Tyvärr är det inte fallet i Kina. Kinas regering stängde tillgången till många av Googles tjänster, inklusive Google API, 2014. Risken är att din webbplats kan visas delvis bruten i Kina eftersom jQuery och webbsidorna värd Google är otillgängliga.

    I det här inlägget ska vi se hur vi kringgår Kinas "digitala" muren, så vår hemsida kan springa som hur den ses utanför Kina. Vi kommer att använda ett alternativt teckensnittsbibliotek som speglar Google-teckensnitt och bibliotek, men först måste vi införa några åtgärder för att identifiera användare som haglar från Kina.

    Identifiera användarplats

    Till att börja med måste vi hitta var vår besökare kommer ifrån och att göra det, vi använder detta WIPMania API som tillåter hämtning av en besökares geolocation, inklusive deras landnamn:

     $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', funktion (data) swal ('Du är från', data.address.country);); 

    Vi använder jQuery $ .getJSON att ringa API. Vi passerar sedan data.address.countryvilket borde berätta för oss var besökaren kommer ifrån. Här är en demo.

    Tillhandahållande av alternativ webbtypkälla

    Så nu när vi kan hämta vår besökare, kommer vi att ersätta Google Fonts med Useso-bibliotek, en CDN-tjänst som speglar teckensnitt och bibliotek från Google API, för att tjäna besökare från Kina.

    I detta skede har vi fortfarande våra typsnittstyp som pekar på Google API:

      

    Vi kommer att ersätta href inom länk element med en JavaScript-funktion.

     funktion () var $ intial = $ (detta) .attr ('href'), $ replace = $ intial.replace ('// fonts.googleapis.com / ',' //fonts.useso.com/ '); $ (detta) .attr (' href ', $ ersätt););  

    Den här funktionen ersätter varje länk för att referera till //fonts.useso.com/ i stället för att peka på Google API-adress, //fonts.googleapis.com/.

    Funktionen kommer endast att köras när besökaren är från CN, Kinas internationella landskod.

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

    Vi är redo. Nu kommer besökare från Kina att serveras teckensnitt via //fonts.useso.com/ som inte blockeras av den kinesiska regeringen.