Как предотвратить появление текста значка материала, когда Google JS не сможет их преобразовать?

Как вы предотвращаете отображение материала значка, когда Google JS не может преобразовать их в значки?

Значки определены в разметке как таковые:

<span class="material-icons">icon_name</span>

Пример: https://archive.fo/CKqKG/scr.png (см. Верхнюю строку кнопок).

Иконки материалов Документация: https://material.io/icons/

Это также проблема в поиске Google, где Google фактически будет читать и сохранять текст div вместо того, чтобы игнорировать его.

Пример: https://i.imgur.com/TixS06y.png

Я понимаю, что одним из решений является просто переключиться на.PNG (поставляется Google). Я хотел бы делать любые результаты в меньшей (сетевой) нагрузке на пользовательскую систему.

Благодарю!

ОТВЕТЫ

Ответ 1

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

.wf-loading, .wf-materialicons-n4-inactive {
  .material-icons {
    display: none;
  }
}

Вы можете, конечно, применять другие методы моделирования в соответствии с вашими предпочтениями для достижения наилучших результатов, например font-size: 0; , это будет зависеть от вашего сайта и использования.

Чтобы загрузить значки материалов с помощью загрузчика webfont, используйте следующую конфигурацию:

window.WebFontConfig = {
  google: {
    families: [
      'Material Icons',
    ],
  },
};

Ответ 2

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

Другие решения здесь не помогли мне (в том числе font-display:block который, как мне показалось, может быть многообещающим), поэтому я предложил свои собственные, используя CSS и jQuery. Я уверен, что вы могли бы легко адаптировать его для использования Vanilla JS.

CSS:

.material-icons{
    opacity:0;
}

JQuery:

$(window).load(function() {
    $('.material-icons').css('opacity','1');
});

Хитрость заключается в том, что, в отличие от более часто используемого слушателя $(document).ready(), $(window).load() ожидает загрузки всех элементов страницы перед тем, как их запустить. В этом случае это означает, что он не изменит непрозрачность значков, пока шрифт значков не будет загружен.

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

(Я также добавил переход к CSS .material-icons{transition:opacity 0.5s;} чтобы они .material-icons{transition:opacity 0.5s;} красиво и плавно.)

Ответ 3

Я столкнулся с этой же проблемой. Я считаю, однако, что использование псевдоселектора, такого как i.material-icons: до этого может помочь. См. Это для получения дополнительной информации.

---- EDIT: рабочий пример

i.material-icons:before{display:none;}

Ответ 4

Вы можете использовать font-display: block; просто добавьте этот CSS к своей HTML-главе:

<style>
   @font-face {
      font-family: 'Material Icons';
      font-display: block;
    }
</style>

для большей информации шрифт-дисплей

Ответ 5

Если вы используете angularjs, исправление может быть

<i class="material-icons-outlined" ng-bind-html=" 'icon_text' "></i>

или если вы используете jquery, то

HTML

<i material-icons="icon_text" class="material-icons"></i>

jQuery.onLoad

$('[material-icons]').each(function(){
  var icon_text = $(this).attr('material-icons');
  $(this).html(icon_text)
});

Значок появляется после загрузки страницы.

Ответ 6

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

<link rel="preconnect" href="//fonts.googleapis.com">
<link rel="preconnect" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Ответ 7

Простое решение:

Воспользуйтесь преимуществами class/css priority, чтобы "скрыть" значок, пока шрифты значков материала и css еще не загружены.

Для этого создайте класс со стилем display: none и поместите его перед классом .material-icons. Когда шрифты загружены, свойство отображения класса .material-icons переопределяет шрифты display: none, вызывая отображение значка. И это оно.

Пример:

.display-none {
    display: none;
}

// Important: .display-none class has to go before .material-icons ones!!!
<i class="display-none material-icons">settings</i>

Надеюсь, это поможет!