Google Fonts Tidak Berfungsi di Cina - Cara memperbaikinya

Alasan kami menggunakan Google API untuk melayani perpustakaan seperti jQuery dan Web Font adalah karena ia melayani dengan cepat melalui infrastruktur Google yang andal. Ini digunakan hampir di mana-mana, dan sebagian besar pengguna mungkin sudah memiliki cache yang tersimpan di browser mereka, yang membuat perpustakaan memuat bahkan lebih cepat.

Sayangnya, itu tidak terjadi di Cina. Pemerintah China menutup akses ke banyak layanan Google termasuk Google API pada 2014. Kemungkinannya adalah situs web Anda tampak rusak sebagian di Cina karena jQuery dan font web yang dihosting di Google tidak dapat diakses.

Dalam posting ini, kita akan melihat cara mem-bypass Tembok Besar "digital" China, sehingga situs web kami dapat berjalan seperti bagaimana dilihat di luar China. Kami akan menggunakan pustaka font alternatif yang mencerminkan Google Font dan pustaka, tetapi pertama-tama kita perlu melakukan beberapa tindakan untuk mengidentifikasi pengguna yang berasal dari China.

Mengidentifikasi Lokasi Pengguna

Untuk memulainya, kita perlu menemukan dari mana pengunjung kita berasal dan untuk melakukannya, kita akan menggunakan API WIPMania ini yang memungkinkan pengambilan geolokasi pengunjung, termasuk nama negara mereka:

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', fungsi (data) swal ('Anda dari', data.address.country);); 

Kami menggunakan jQuery $ .getJSON untuk memanggil API. Kami lalu lulus data.address.countryyang harus memberi tahu kami dari mana pengunjung berasal. Ini demo.

Menyediakan Sumber Font Web Alternatif

Jadi sekarang kita dapat mengambil lokasi pengunjung kita, kita akan mengganti Google Fonts dengan perpustakaan Useso, layanan CDN yang mencerminkan Font dan Perpustakaan dari Google API, untuk melayani pengunjung dari China.

Pada tahap ini, gaya font kami tetap mengarah ke Google API:

Kami akan mengganti href dalam link elemen dengan fungsi JavaScript.

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

Fungsi ini menggantikan setiap tautan untuk merujuk //fonts.useso.com/ sebagai ganti menunjuk ke alamat Google API, //fonts.googleapis.com/.

Fungsi hanya akan berjalan ketika pengunjung berasal CN, Kode negara internasional Tiongkok.

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

Kita semua siap. Sekarang, pengunjung dari Tiongkok akan dilayani font melalui //fonts.useso.com/ yang tidak diblokir oleh pemerintah Cina.