중국에서 작동하지 않는 Google 글꼴 - 문제를 해결하는 방법

Google API를 사용하여 jQuery 및 Web Fonts와 같은 라이브러리를 제공하는 이유는 Google의 신뢰할 수있는 인프라를 통해 빠르게 제공된다는 것입니다. 거의 모든 곳에서 사용되고 있으며, 일부 사용자는 이미 브라우저에 캐시를 저장하여 라이브러리를로드 할 수 있습니다. 조차 더 빠른.

불행히도 중국에서는 그렇지 않습니다. 중국 정부는 2014 년 Google API를 비롯한 많은 Google 서비스에 대한 액세스를 차단했습니다. 귀하의 웹 사이트가 부분적으로 부서진 것처럼 보입니다 Google에서 호스팅하는 jQuery 및 웹 글꼴에 액세스 할 수 없기 때문에 중국에서.

이 포스트에서 우리는 중국의 "디지털"만리장성을 우회하는 방법을 보게 될 것이므로, 우리 웹 사이트는 중국 밖에서 어떻게 보는지와 같이 운영 될 수 있습니다. Google 글꼴 및 라이브러리를 반영하는 대체 글꼴 라이브러리를 사용할 예정이지만 먼저 중국에서 우박을 쓴 사용자를 식별 할 수있는 몇 가지 조치를 취해야합니다..

사용자 위치 식별

우선 우리는 방문자가 어디에서 왔는지를 알아야하며, 방문자 이름과 위치 정보를 검색 할 수있는 WIPMania API를 사용합니다.

 $ .getJSON ( 'http://api.wipmania.com/jsonp?callback=?', function (data) swal ( '당신은 from, data.address.country);); 

우리는 jQuery를 사용한다. $ .getJSON API 호출 우리는 다음을 통과한다. data.address.country방문자가 어디 있는지 알려줄 것입니다. 여기에 데모가있다..

대체 웹 글꼴 소스 제공

이제 방문자 위치를 검색 할 수있게되었으므로 Google 글꼴을 Google API의 글꼴 및 라이브러리를 반영한 ​​CDN 서비스 인 Useso 라이브러리로 대체하여 중국 방문객에게 서비스를 제공합니다.

이 단계에서는 여전히 Google API를 가리키는 글꼴 스타일을 사용합니다.

우리는 href 내 링크 JavaScript 함수가있는 요소.

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

이 함수는 참조 할 각 링크를 바꿉니다. //fonts.useso.com/ Google API 주소를 가리키는 대신, //fonts.googleapis.com/.

방문자가있는 경우에만 함수가 실행됩니다. CN, 중국의 국제 국가 코드.

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

우리는 모두 준비가되어 있습니다. 이제 중국 방문객은 다음을 통해 글꼴을 제공 받게됩니다. //fonts.useso.com/ 중국 정부에 의해 차단되지 않은.