web-dev-qa-db-ja.com

chrome開発者ツールからフォントをダウンロード/抽出する方法

私は多くのことを疲れましたが、私のコンピュータがそれを持っているのにそれを手に入れることができません。

この不必要なファイルにアクセスするにはどうすればよいですか...拡張子は.woffです。 chromeインスペクターでダブルクリックすると、URLが表示されます。これは機能しません。

このフォントもコンピューターにインストールされていません。

実際、これは私の人生で初めてwoff形式とWebオープン形式の概念に出くわしました。ウェブサイトが使用しているフォントをダウンロードしたい。画像をダウンロードできるのはなぜですか。

enter image description here

fontsgoogle-chrome-devtools
43
Muhammad Umer

右クリックして、「リンクを新しいタブで開く」

編集：ダブルクリックしても同じ効果があります

20
Michael P. Bazos

。woffフォントを取得するには、最初にchrome devツールパネル（Ctrl+Shift+i）を開いてNetworkそしてページをリロードします。そこには、ページがダウンロードするすべてが表示されます。 .woffファイル、右クリックを見つけ、応答のコピーを選択します。

応答はURLになりますナビゲーションバーに貼り付けます。ファイルがダウンロードされます。。woff拡張子を追加を追加します。

47
Marcelo Lazaroni

簡単です（Chormeのみ）

  1. 右クリック>要素を検査
  2. [リソース]タブに移動し、ドロップダウンフォルダーで[フォント]を見つけます
    • 「リソース」タブは「アプリケーション」と呼ばれる場合があります
  3. フォントを右クリック（.woff形式）>新しいタブでリンクを開きます（これにより、.woff形式のフォントがダウンロードされます）
  4. 「TTfまたはOtfへのWoff」フォントコンバーターをオンラインで見つける
  5. 変換後お楽しみください！
6
Utkarsh

Unixoidオペレーティングシステムを使用していて、単一のファイルのみを抽出したい場合は、次を試してください。 chrome://cacheページの構造は、URL、解析されたHTTPヘッダー、HTTPヘッダーの16進ダンプ、そしてペイロードの16進ダンプです。

ファイルを抽出するには、すべてのペイロード行をChromeキャッシュページからクリップボード（2番目の00000000: ...行から開始）にコピーし、テキストエディターに貼り付けてプレーンテキストファイル（例：file.txt）。ペイロードがgzip圧縮されたWOFFファイルである場合、xxd -r file.txt > file.woff.gzを使用してバイナリファイルに変換し、gunzip file.woff.gzを使用して解凍します。

その後、 woff2otf を使用してWOFFファイルをOTF形式に変換するか、 woff2 を使用してWOFF 2.0ファイルをTTF形式に変換できます。バッチ処理の場合、このワークフローは明らかにスクリプト化する必要があります。

2
Stefan Schmidt

クロムを開く

右クリック=>検査=> アプリケーションタブに移動します

Framesセクションには、CSS、JavaScript、フォントなど、静的に使用可能なすべてのアセット（リソース）がリストされます。

2
Jineesh

Chromeオプションは問題ないことがわかりましたが、フォントファイルに到達するまでにはかなりの手順が必要です。そこに着くと、ダウンロードはとても簡単です。手順が少ないため、通常はSafariで開発ツールを使用します。目的のページに移動し、[開発者]メニューの[ページのソースを表示]または[ページのリソースを表示]をクリックすると、両方のページリソースが左側のフォルダーに一覧表示されます。フォントフォルダをクリックすると、フォントが一覧表示されます。ファイルを右クリックして保存します。 1つのサイトから多数のフォントファイルをダウンロードしている場合、「タブで開く」ボタンがフォントをより速くダウンロードするため、Chromeの経路を介して作業する方が速くなる場合があります。多くの異なるサイトから1つまたは2つのフォントを使用している場合、Safariは全体的に高速になります。

1
David

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を簡単に把握でき、ファイルをどのようにリンクしたかを確認できます。

0
ttvd94