当Google的JS无法转换时,如何防止显示材料图标文字？

Question

当Google的JS无法将其转换为图标时,如何防止显示材料图标文本？

图标在标记中定义如下:

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

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

这也是谷歌搜索中的一个问题,谷歌实际上会读取并保存div的文本,而不是忽略它.

我知道一种解决方案是简单地切换到.PNG(由Google提供).我想在用户的系统上做更少(网络)负载的任何结果.

谢谢!

Answer 1

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

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

有关更多信息font-display

仅当您在 @font-face 中指定字体的 src，并且不在头部使用“@import”或“link”标记时，这才有效。不幸的是，这对于 Google Fonts 来说还不可能：https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/ (3认同)
老问题，但对我来说是新问题。您现在可以使用 Google 字体指定 font-display 属性，因此 https://fonts.googleapis.com/icon?family=Material+Icons&display=block 可以工作。 (3认同)
注意：font-display: 块将显示不可见的字体，这意味着在加载字体时，将显示不可见的文本，其长度与后备文本相同。该连字文本通常比实际字体更宽，因此您需要设置一些样式，以便即使它由于 font-display:block 而不可见，但宽度仍然较小，因此不会闪烁。 (2认同)
我尝试了您的解决方案并且它有效，但当网络速度太慢时则无效。更清楚地说，它会显示块（实际上什么都没有）而不是文本，大约两秒钟，所以当我尝试“快速 3G”模式时，它不会向用户显示文本，但对于“慢速 3G”模式，这很好。，问题依然存在，只是延迟了两秒左右！有什么办法可以增加这个延迟吗？ (2认同)

Answer 2

在您的“index.html”中，您应该有指向 Google Material Icons 的链接。在此链接中，您必须在末尾包含：“&display=block”。我向您展示结果如何：

  <link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon? 
  family=Material+Icons&display=block"
  crossorigin
  />

如果您现在访问该链接，您将看到该文档包括：“font-display: block;” （您已更改“显示”）。

就这样。图标的名称不会再出现，并且图标会正确充电！

Answer 3

如果您使用 Typekit 的webfont loader，您可以应用条件类在 web 字体加载或加载失败时隐藏图标，例如：

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

当然，您可以根据您的喜好应用其他样式技术以获得最佳结果，例如font-size: 0;，这取决于您的站点和用例。

要使用 webfont 加载器加载材质图标，请使用如下配置：

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

Answer 4

我一直在为类似的情况而苦苦挣扎：我的问题不是图标从未加载过，只是它们可能需要一段时间才能在较慢的连接上加载，直到加载了难看的、未格式化的文本（例如情绪非常满意）才会显示在页面上（通常比周围的文字大很多倍，也使它非常明显）。

这里的其他解决方案对我不起作用（包括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;}所以它们看起来很好很流畅。）

我刚刚检查过，“sentiment_very_satisfied”是一个真正的图标：https://material.io/resources/icons/?icon=sentiment_very_satisfied&style=baseline。是的，这就是我想要向我的用户展示的内容。 (2认同)

Answer 5

我面临着同样的问题。不过，我相信使用像 i.material-icons:before 这样的伪选择器会有所帮助。请参阅此了解更多信息。

---- 编辑：工作示例

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