Как я могу проверить, заблокирован ли шрифт awesome в клиентском браузере? - PullRequest
Новая
       39

Как я могу проверить, заблокирован ли шрифт awesome в клиентском браузере?

0 голосов
/ 07 февраля 2019

Прежде всего, здесь очень похожий вопрос:
Как проверить, загружен ли Font Awesome на веб-страницу с помощью javascript?

Я попытаюсь объяснить, почемуу меня другой вопрос.

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

CSS: 

font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;

Шрифт потрясающий, но сложнее, так как он использует символы вне нормального диапазона шрифтов и не может иметь простойрешение css в одну строку.

Доступно несколько вариантов, в том числе использование изображений или, в некоторых случаях, символов других шрифтов, аналогично значку, но для всех подходов необходим способ проверить, работает ли шрифт awesome на самом деле илинет, в браузере отдельного клиента.

В ответе на связанный вопрос сказано, что вы можете проверить, загружен ли шрифт awesome, с помощью этого кода: 

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onload = function () {
  var span = document.createElement('span');

  span.className = 'fa';
  span.style.display = 'none';
  document.body.insertBefore(span, document.body.firstChild);

  if ((css(span, 'font-family')) !== 'FontAwesome') {
    // add a local fallback
  }
  document.body.removeChild(span);
};

Однако мой локальный запасной вариантникогда не выполняется, поскольку css(span, 'font-family') фактически возвращает FontAwesome.Я полагаю, что это потому, что файл CSS импортируется без проблем , а CSS говорит, что семейство шрифтов должно быть FontAwesome.Факт остается фактом, что FontAwesome не работает.Другими словами, принятый ответ просто проверяет, существует ли шрифт «удивительный», а не блокируется ли сам веб-шрифт из-за соображений безопасности.

ОП другого вопроса в комментариях поясняет, почему они задали вопрос:

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

Моя проблема заключается в том, что браузеры блокируют веб-шрифты, и я надеюсь, что заголовок достаточно ясен, чтобы считать его отдельным вопросом.Проблема существует в комбинированной настройке Windows 10 и IE11.Я исчерпал свои возможности, чтобы просто отключить настройки безопасности, блокирующие шрифт.

Двойное объяснение вопроса:

Вопрос совсем не является дубликатом предложенный вопрос .Это не о том, загружен ресурс или нет.Загрузка ресурсов работает просто отлично.Хозяева не заблокированы.Рендеринг и отображение веб-приложений - это проблема, которая также объясняется в исходном вопросе, но упоминается снова, поскольку кто-то предложил закрыть ее как дубликат.

РЕДАКТИРОВАТЬ, ДАЛЬНЕЙШЕЕ ЧТЕНИЕ:

Мои попытки отключить настройки, блокирующие веб-шрифты, описаны здесь

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

Используемое вами решение не будет работать, потому что window.getComputedStyle не скажет вам о отображаемом шрифте, но о шрифте, определенном в таблице стилей, загруженном или ином ( ref ).Вы можете использовать эвристику: 

window.onload = function() {
  var fas = document.createElement("span");
  fas.className = "fas fa-ambulance";
  fas.style.position = "absolute";
  fas.style.left = 0;
  fas.style.top = 0;
  fas.style.visibility = "hidden";
  document.body.appendChild(fas);
  window.setTimeout(function() {
    var widthBefore = fas.offsetWidth;
    fas.style.fontFamily = "asdf";
    var widthAfter = fas.offsetWidth;
    if (widthBefore === widthAfter) {
      console.log("Font Awesome Blocked");
    } else {
      console.log("Font Awesome Loaded");
    }
    document.body.removeChild(fas);
  }, 2000);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

Выше создается элемент, который использует Font Awesome и сравнивает его ширину с элементом, который вынужден использовать резервный шрифт.Сравнение ширины покажет, использовал ли браузер запасной шрифт и для Font Awesome.

0 голосов
/ 08 февраля 2019

На вашей странице вы можете использовать onload и onerror событие

Пример 

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
      onload="alert('everythings looks fine')" 
      onerror="alert('error while loading fontawesome');">

Внутри события вы можете установить глобальную переменную.

ОБНОВЛЕНО

Если вы хотите узнать, работает ли шрифт, вы можете проверить, используется ли шрифт: 

<html>
  <head>
    <link rel="stylesheet"
          href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"/>
    <script>
      function check(){
        console.log(window.getComputedStyle(document.getElementById('foo')).getPropertyValue("font-family"));
      }
    </script>
  </head>
  <body onload="check();"/>
     <span id="foo" class="fa"></span>
  </body>
</html>

В этомНапример, вы видите «Font Awesome 5 Free» в консоли, если Font Awesone работает

...