Fallback from FontAwesome if скачать шрифт заблокирован

я разрабатываю веб-страницу и нашел FontAwesome как довольно аккуратный способ добавить хорошие значки к вещам, однако по умолчанию загрузки шрифтов блокируются плагин NoScript для Firefox.

Это не будет проблемой для обычных шрифтов, но FontAwesome использует символы юникода, которые намеренно выходят за пределы обычного диапазона печати большинства шрифтов, поэтому добавление стека шрифтов в CSS (например:font-family: FontAwesome, sans-serif;) не будет работать, так как все значки просто отображаются как шестигранные квадраты.

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

конечно, было бы легко сделать это с помощью Javascript / jQuery, но, конечно, если это NoScript это делает блокировку, которая тоже не помогает, и она не проходит тест, если у пользователя нет включенного javascript.

что было бы идеально, было бы иметь некоторый CSS стиль / правило, которое действует как резерв для любых объектов FontAwesome, заменяя их некоторым базовым символом или даже просто ничего не отображая.

для тех, кто не знаком с FontAwesome / TL; DR:

все значки FontAwesome имеют класс CSS "fa":

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

FontAwesome загружает пользовательский шрифт, как это (я удалил

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
}

и тогда конкретный значок FontAwesome будет иметь свой собственный конкретный класс, который вставляет соответствующий unicode характер, например:

.fa-star:before {
    content: "";
}

HTML для значка будет выглядеть так:

<i class="fa fa-star"></i>

Итак, проблема здесь: Нам нужно каким-то образом, желательно в CSS, заменить, удалить или скрыть содержимое элементов с помощью класса CSS "fa", если шрифт "FontAwesome" не загружен.

20
css font-awesome html javascript

3 ответов

один из способов обойти это было бы вытащить другой файл CSS для <noscript> пользователи и переопределить .fa-* классы для изображений и спрайтов.

например:

<noscript>
<link rel="stylesheet" type="text/css" href="safe-icons.css" />
</noscript>

код safe-icons.css файл может выглядеть примерно так:

.fa {
    display: inline-block;
    overflow: hidden;
    color: transparent;
    font-family: sans-serif;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
}

.fa-star { background-image: url('star.png'); }

конечно, у вас будет вопрос о работе с иконками, вытащенными из FontAwesome, которые имеют разные размеры, но это, безусловно, ударит по балансу и окажет по крайней мере что-то пользователям с NoScript включен.

7

Ну, Я думаю Я решил это благодаря вам, ребята, ведущие меня в правильном направлении:

в голову, я положил это:

<noscript>
    <style>
        [class*="fa-"]:before
        {
            content:"+";
        }
    </style>
</noscript>

это выбирает каждый элемент класса fa-icon, которые все определены в шаблоне:

.fa-heart:before {
  content: "\f004";
}

и заменяет содержимое общим символом или вообще всем, что мы могли бы вставить (включая ничего).

Кажется ли это разумным или есть какой-то ужасный побочный эффект, который я пропустил здесь?

Я понимаю, что есть удаленная возможность, что кто-то заблокировал загрузку шрифтов, но javascript включен, но пока я рад игнорировать эту демографию клиентов ;)

правка, чтобы добавить:

после всего этого времени этот ответ все еще получает голоса (спасибо!), очевидно, это все еще проблема, поэтому я подумал, что опубликую эту ссылку о значительном улучшении (и обрезке) FontAwesome различными способами: FontAwesome Исправлено

мой любимый фактически встраивает выбранные значки в качестве встроенного Base64 кодированного SVG, либо в HTML, либо в CSS. Это кажется довольно элегантным и эффективным, особенно если вам нужно только несколько значков из набора. ФА все еще кажется мне выдумкой.

6

недавно я столкнулся с проблемами, когда JS включен, но пользователи находятся в защищенной сети, которая блокирует либо все веб-шрифты, либо FA в частности.

чтобы исправить это, я использовал что-то подобное этой:

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);
};

В основном, это немного jQuery, который создает элемент FA на странице и проверяет, правильно ли загружен шрифт. Если нет, вы можете осуществить откат. В моем случае резервным вариантом было вставить <img> тег с общим заполнителем графический.

это не чистый CSS, но он (1) позволяет использовать более мощные резервные меры и (2) охватывает больше сценариев, чем просто <noscript>

2