Par exemple: j'aime les polices utilisées sur le site: NYTimes , donc quelque chose qui pourrait lister toutes les polices utilisées par le site serait génial!
Je ne veux PAS d'un utilitaire de traitement d'image qui pourrait analyser les captures d'écran ou d'un site qui posera des questions sur la police et réduira sa liste.
Quelque chose qui pourrait simplement explorer le site Web et répertorier ses polices ... Ce serait formidable s'il pouvait superposer les polices sur les régions, mais cela irait trop loin, je suppose.
software-rec
website
fonts
Lazer
la source
la source
Réponses:
Il existe plusieurs façons d'accomplir cela. En fait, je le fais beaucoup, parce que je suis très intéressé par le fonctionnement de CSS, et aussi j'adore la typographie. Les deux façons que j'aime faire sont:
font-familyverriez la propriété cssdans l'inspecteur (dans la barre latérale droite), qui vous dira quelle est la police (voir ci-dessous pour savoir comment interpréter ce CSS). Vous pouvez utiliser Firebug pour Firefox pour accomplir quelque chose de similaire, mais je pense que l'outil Google Chrome Inspector est de loin supérieur (je suis développeur Web - je l'utilise pour tout!).Ou, vous pouvez afficher manuellement la source de la page et analyser le CSS. Voici comment procéder:
Lorsque vous êtes sur la page, affichez la source. Si vous êtes dans Internet Explorer, accédez à Page -> Afficher la source ou Afficher -> Source. Si vous utilisez Firefox, Chrome ou tout autre navigateur moderne, appuyez sur Ctrl + U (ou Apple + U, selon votre système d'exploitation).
Dans le code HTML, recherchez le contenu du texte que vous essayez d'analyser. Vous devriez trouver certaines balises qui contiennent le texte, et elles peuvent avoir les polices codées en dur dans le HTML (en utilisant une
<font>balise ou dans l'styleattribut de<p>ou une<div>enceinte), ou il peut référencer certains CSS (recherchez unclassouidattribut et notez-les).Si c'est le dernier (il fait référence à du CSS), allez en haut du HTML et trouvez les
<link>balises dans<head>la page. Si le lien fait référence à une feuille de style, vous le verrez - tout ce que vous avez à faire maintenant est d'accéder à cette feuille de style CSS et de rechercher les identifiants de classe ou d'ID que vous avez notés. Quelque part, vous trouverez unfont-familyproerpty correspondant (n'oubliez pas, vous pouvez également définir des polices globalement sur le site, et ce serait sous la<body>balise ou autre chose. C'est pourquoi vous devriez utiliser un outil d'inspection, car cette difficulté est surmontée ).Comment interpréter le
font-familyCSS:La
font-familypropriété déterminera quelles sont les polices. Dans cette propriété, les polices seront séparées par des virgules . Lors du rendu de la page, un navigateur parcourra cette liste et utilisera la première police qui s'y trouve sur l'ordinateur . Dans de nombreux cas, il existe également une catégorie de polices à la fin de cette propriété, qui est juste un "juste au cas où" afin que la police par défaut pour cette catégorie soit utilisée si aucune autre n'est disponible.Un exemple: disons qu'il s'agit de quelques CSS pour une
<p>enceinte.Ici, le navigateur essaiera d'abord d'utiliser Calibri, si la police est disponible. Sinon, il utilise Comic Sans MS, ou Georgia, ou tout simplement la police sans-serif par défaut si les autres ne sont pas disponibles.
C'est ainsi que vous pouvez savoir quelles polices sont utilisées. Je n'ai pas trouvé d'outils bien construits et utiles qui visualisent le CSS d'une manière très agréable, mais je pense que l'option Inspecteur fonctionnera pour vous (ce n'est pas trop déroutant!). Je pense que c'est la voie à suivre.
Exemple de recherche de polices NYTimes avec un outil Inspecteur:
Je vais vous expliquer comment trouver les polices du corps de texte principal d' un article NYTimes avec Google Chrome.
Accédez à un article sur NYTimes.com, cliquez avec le bouton droit sur un élément de texte pour lequel vous souhaitez trouver les polices et appuyez sur Inspecter l'élément .
Regardez la barre latérale à droite. Dans la liste déroulante Style calculé , vous verrez les propriétés CSS de cet élément. Cependant, comme vous pouvez le voir, il n'existe actuellement aucune propriété de famille de polices, ce qui signifie que les polices sont définies globalement, pas seulement pour cet élément spécifique. Cependant, il existe un moyen de contourner ce problème!
Voici ce que vous faites: Sélectionnez le bouton radio à côté de "Afficher hérité".
De nombreuses autres propriétés globales apparaîtront sous "Style calculé".
Faites défiler la liste jusqu'à "famille de polices". Il doit être en gris, ce qui signifie qu'il s'agit d'une propriété globale héritée. Ici, vous pouvez voir les polices utilisées! Ta-da!
la source
Il y a deux choses différentes:
1. Quelle police (de secours) est réellement utilisée
Pour savoir avec certitude quelle police est utilisée dans un navigateur spécifique sur votre ordinateur / système d'exploitation, Firefox et Chrome ont de nos jours des outils intégrés pour cela. Comme l'inspecteur de page Firefox a une vue des polices :
Pour plus de détails, voir Comment puis-je déterminer la police utilisée par un navigateur pour afficher du texte? sur Stack Overflow. Qui comprend:
2. Quelle police a été demandée
Pour savoir quelle police a été demandée (par le créateur du site), des outils tels que Firefox Page Inspector ou son extension Firebug aident à inspecter les règles CSS. Ces outils ne vous disent pas quelle police est réellement utilisée , mais montre quelle police est demandée pour une région spécifique, ou même pour un mot spécifique, étant donné la feuille de style CSS:
Ce qui précède montre Firebug. Sélectionnez d'abord "Afficher le style calculé" dans le menu Style à droite. Ensuite, cliquez sur le bouton fléché à gauche. Et puis cliquez simplement sur le texte qui vous intéresse. Cela mettra à jour les informations de la feuille de style CSS à droite. Voir les fonctionnalités pour en savoir plus sur les fonctions CSS.
Certains Firebug Lite sont également disponibles pour d'autres navigateurs, mais je ne les ai jamais utilisés.
Web Inspector dans Safari et Developer Tools dans Chrome ont des options similaires. (Dans Safari, activez l'inspecteur Web via les préférences: Afficher le menu Développement dans la barre de menus .) Internet Explorer dispose des outils F12 .
Comme l'a noté e-t172 : la barre d' outils des développeurs Web pour Firefox peut également afficher ces informations. Cependant, CSS »Afficher les informations sur les styles ne vous montre aucun style« hérité »(« en cascade »), mais uniquement des informations spécifiques à la région sur laquelle vous cliquez. Au lieu de cela, pour obtenir une sorte de superposition et pour voir réellement les informations sur la police, vous pouvez plutôt utiliser Informations »Afficher les informations sur les éléments. Cela montrera les détails chaque fois que vous cliquez sur la page quelque part.
la source
Si vous utilisez Firefox, il existe le module complémentaire Font Finder . Il fait essentiellement ce que Maxim Z. a décrit dans sa réponse , mais automatiquement, il est donc très facile à utiliser.
la source
C'est de loin la meilleure solution que j'ai trouvée. C'est un bookmarklet / extension qui vous indiquera à 99% du temps avec certitude quelle police est utilisée, en comparant les pixels du texte affiché avec ceux de toutes les polices disponibles, y compris les polices TypeKit et Google Font API.
Outil WhatFont
Vérifiez-le.
la source
font-family: sans-serifc'est aussi ce qui est rapporté, mais ce n'est pas en soi une police. Lors de l'utilisation,font-family: someUnknownFontj'obtiens(default font)comme résultat, qui est alors en fait Times sur mon Mac. (Testé avec le bookmarklet, en utilisant cette JS Bin ; capture d'écran .) Encore une fois: sympa!window.getComputedStylepour obtenir la famille de polices calculée. Il itère ensuite cette pile en comparant les pixels de chaque police avec les pixels affichés. La première correspondance est celle qui est indiquée en italique dans la fenêtre contextuelle, les autres sont affichées normalement. S'il n'y a pas de correspondance, cela s'affichera(default font). La raison pour laquelle vous voyezsans-serifest qu'il correspond correctement à lasans-serifpolice, mais il ne le discerne actuellement plus.Je ne connais aucun logiciel. Je viens d'utiliser Internet Explorer et j'ai constaté que la police utilisée était:
Ceci est la police principale. La recherche dans la feuille de style de n'importe quoi avec la famille de polices fournira le reste.
Processus:
Si vous recherchez la police dans les images qui ne seront pas définies en dehors de l'image.
Oui, je m'ennuyais énormément. C'est vendredi après-midi après tout. Je n'ai pas posté le lien car ils mettent régulièrement à jour la feuille de style.
la source
georgiaettimes new romansont des polices de caractères. Alors, que signifie le résultat? Une combinaison de ces deux polices?Vous pouvez utiliser l'extension Web Developer Firefox pour voir tous les styles utilisés par une partie spécifique d'une page Web. Utilisez le menu CSS, Afficher les informations de style. Cliquez ensuite sur le texte que vous souhaitez analyser et recherchez la propriété "font-family" dans les résultats.
la source
Contrairement à ce que beaucoup de gens ont dit, ce n'est PAS toujours une question de visualisation de la source, etc. - cela dépend si le CSS est dans le document ou dans un fichier CSS externe. S'il est externe, vous ne pouvez pas simplement afficher la source et trouver la balise font-family car elle n'est pas réellement présente dans le fichier.
L'affiche conseillant d'utiliser Google Chrome a en fait donné un très bon conseil - j'ai appris quelque chose ici et je voulais ajouter un conseil supplémentaire. Dans les outils de développement qui apparaissent dans Chrome, vous POURRIEZ devoir cliquer sur "Style calculé" puis cliquer sur la case à cocher "Afficher hérité" puis faire défiler vers le bas avant de le trouver - ceci est un exemple extrême, mais l'endroit où il apparaît dépendra de comment la page a été structurée.
la source
Voici une solution simple mais efficace: un bookmarklet qui vous montre la configuration appliquée à un élément (y compris la famille de polices).
Bookmarklets Site de Jesse a un bon pour ce travail:
computed styles.C'est parti: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles
la source
si ce n'est pas un css en ligne, ouvrez simplement la page sur la vue source. Copiez l'adresse css comme "/themes/01.css" sur l'url du navigateur. Copiez la pâte de retour dans l'éditeur de texte ou l'éditeur CSS. Utilisez la recherche pour affiner la police ou la famille de polices. La famille de polices répertoriée utilise pour afficher la police de page pour la taille et d'autres attributs tels que gras, italique, etc.
Merci doronto
la source