google材质图标加载缓慢，从文本闪烁到图标

Question

在我们的React项目中使用设置方法2自托管安装Google材质图标时，有时会在该材质图标之前显示与该图标关联的连字。

<i class="material-icons">face</i> {/* shows text "face" on site prior to proper material icon load */}

例如，上面的行将在显示面部之前先显示“面部”一秒钟。如何延迟UI渲染，直到文件引用完全加载？

/*material icons file references loaded locally */
    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
      src: local('Material Icons'), local('MaterialIcons-Regular'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
    }

Answer 1

当Google JS无法转换材质图标文本时，如何防止材质图标文本显示？:

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

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

有关字体显示的更多信息