解决Google Fonts加载前图标按钮初始渲染显示文本的问题

以下是几种实用的解决方案：

• 修改字体加载策略，控制渲染行为
  在Google Fonts的样式链接中添加&display=block参数，让浏览器在字体加载完成前隐藏对应元素内容，彻底避免原始文本显示：

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" />
  
  <span class="material-symbols-outlined">delete</span>
  

  font-display: block会让浏览器在字体加载期间隐藏文本，加载完成后直接显示图标。如果担心隐藏时间过长，也可以用&display=swap，但这种模式会先用系统字体显示文本，仍可能出现闪烁，更适合普通文本而非图标场景。

• 用伪元素替代原始文本
  移除span内的原始文本，通过CSS伪元素的content属性直接设置图标对应的Unicode字符，这样初始状态不会显示"delete"文本：

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  
  <span class="material-symbols-outlined delete-icon"></span>
  

  .delete-icon::before {
    content: "\e872"; /* delete图标的Unicode编码 */
  }
  

  每个Material Symbols图标都有对应的Unicode值，可在Google Fonts的图标详情页获取（比如delete的编码是U+E872）。

• 通过JS监听字体加载状态，控制元素可见性
  初始将图标元素设为不可见，等字体完全加载后再显示：

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  
  <span class="material-symbols-outlined" id="deleteIcon">delete</span>
  

  #deleteIcon {
    visibility: hidden;
  }
  

  document.fonts.ready.then(() => {
    document.getElementById('deleteIcon').style.visibility = 'visible';
  });
  

  利用浏览器的document.fonts.readyAPI监听字体加载完成事件，确保图标字体加载好后再显示元素，避免初始文本暴露。

• 预加载字体资源，缩短加载时间
  通过<link rel="preload">提前加载字体文件，减少加载等待时间，降低闪烁概率：

  <!-- 预加载字体文件，URL需从Google Fonts返回的CSS中提取 -->
  <link rel="preload" href="https://fonts.gstatic.com/s/materialsymbolsoutlined/v125/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2" as="font" type="font/woff2" crossorigin>
  <!-- 原字体样式链接 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  
  <span class="material-symbols-outlined">delete</span>
  

  注意：预加载的字体URL要从Google Fonts返回的CSS里的@font-face规则中获取，不同的字体参数（粗细、填充等）对应不同的文件URL。

内容的提问来源于stack exchange，提问作者Aniket Pradhan