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

Question

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

环境

• MacBook Pro（Retina，13英寸，2015年初）
• MacOS Sierra 10.12.3
• 在最新版本中使用Chrome，Safari和Firefox浏览器

同时

• 我使用了不错的互联网连接，并且字体文件无法加载
• 我不使用代理，不住在中国
• 禁用所有浏览器扩展程序时仍会出现问题。
• 编辑：我在浏览器控制台中没有任何错误/警告。

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

和https://material.io/icons/

任何帮助表示赞赏

Answer 1

显示的网页OP通过Material Icons使用Google Web Fonts字体。它们提供的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';
  ...
}

它总是会尝试加载本地版本的＆＃34;材料图标＆＃34;字体首先，在web字体之前。因此，如果OP具有outdated或定制版本的＆＃34;材料图标＆＃34;，则不会显示所需的效果。

要解决此问题，请删除本地＆＃34;材料图标＆＃34;字体，或者如果您仍想要本地副本，则将其替换为latest version。