如何使用 Firebug 找到 @font-face 字体的绝对路径？答案

【问题标题】：How to find absolute path to @font-face fonts with Firebug?如何使用 Firebug 找到 @font-face 字体的绝对路径？
【发布时间】：2014-03-27 17:42:27
【问题描述】：

有没有办法复制（例如从 Firebug）@font-face 规则中指定的网络字体的绝对 URL 而不是相对 URL？

例子：

我正在 Firebug 中查看一个站点的 main.css 文件，我得到了这个：

@font-face {
    font-family: "myfont";
    src: url("myfont__-webfont.eot");
}

如何找到该字体的绝对路径？

我知道在这种情况下它应该在 CSS 文件旁边，但我似乎找不到它。

【问题讨论】：

Chrome 中 F12 中的“网络”或“资源”选项卡可以告诉您...是否实际加载了 .eot（如果没有，控制台选项卡会告诉您...是否实际应用了 CSS） .
如果在浏览器的地址栏中输入：“http:///myfont__-webfont.eot”会发生什么？ Firefox 和除 IE 之外的所有其他浏览器都不会下载“.eot”文件，因为它们仅受 IE 支持（请参阅：caniuse.com/#feat=eot）
@Netsurfer 我得到一个 404，出于某种原因。
@LeopoldKristjansson 好的，所以您知道 该文件在服务器上不存在（至少不在引用的路径中）。由于 CSS 文件中的给定 URL，它应该在那里（在这个地方）。这应该回答你的问题！ ;-)

【解决方案1】：

Firebug 的CSS panel 目前还没有提供复制网络字体 URL 的选项。所以我创建了一个issue，并以issue #7320 的形式复制到GitHub 上，要求提供此功能。

虽然还有另一种方法可以实现：

【讨论】：

您是否通过Ctrl+F5 而不仅仅是F5 重新加载了页面？
是的，我做到了……奇怪。现在我实际上用一种完全不相关的方法解决了我的问题。感谢您的帮助！
没问题。如果您可以将您的解决方案发布为答案，那就太好了，这样您就可以将此问题标记为已解决，其他人也可以得到帮助。
我会，但我解决问题的方式（查找字体等）与原始问题无关，但我会在本周晚些时候将其详细添加到线程中。也许它可以帮助一些人。
@LeopoldKristjansson：嘿，如果你找到了一种比通过 Firebug 方法更快地获取字体的方法，你能给我们一个提示吗？附言塞巴斯蒂安，很好的答案！这确实有效，耶！

【解决方案2】：

步骤 1- 转到 myfont_-webfont.eot 第 2 步 - 使用 Font-Face Generator 服务第 3 步- myfont_-webfont.eot 转换为网络字体。

【讨论】：