如何从网站上盗取字体

Question

我知道这个问题本身是不合法的——询问如何窃取别人的房屋。 :)

不管怎样，这是一个开发者的逻辑实际上没有起作用的情况。通过浏览器的开发工具，我获取了网站的CSS。我在main.css文件中定位到了@font-face代码。

以下是我得到的内容：

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页面。

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

- office-ask

---

从网站公开提供的下载文件是合法的，你应该关注这一点，我们不关心你将如何使用该文件。 - Denys Séguret

那么问题是什么？如果路径错误，它将无法工作。请注意，服务器也可以（尝试）检查引用者标头，并且除非引用者是CSS或文档文件，否则不会提供文件给您。 - Ulrich Schwarz

Answer 1

假设CSS文件没问题（即字体确实被加载了），您可以使用浏览器的开发者工具。例如在Chrome中，按F12打开开发者工具，然后选择网络(Network)或资源(Resources)选项卡并重新加载页面，您将看到列出字体文件。

- Denys Séguret

Answer 2

我根据不同的网站使用多种工具来提取 Css。

对于字体，这个工具非常好用：FontfaceNinja - 它带有3个浏览器扩展程序可供选择。

但有时候它并不够用: CssViewer是另一个选项，设计美观，易于使用，它只提取所悬停元素的 Css - 几乎与 Chrome 开发者工具相同，但在我看来更易读。它只适用于 Chrome 扩展程序。从这里安装：CssViewer

我在此工作中使用最多的工具是CSSSteal，它提供与 Chrome 开发者工具相同的详细信息，从父级到子级的层叠样式 - 所有这些，但由于您可以轻松复制和粘贴 Css，因此比默认开发者工具更易于使用。处理复杂的 Css 迁移时非常有用..像字体和其他 css 属性彼此覆盖一样疯狂。从这里获取它：CssSteal 注意：安装 CssSteal 后，重新启动浏览器 - 然后确保打开包含样式（在右侧）的选项卡 - 而不是元素选项卡 - 正如上面所示。 希望这有所帮助 :)

- AIon

---

除了这个问题与 CSS 盗窃无关之外，我很想了解这些工具。谢谢！ :) - diogo

Answer 3

目前最好的方法

您可以实际操作 右键点击: 检查 > 应用程序 (顶部标签) > 框架 (左侧标签上滚) 然后您可以找到一个 字体 部分，列出了所有已加载的字体。它以任何可能的安全方式列出了所有已加载的字体。

此外，它还在右侧预览它们，使其更加简单易懂。

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

- Abraham