Página principal » Codificación » Las fuentes de Google no funcionan en China - Cómo solucionarlo

    Las fuentes de Google no funcionan en China - Cómo solucionarlo

    La razón por la que estamos utilizando la API de Google para servir a bibliotecas como jQuery y Web Fonts es que sirve rápidamente a través de las infraestructuras confiables de Google. Se usa en casi todas partes, y tanto es posible que algunos usuarios ya tengan el caché almacenado en su navegador, lo que hace que las bibliotecas se carguen. incluso Más rápido.

    Lamentablemente, ese no es el caso en China. El gobierno de China cerró el acceso a muchos de los servicios de Google, incluida la API de Google en 2014. Lo más probable es que su sitio web pueda aparece parcialmente roto en China porque las fuentes jQuery y web alojadas en Google son inaccesibles.

    En este post, vamos a ver cómo evitar la Gran Muralla "digital" de China, por lo que nuestro sitio web puede funcionar como se ve fuera de China. Utilizaremos una biblioteca de fuentes alternativa que refleje las fuentes y bibliotecas de Google, pero primero tendremos que poner algunas medidas para identificar a los usuarios que provienen de China..

    Identificación de la ubicación del usuario

    Para empezar, tendremos que encontrar de dónde es nuestro visitante y para hacerlo, usaremos esta API de WIPMania que permite recuperar la geolocalización de un visitante, incluido el nombre de su país:

     $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', function (data) swal ('Eres de', data.address.country);); 

    Usamos jQuery $ .getJSON para llamar a la API. Luego pasamos data.address.countryLo que debería decirnos de dónde es el visitante. Aquí hay una demo..

    Proporcionar fuente de fuente web alternativa

    Ahora que podemos recuperar la ubicación de nuestros visitantes, vamos a reemplazar las fuentes de Google con las bibliotecas de Useso, un servicio CDN que refleja las fuentes y las bibliotecas de la API de Google, para atender a los visitantes de China..

    En esta etapa, todavía tenemos nuestros estilos de fuente que apuntan a la API de Google:

      

    Vamos a reemplazar el href dentro de enlazar elemento con una función de JavaScript.

     function replaceGoogleCDN () $ ('link'). each (function () var $ intial = $ (this) .attr ('href'), $ replace = $ intial.replace ('// fonts.googleapis.com / ',' //fonts.useso.com/ '); $ (this) .attr (' href ', $ replace););  

    Esta función reemplaza cada enlace para referirse a //fonts.useso.com/ en lugar de apuntar a la dirección API de Google, //fonts.googleapis.com/.

    La función se ejecutará solo cuando el visitante sea de CN, Código de país internacional de China.

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

    Estamos todos listos. Ahora, los visitantes de China recibirán fuentes a través de //fonts.useso.com/ que no está bloqueado por el gobierno chino.