iPad/Mac Safari не загрузит шрифт

Я столкнулся с этой странной проблемой на SAFARI Browser iPad и Mac Machine с моим приложением (развернутым на IIS). Хотя, всякий раз, когда я пытаюсь редактировать CSS на вкладке ResourcesDeveloper Tools, шрифт внезапно загружается сам, а затем остается. Даже одно редактирование пространства в CSS будет загружать шрифты. Все работает нормально на Safari для Windows.iPad/Mac Safari не загрузит шрифт

Кроме того, если я продолжаю работать на страницах своего приложения в Safari, шрифты загружаются на страницы после случайного времени (время варьируется от 10 секунд до 10 минут и более), а затем остаются там до тех пор, пока кеш не будет вытер.

Я попробовал несколько вещей, чтобы исправить это:

Удаление цитаты из @font-face декларации, как я где-то читал, что Safari не будет загружать шрифты в кавычки. Никакой успех, хотя, firefox остановил предоставление шрифтов, поскольку там нужны котировки.
Проверен MIME-Type на IIS для .svg Типы файлов. Нет успеха.
Verified ID в .svg Объявление из файла шрифта. Нет успеха.
Извлеченные @font-face объявления всех шрифтов в отдельный файл и включали его как верхнюю часть объявления CSS в теге <head>.
Пробовал удаление и нажатие тега CSS после того, как браузер обнаружен как SAFARI. Это работало, но это неприятный хак. Код котируется ниже

КОД:

var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; 
if (isSafari) { 
    if ($('#fontCss').length) { 
     $('#fontCss').remove(); 
     $('head').append("<link rel='stylesheet' href='assets/css/fontAwesome/font-awesome.css'>"); 
     alert('This is Safari'); 
    } 
}

Можете ли вы, ребята, пожалуйста, предложить вещи, которые я могу попытаться решить эту проблему. Я пробовал делать тестовые страницы и скрипты с одинаковыми шрифтами и тестировал их на одних и тех же устройствах, все отлично работает на демонстрационных страницах, но не с моим приложением.

источник

2015-09-07 Vibhor Dube

Единственное, что, кажется, работает, это удаление и нажатие тега ссылки с помощью CSS-файла после загрузки страницы. Мое приложение - одностраничное веб-приложение с AngularJS, поэтому мне не нужно беспокоиться о том, что JS будет выполняться при каждом изменении экрана, пока страница не будет явно обновлена.

Я извлек все объявления @font-face (включая font-awesome's @ font-face) из их соответствующих файлов и сохранил их в двух отдельных файлах, а именно: fonts.css и fonts_safari.css. Затем включали fonts.css в index.html:

<link rel="stylesheet" id="cssReplace" href="assets/css/app/fonts.css">

Тогда как раз перед концом тела тега, я добавил этот JS фрагмент кода, который заменит декларацию файла CSS после загрузки страницы.

<script> 
    $(document).ready(function() { 
     setTimeout(function() { 
      var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; 
      if (isSafari) { 
       if ($('#cssReplace').length) { 
        $('#cssReplace').remove(); 
        $('head').append("<link rel='stylesheet' href='assets/css/app/fonts_safari.css'>"); 
       } 
      } 
     }, 10); 
    }); 
</script>

PS: Я использую setTimeout взять преимущество Javascript быть язык сценариев, который работает на одном потоке. Это как-то не работает без него в моем приложении. Read This ответ на использование setTimeout для дальнейших ссылок.

источник

2015-10-01 13:06:13

iPad/Mac Safari не загрузит шрифт

ответ

Смежные вопросы