web-dev-qa-db-fra.com

comment puis-je télécharger/extraire la police à partir des outils de développement chrome

J'ai fatigué beaucoup de choses mais je ne peux pas l'obtenir même si mon ordinateur en est équipé.

Comment puis-je accéder à ces fichiers habituels ... ils sont en extension .woff. Double-cliquez dessus dans l'inspecteur de chrome pour afficher une URL. Ce qui ne marche pas 

Ni cette police est installée sur mon ordinateur. 

C'est en fait la première fois de ma vie que je rencontre le format woff et le concept open web. Je veux télécharger le site Web de polices utilise. Je sais que je peux télécharger les images, pourquoi pas. 

enter image description here

fontsgoogle-chrome-devtools
33
Muhammad Umer

Faites un clic droit, puis "Ouvrir le lien dans un nouvel onglet"

edit: vous pouvez aussi double-cliquer, cela a le même effet

18
Michael P. Bazos

Pour obtenir les polices .woff, ouvrez d’abord le panneau des outils de développement de chrome (Ctrl+Shift+i), accédez à Réseau et rechargez la page. Là, vous verrez tout ce que la page télécharge. Recherchez le fichier .woff, clic droit et sélectionnez Copier la réponse .

La réponse sera une url so collez-la dans la barre de navigation . Un fichier sera téléchargé, ajoutez simplement et ajoutez-y l’extension .woffet le tour est joué.

41
Marcelo Lazaroni

C'est facile (pour Chorme seulement)

  1. Clic droit> inspecter l'élément
  2. Allez sur l'onglet "Ressources" et recherchez "Polices" dans les dossiers déroulants
    • L'onglet 'Ressources' peut être appelé 'Application'
  3. Faites un clic droit sur la police (au format .woff)> ouvrez le lien dans un nouvel onglet (cela devrait télécharger la police au format .woff
  4. Trouvez un convertisseur de polices "Woff to TTf ou Otf" en ligne
  5. Profitez après la conversion! 
3
Utkarsh

Si vous êtes sur un système d'exploitation unixoide et que vous voulez extraire un seul fichier, vous pouvez essayer ce qui suit. La structure des pages chrome://cache est l'URL, l'en-tête HTTP analysé, le vidage hexadécimal de l'en-tête HTTP, puis le vidage hexadécimal de la charge utile.

Pour extraire un fichier, copiez toutes les lignes de charge utile d'une page de cache Chrome dans le Presse-papiers (à partir de la deuxième ligne 00000000: ...), collez-les dans un éditeur de texte et enregistrez-les sous forme de fichier texte brut (par exemple, file.txt). Si la charge est un fichier WOFF compressé, utilisez xxd -r file.txt > file.woff.gz pour le reconvertir en fichier binaire et gunzip file.woff.gz pour la décompression.

Vous pouvez ensuite utiliser woff2otf pour convertir les fichiers WOFF au format OTF ou woff2 pour convertir les fichiers WOFF 2.0 au format TTF. Pour le traitement par lots, ce flux de travail doit évidemment être scripté.

2
Stefan Schmidt

Chrome ouvert 

Clic droit => inspect => naviguez vers application tab

Dans Frames section, tous les actifs disponibles statiquement (ressources) tels que css, JavaScript et les polices sont répertoriés.

1
Jineesh

J'ai trouvé que l'option Chrome était correcte, mais il y a plusieurs étapes à suivre pour accéder aux fichiers de police. Une fois que vous y êtes, le téléchargement est super facile. J'utilise généralement les outils de développement de Safari car il y a moins d'étapes. Il suffit d'aller à la page souhaitée, cliquez sur "Afficher la source de la page" ou "Afficher les ressources de la page" dans le menu Développeur (les deux fonctionnent pour cela) et les ressources de la page sont répertoriées dans des dossiers à gauche. Cliquez sur le dossier de polices et les polices sont répertoriées. Faites un clic droit et enregistrez le fichier. Si vous téléchargez un grand nombre de fichiers de polices à partir d'un site, il peut être plus rapide de parcourir le chemin d'accès de Chrome, car l'option "Ouvrir dans l'onglet" télécharge les polices plus rapidement. Si vous utilisez une ou deux polices sur de nombreux sites, Safari sera globalement plus rapide.

1
David

Bien que la solution de Marcelo semble fonctionner parfaitement, vous n'avez peut-être pas besoin de télécharger la police! Il suffit de s'y connecter à distance .

Par exemple, la police est hébergée sur example.com,

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

Vous pouvez facilement comprendre l'URL directe de la police en consultant le code CSS de example.com et voir comment ils ont lié le fichier.

0
ttvd94