Проверьте, использует ли пользователь браузер в Китае или нет
Китай блокирует API Google с 2014 года, что означает длительное время загрузки веб-сайтов с API-интерфейсами Map или Fonts API. Для этого есть обходной путь, поскольку fonts.useso.com также предоставляет ту же библиотеку шрифтов (см. http://libs.useso.com/, http://fonts.useso.com/ соответственно).
Следующий код
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>
может быть изменен на
<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>
и это будет хорошо работать в Китае.
Но что, если я хочу динамически выбрать источник, из которого я хочу загрузить API, учитывая местоположение, откуда пользователь посещает?
4 ответа
Вы можете использовать сторонний сервис для определения местоположения пользователя и переключения вашего шрифта.
Например, вы можете интегрировать http://userinfo.io/, который является бесплатным. В этом случае местоположение определяется на основе IP-адреса, поэтому, если китаец приедет из Европы, он будет находиться в Европе, и шрифты Google будут загружены.
Вставьте это в свой <head>
:
<script type="text/javascript" href="//cdnjs.cloudflare.com/ajax/libs/userinfo/1.0.0/userinfo.min.js"></script>
<script type="text/javascript">
UserInfo.getInfo(function(data) {
// the "data" object contains the info
if (data.country.code == 'CN') {
// load your fallback fonts
} else {
// Load your google fonts
}
}, function(err) {
// the "err" object contains useful information in case of an error
});
</script>
Отказ от ответственности: я написал и поддерживаю http://userinfo.io/
Часовой пояс сделает свое дело:
var offset = new Date().getTimezoneOffset();
if(offset/60 == -8){
console.log('Hello from China!');
}
Обратите внимание, что это игнорирует клиентов с неправильной конфигурацией часов, но может охватывать большинство сценариев.
Шрифты Google теперь размещаются на серверах в Китае, что устраняет медленное время загрузки. (По состоянию на август 2016 года) Смотрите мой ответ здесь для полного описания.
Я наткнулся на другое решение, которым я хотел бы поделиться. Я думаю, что это круто, поскольку не нужно включать библиотеку, а получать информацию только через запрос ajax.
function replaceGoogleCDN() {
$('link').each(function(){
var $intial = $(this).attr('href'),
$replace = $intial.replace('//fonts.googleapis.com/', '//fonts.useso.com/');
$(this).attr('href', $replace);
});
}
$.getJSON('//api.wipmania.com/jsonp?callback=?', function (data) {
if ( data.address.country_code == 'CN' ) {
replaceGoogleCDN();
}
});
РЕДАКТИРОВАТЬ: Не удивительное решение, хотя, если вы находитесь на HTTPS, так как вы не можете загрузить из источника http и wipmania, кажется, не имеет действительного сертификата ssl.