为什么网站要用图片替换Unicode字符？

Question

最近我在Firefox中安装了NoScript插件来控制JavaScript的执行。我注意到一些网站使用一些花哨的Unicode字符作为图像占位符，在我允许JavaScript后，这些字符会被替换为图像。一个例子是github.com，看看在我启用JavaScript之前拍摄的屏幕截图。

这样做相比直接在HTML或CSS中放置图像有什么优势呢？

- sauerburger

---

优点：使用干净的标记，根据需要放置图标，而不是在行内使用冗长的URL。 - dandavis

Answer 1

这些站点正在使用图标字体（一个或多个）。

图标字体是一种包含图片的常规字体文件。这是一种减少HTTP请求并启用其他一些功能的技术。

现在，为什么或如何被NoScript插件打败，我不知道。（编辑 - 明显是可配置的NoScript选项，默认情况下选择。所有@font-face规则都被阻止，据称是出于安全原因。）

在您的GitHub示例中，快速进入开发人员工具会显示一个名为“octicons”的字体。

- Pointy

---

Adblock可能会屏蔽一些Fontawesome图标（品牌图标），也许这是相关的？（仅停止JS不会破坏字体/图标） - dandavis

Answer 2

简单明了 - 这些奇怪的符号是标记，表示应该放置图像而不是字符符号（显然，到目前为止）。如果启用了JavaScript，则在加载过程中将触发特定的JS函数，并且所有这些标记都将被替换为图像。

现在棘手的部分是 - 如果浏览器无法加载/执行JavaScript，那么要么JavaScript已被禁用（情况1），要么存在重大网络延迟（情况2），并且浏览请求已超时。

在第二种情况下，我们不希望给用户带来额外的负担，因为很可能这些图像将永远加载不出来。因此，我们逐步进行处理：

1. 我们使用图像标记而不是真实图像加载基本网页。
2. JavaScript钩子在基本网页完全加载之后触发。此时，通过JavaScript调用在幕后请求所有非关键图像。
3. 所有此类图像都是异步加载的，由于基本网页已经加载，因此即使有一个或多个图像无法加载，用户也不会遇到任何延迟。

就是这样!

- Ivan Davidov

---

虽然这种情况是可能的，但它并不是问题中所举例网站发生的情况。 - Pointy