javascript - 当谷歌的JS转换失败时，如何防止显示 Material 图标文本？

Question

当 Google 的 JS 无法将它们转换为图标时，如何防止显示 Material 图标文本？

图标在标记中定义如下:

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

示例:https://archive.fo/CKqKG/scr.png (请参阅顶行按钮)。

Material 图标文档:https://material.io/icons/

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

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

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

谢谢!

Answer 1

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

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

更多信息font-display