2015-04-17 3 views
11

Я уже давно использую значки шрифта Awesome, но после раунда отслеживания ошибок от внешней компании они обнаружили, что шрифт awesome icons не отображался в некоторых случаях.Шрифт Удивительный значок, не отображающийся в Safari и iPad

версия шрифта удивительным является 4.3.0

Версии не работает в от внешней компании: iPad4 (IOS 7.1.2) Safari 8.0.2 на Mac OS 10.10.x Safari 7.1.2 на Mac OS 10.9.x Safari 7.1.4 и 8.0.2 Safari версии 8.0.3 (10600.3.18) на Mac OS X 10.10.2 (14C109) IPad Air 2 с прошивкой 8.0.3

Мы внутренне испытания на: Safari 8.0.2

Проблема последовательности 1 - Вход на сайт - Иконки видны - Выйти, близкий браузер, удалить все данные веб-сайта, войдите в систему - нет иконки/квадратов, присутствующих

Проблема последовательности 2 - Вход на сайт - Иконки, не видимые вообще/квадраты присутствуют

Веб-сайт находится на собственном выделенном сервере, используя лампу. Не происходит в FF, Chrome или даже IE.

Если у кого-то была такая же проблема или вы знаете, какое решение работает, пожалуйста, помогите. Мы посмотрели и попробовали примерно 10 разных вещей, например, упорядочивание исходного кода, обновление css, использование ссылки на сайт и т. Д. И т. Д.

+0

У меня также есть эта проблема, если вам удалось добиться какого-либо прогресса. Я пробовал как самостоятельно, так и версию maxcdn ... – Kevin

+0

У нас та же проблема, http: // stackoverflow.com/questions/30193615/icon-font-are-rendered-as-squares-on-after-посещения-in-safari-ios-and-osx – Kristoffer

+0

Я открыл билет поддержки с Apple, но до сих пор они только запрашивали больше информацию без обратной связи о проблеме. – Kristoffer

ответ

2

Мы действительно нашли способ сделать это, но это временное решение. Это может помочь некоторым. Мы обнаруживаем версию браузера Safari, как и передать шрифт лицу инлайн:

<?php 
    //ugly workaround for fontawesome issue in Safari 
    $ua = $_SERVER["HTTP_USER_AGENT"]; 
    $safariorchrome = strpos($ua, 'Safari') ? true : false; 
    $chrome = strpos($ua, 'Chrome') ? true : false; 
    if ($safariorchrome == true AND $chrome == false): 
    ?> 
    <style type="text/css"> 
     @font-face{font-family:'FontAwesome';src:url('/css/current-font-awesome/fonts/fontawesome-webfont.eot?v=4.3.0');src:url('/css/current-font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('/css/current-font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('/css/current-font-awesome/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('/css/current-font-awesome/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('/css/current-font-awesome/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal} 
    </style> 
    <?php endif; ?> 
7

У меня была такая же проблема на Mac OSX (Yosemite) + Safari 8.0.8 и различных IOS 6 устройств. Я ориентирую Font Awesome 4.2.0, размещая локально на веб-сервере IIS.

Странно, что я обнаружил, что суффикс пути к библиотеке шрифтов Awesome CSS с кеш-бастером исправил проблему. например

font-awesome.min.css?v=1234 

Я не понимаю, почему это было необходимо, но пока это работает.

+0

Я думаю, что это недавняя проблема. Он будет работать на настольных хром, ipad. Но я бы показал квадраты на моем iphone. Кэш-версия сбрасывается, как указано выше. –

+0

Злобно простое, но эффективное решение. Великое мышление. – pimbrouwers

3

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" /> введите этот код в свой файл <head> </head>, все будет хорошо. Я предполагаю, что для сафари из яблока требуется какая-то подпись.

1

Мы сталкиваемся с той же проблемой. Значки материалов загружаются отлично в другом браузере, кроме iPad. Он загружается в первый раз, а последующая загрузка показывает текст вместо значка. Пробовал все решения, такие как самостоятельный хостинг, вызывая google api и CDN. Ничто не сработало для нас. Любая помощь будет принята с благодарностью. Но когда вы обновляете страницу, значок загружается.

Работайте с этим, чтобы принудительно перезагрузить страницу во время загрузки окна и когда это iPad. Это должно решить проблему.

var isTabLoaded = sessionStorage.getItem("isTabLoaded") == "true"; 
      var isUserBrowserIPad = navigator.userAgent.indexOf('iPad') > -1 
      if (!isTabLoaded && isUserBrowserIPad) { 
      window.location.reload(); 
      sessionStorage.setItem("isTabLoaded", "true"); 
      }; 
Смежные вопросы