如何从 chrome 开发工具下载/提取字体？

我已经厌倦了很多东西，但我不能得到它，即使我的电脑有它。

我如何访问这个习惯文件？他们有。沃夫分机。双击他们在铬检查只需采取一些网址。但是没用。

我的电脑上也没有安装这种字体。

这实际上是我有生以来第一次遇到 woff 格式和 Web 开放格式的概念。我想下载的字体网站正在使用。我知道我可以下载的图像为什么不习惯。

enter image description here

162329 次浏览
小开
最佳答案

右键单击，然后“在新标签中打开链接”

编辑: 你也可以双击，它有同样的效果

小开

如果您使用的是 unixoid 操作系统，并且只想提取一个文件，那么可以尝试以下操作。chrome://cache页面的结构是 URL、解析的 HTTP 头、 HTTP 头的十六进制转储以及负载的十六进制转储。

要提取一个文件，将 Chrome 缓存页面上的所有有效负载行复制到剪贴板(从第二行开始) ，将它们粘贴到文本编辑器中，并将它们保存为纯文本文件(例如 file.txt)。如果有效负载是 gzip 的 WOFF 文件，则使用 xxd -r file.txt > file.woff.gz将其转换回二进制文件，使用 gunzip file.woff.gz进行解压缩。

然后可以使用 不是吧将 WOFF 文件转换为 OTF 格式，或者使用 Woff2将 WOFF 2.0文件转换为 TTF 格式。对于批处理，这个工作流显然应该是脚本化的。

小开

要获取 。沃夫字体，首先打开 chrome dev 工具面板(Ctrl+Shift+i) ，转到 网络并重新加载页面。在那里你会看到网页下载的所有内容。找到。Woff 文件，选择 右击，然后选择 收到。

响应将是一个网址，所以 粘贴到导航栏中。一个文件将被下载，只需 添加 < em > . woff 扩展名到它和瞧。

小开

这很容易(只对 Chorme)

  1. 右键单击“检查元素”
  2. 转到“资源”标签并在下拉文件夹中找到“字体”
    • “资源”选项卡可以称为“应用程序”
  3. 右键单击字体(.woff格式) > 在新标签打开链接(这应该下载 .woff格式的字体
  4. 在线查找“ Woff 到 TTf 或 Otf”字体转换器
  5. 转换后享受！
小开

我发现 Chrome 的选项还不错，但是要获得字体文件还有很多步骤。一旦你到了那里，下载非常容易。我通常使用 Safari 中的开发工具，因为步骤比较少。只要到你想要的页面，点击开发者菜单中的“显示页面源”或“显示页面资源”(两者都是为此工作的) ，页面资源列在左边的文件夹中。单击字体文件夹并列出字体。右键单击并保存文件。如果你从一个网站下载了大量的字体文件，你可能会更快的通过 Chrome 的路径，因为“打开标签”下载的字体更快。如果你从很多不同的网站采用一两种字体，Safari 整体上会更快。

小开

虽然 Marcelo 的解决方案似乎工作得很好，但你可能根本不需要下载字体。

例如字体托管在 Example.com上，请执行

@font-face {
font-family: "Font Name";
font-style: normal;
src: url(http://example.com/webfonts/font-name.woff);
}

通过从 Example.com中查看 css 代码，你可以很容易地找到指向字体的直接 URL，并了解它们是如何链接文件的。

小开

打开铬合金

右键单击 = > 查看 = > 导航到 申请选项卡

在 框架部分中，列出了所有静态可用的资产(资源) ，如 css、 JavaScript 和字体。

小开

目前为止最好的办法

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

此外，它还预览他们的权利，使它更容易

Application tab

然后您可以右键单击您想要的一个，并在一个新的标签页中打开。然后可以添加一个。然后在任何地方使用。(你也可以在预览的底部检查它的扩展)


提交答案