当Google的JS无法转换它们时，如何防止显示实质图标文本? [英] How to prevent material icon text from showing up when Google's JS fails to convert them?

问题描述

当Google的JS无法将其转换为图标时，如何防止显示实质的图标文本?

How do you prevent material icon text from showing up when Google's JS fails to convert them to icons?

图标在标记中的定义如下:

Icons are defined in markup as such:

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

示例: https://archive.fo/CKqKG/scr.png (请参见按钮的第一行).

Example: https://archive.fo/CKqKG/scr.png (see the top row of buttons).

材质图标文档: https://material.io/icons/

这也是Google搜索中的一个问题，在该问题中，Google实际上会阅读并保存div的文本，而不是忽略它.

This is also an issue in Google search where Google will actually read and save the div's text instead of ignoring it.

示例: https://i.imgur.com/TixS06y.png

我知道一种解决方案是简单地切换到.PNG(由Google提供).我想做任何会导致用户系统的网络负载减少的事情.

I understand that one solution is to simply switch to .PNGs (supplied by Google). I'd like to do whatever results in less (network) load on the user's system.

谢谢！

推荐答案

您可以使用 font-display:block; ，只需将此CSS添加到您的HTML头中即可:

you can use font-display: block;, just add this CSS to your HTML head:

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

有关更多信息，字体显示

这篇关于当Google的JS无法转换它们时，如何防止显示实质图标文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！