图标字体：一些图标在我的机器上显示为文本

Question

这是关于我的机器如何看待网络的问题，而不是个人网络项目。 在我的计算机上，某些图标字体显示为文字文本（图标的名称），而不是图形图标本身。

环境

• MacBook Pro（视网膜显示屏，13 英寸，2015 年初）
• MacOS 塞拉利昂 10.12.3
• 使用最新版本的 Chrome、Safari 和 Firefox 浏览器时发生的情况

还

• 我使用良好的互联网连接并且字体文件不会加载失败
• 我不使用代理并且不住在中国
• 禁用所有浏览器扩展后，问题仍然发生。
• 编辑：我在浏览器控制台中根本没有错误/警告。

例如，这就是我看到的https://developers.google.com/web/

和https://material.io/icons/

任何帮助表示赞赏

Answer 1

OP 显示的网页通过Google Web Fonts使用Material Icons字体。他们提供一个 CSS 文件，如：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), 
       local('MaterialIcons-Regular'), 
       url(https://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  ...
}

它将始终尝试先加载本地版本的“Material Icons”字体，然后再加载 Web 字体。因此，如果 OP 有过时或自定义版本的“材料图标”，则不会显示所需的效果。

要解决此问题，请删除本地的“Material Icons”字体，或者如果您仍然需要本地副本，则将其替换为最新版本。