症状描述
在使用 Google AI Studio(或部分其他 Google 网站)时,网页界面的按钮和图标消失了,取而代之的是页面上直接暴露出一大堆“乱七八糟的纯英文字符”。
常见的字符包括:
- expand_more(本应是向下展开的箭头 ▼)
- chevron_right(本应是向右的箭头 >)
- settings(本应是设置齿轮图标 ⚙️)
- more_vert(本应是三个垂直点的更多菜单 ⋮)
- thumb_up / thumb_down(点赞 / 点踩)
- chat_spark、menu_open、add_circle 等等……
如果你在正常浏览网页时看到了这些文字,或者在复制网页内容时发现剪贴板里莫名其妙多出了这些单词,那么你遇到了典型的**“Web 图标字体(Icon Font)加载失败”**问题。
为什么会这样?(原理解析)
要解决这个问题,首先需要了解 Google 网页的图标是怎么渲染出来的。
Google 官方大量使用了自家的一项技术——Material Design 图标库。它的实现原理非常巧妙:开发者在网页 HTML 代码里直接写上特定的英文单词(比如 settings),当浏览器成功下载了 Google 的专属“图标字体文件(Web Font)”后,就会把 settings 这个词在视觉上渲染成一个齿轮图标(⚙️)。
但是,如果你的浏览器因为某些原因没有成功下载到这个字体文件,网页就会被“打回原形”,触发浏览器的降级显示机制,直接把底层的纯文本单词显示在了页面上。这就是你看到那些“乱七八糟英文字符”的根本原因。
【解决方案排查指南】:
-
网络代理 / 分流规则问题(最常见原因)
- 原因:Google 的图标字体通常存放在 fonts.googleapis.com 或 fonts.gstatic.com 这两个域名下。如果你使用代理软件访问,可能你的 PAC 或分流规则只放行了 Google 主域名,而漏掉了字体域名,导致字体加载超时或被拦截。
- 对策:尝试把代理软件切换为**“全局模式(Global Mode)”**,然后刷新网页。如果图标恢复正常,说明你需要更新分流规则,将上述两个字体域名加入代理白名单。
-
浏览器插件拦截
- 原因:某些注重隐私或拦截广告的插件(如 uBlock Origin、AdGuard、NoScript 等),可能会把外部加载的字体文件当作追踪器或为了节省流量而强行拦截。
- 对策:开启浏览器的**“无痕/隐私模式”**并登录测试。无痕模式通常会禁用插件,如果显示正常,说明是插件引起的,请排查并为该网站添加白名单。
无痕模式可以正常访问,大概率是油猴脚本/扩展的原因。当我把ai studio 加入到AdGuard的白名单,问题顺利解决。