【问题标题】:How do I download/extract font from chrome developers tools?如何从 chrome 开发人员工具中下载/提取字体?
【发布时间】:2014-01-09 18:35:12
【问题描述】:

我已经厌倦了很多东西,但即使我的电脑有它,我也无法得到它。

我怎样才能访问这个 wont 文件?他们有 .woff 扩展名。在 chrome 检查器中双击它们只需要一些 url。哪个不行。

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

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

【问题讨论】:

    标签: fonts google-chrome-devtools


    【解决方案1】:

    右击,然后“在新标签页中打开链接”

    编辑:也可以双击,效果一样

    【讨论】:

    • 确实,在您的特定示例中,服务器似乎对操作发起的请求返回了403 - Forbidden 响应。无论如何,我可以通过在chrome://cache 浏览 chrome 缓存来保存字体。搜索“woff”然后“右键单击/将链接另存为...”
    • 我现在可以获取 woff 文件,但它似乎无法正常工作,如果转换为 ttf/oft 类型也会出错。
    • 我意识到保存的文件还包含对 Chrome 有用的元信息。为了只获取有效负载,您可以尝试免费软件 ChromeCacheView。
    • 这个程序有没有办法保存文件,而不仅仅是保存它的信息,因为这是正在发生的事情。通常 woff 字体类型显示为“font/woff”,而我想要的字体类型显示为“application/x-font-woff”
    • 当它说禁止/403响应时,很可能他们正在检查引用者。执行此操作 -> 检查字体所在页面上的任何锚链接,将其 href 更改为字体链接并单击该链接,它将下载字体文件。
    【解决方案2】:

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

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

    然后您可以使用woff2otf 将 WOFF 文件转换为 OTF 格式或使用woff2 将 WOFF 2.0 文件转换为 TTF 格式。对于批处理,这个工作流程显然应该是脚本化的。

    【讨论】:

      【解决方案3】:

      要获得 .woff 字体,首先打开 chrome 开发工具面板 (Ctrl+Shift+i) 转到 Network 并重新加载页面。在那里,您将看到页面下载的所有内容。找到 .woff 文件,右键单击并选择复制响应

      响应将是一个网址,因此将其粘贴到导航栏中。将下载一个文件,只需向其添加 .woff 扩展名即可。

      【讨论】:

      • 这样可以节省时间,非常感谢您的发帖。以前从未使用过“网络”标签,太棒了!
      • 而不是“复制响应”,只需双击它 - 它会下载文件
      • 非常有用,特别是与大客户合作时,他们想使用付费字体但提供正版字体文件需要太多时间,这真的很节省时间!
      • 这是正确的答案,因为某些字体网址不会在“标签页”中打开(例如 403 错误)。
      • 我必须点击“复制链接地址”,而不是“复制回复”,但它确实有效。
      【解决方案4】:

      这很容易(仅适用于 Chorme)

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

      【讨论】:

        【解决方案5】:

        我发现 Chrome 选项没问题,但要访问字体文件需要执行相当多的步骤。到达那里后,下载非常容易。我通常在 Safari 中使用开发工具,因为步骤较少。只需转到您想要的页面,单击“开发人员”菜单中的“显示页面源”或“显示页面资源”(两者都适用),页面资源列在左侧的文件夹中。单击字体文件夹并列出字体。右键单击并保存文件。如果您从一个站点下载大量字体文件,则通过 Chrome 的路径可能会更快,因为“在选项卡中打开”确实可以更快地下载字体。如果您从许多不同的网站获取一种或两种字体,Safari 总体上会更快。

        【讨论】:

        • 这是唯一对我有用的答案
        【解决方案6】:

        尽管 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。

        【讨论】:

          【解决方案7】:

          打开铬

          右键单击 => 检查 => 导航到 应用程序 选项卡

          Frames部分,列出了所有静态可用的资产(资源),例如css、JavaScript、字体。

          【讨论】:

          • 这是最好的解决方案,而且总是可靠的解决方案,包括那些没有直接下载 woff 文件的解决方案
          【解决方案8】:

          迄今为止最好的方法

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

          此外,它还在右侧预览它们,使其更容易

          然后您可以右键单击所需的并在新选项卡中打开。然后您可以在末尾添加一个 .woff 并在任何地方使用它。 (您也可以在预览底部查看其扩展名)

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2018-02-19
            • 2017-01-27
            • 2019-07-22
            • 2013-01-26
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多