如何从网站窃取字体

Question

我知道问题本身是非法的 - 要求偷走别人的家。 ：）

无论如何，这是开发人员的逻辑实际上不起作用的情况。使用Browser的Developer Tool，我获得了网站的CSS。我将@font-face代码放在main.css。

中

这是我得到的：

的main.css：
路径：http://www.example.com/assets/css/main.css
代码：

@font-face {
  font-family: 'the_font';
  src: url("../fonts/fontname/fontname.eot");
  bla bla
  font-style: normal;
  font-weight: normal;
}

因此，根据代码，字体文件位于“fonts”文件夹下名为“fontname”的文件夹中。从路径方向我们可以猜出字体的位置是：

http://www.example.com/assets/fonts/fontname/fontname.eot

但它正在生成一个404页面。

为什么路径的逻辑不起作用？

Answer 1

假设CSS文件不错（即字体确实已加载）。您可以使用浏览器的开发工具。

例如在Chrome中：点击 F12 打开developer tools，然后选择网络或资源标签并重新加载页。你会看到列出的字体文件。

Answer 2

我使用多种工具来提取Css，具体取决于网站。

专门针对字体，此工具效果惊人：FontfaceNinja - 附带3个浏览器扩展程序可供选择。

但有时还不够： CssViewer是另一种选择，漂亮的设计，易于使用，它只提取元素悬停的Css - 几乎与Chrome开发者工具相同，但在我看来更具可读性。它只是Chrome扩展程序。从这里安装：CssViewer

我最常用于此工作的工具是 CSSSteal ，它提供与chrome开发人员工具相同级别的详细信息，从父级到其子级的样式级联 - 所有这些，但是因为你可以轻松地复制和粘贴Css，因此更容易使用默认的开发人员工具。复杂Css迁移的好工具..当字体和其他css属性像疯了一样互相覆盖时..在此处获取它：CssSteal 注意：安装CssSteal后，重新启动浏览器 - 然后确保打开包含样式的选项卡（在右侧） - 而不是元素 - 如上所示。 希望有所帮助：）

Answer 3

目前最好的方法

您实际上可以执行 rightclick: inspect > Application (on the top tabs) > Frames (scroll on the left tabs) 然后您可以找到一个 Font 部分，其中列出了所有加载的字体。它列出了以任何可能的安全方式加载的所有内容。

此外，它还可以在右侧预览它们，使其更容易

然后您可以右键单击您选择的那个并单击在新选项卡中打开，然后它会下载它。然后你可以在文件名的末尾添加一个 .woff 并在任何地方使用它。 （您也可以在预览底部查看其扩展名）