Utilitaire pour déterminer la police utilisée sur un site? [fermé]


9

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.


@Arjan pourquoi :-(? J'ai mentionné explicitement ce que je ne cherche pas, ce qui a fait l'objet de la plupart des réponses là-bas.
Lazer

Firefox a rendu cela très facile de nos jours, pour une seule page; voir ma réponse mise à jour .
Arjan

Réponses:


20

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:

  • Utiliser un "inspecteur" avec votre navigateur (c'est ce que vous cherchez!) - J'utilise Google Chrome (parce que j'adore ça), qui a un outil Inspecteur intégré . Vous devriez vraiment l'essayer. Il vous suffit de vous rendre sur un site, de cliquer avec le bouton droit sur l'élément que vous souhaitez analyser et de cliquer sur "Inspecter l'élément" dans le menu contextuel. L'inspecteur affiche les propriétés dynamiques du HTML et du CSS , donc si vous deviez inspecter un élément de texte, vous 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:

    1. 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).

    2. 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 un classou idattribut et notez-les).

    3. 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 un font-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.

p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}

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.

  1. 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 .

    Ouverture de l'inspecteur

  2. 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!

    Affichage des propriétés des éléments

  3. Voici ce que vous faites: Sélectionnez le bouton radio à côté de "Afficher hérité".

    Sélectionnez le spectacle hérité

  4. De nombreuses autres propriétés globales apparaîtront sous "Style calculé".

    De nombreuses propriétés globales apparaissent

  5. 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!

    Voici les polices!


Je vais ajouter un exemple d'explication pour NYTimes en ce moment.
Maxim Zaslavsky

merci ppl J'adore cet endroit - www.superuser.com, encore plus maintenant :)
Lazer

@ Maximz2005, pour certaines sélections, je ne reçois pas la liste déroulante "Style calculé". Je reçois juste une liste déroulante Style vide. Pourquoi donc?
Lazer

1
Comme l'inspecteur est vraiment l'inspecteur WebKit, je suppose qu'une version bêta ultérieure inclura également une version plus récente de WebKit? Une nouvelle version pourrait montrer de nouveaux bugs, bien sûr, mais je me demande si vous en avez probablement rencontré un. Existe-t-il un moyen d'afficher la version WebKit utilisée dans Chrome?
Arjan

1
le mien est WebKit 532.0 @Maxim Z. J'ai essayé dans le chrome de mon ami (version 3. quelque chose). Cela fonctionne parfaitement là-bas. Je peux enfin détecter les polices comme je le voulais. Maintenant, je comprends à quel point la fonction "inspecter l'élément" est vraiment cool.
Lazer

7

Il y a deux choses différentes:

  1. Quelle police est réellement utilisée (par le navigateur / système d'exploitation).
  2. Quelle police a été demandée (par le créateur du site).

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 :

Affichage des polices Firefox

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:

  • Le texte peut inclure des caractères Unicode qui ne figurent pas dans la police définie dans le CSS, de sorte que plusieurs polices peuvent être utilisées dans un seul élément.
  • Tous les navigateurs sur la même machine ne peuvent pas utiliser le même type de police (tels que TrueType, Apple Advanced Technology, Microsoft OpenType, OpenType PostScript) et peuvent donc utiliser des polices différentes. Vous devrez donc peut-être déterminer la police utilisée dans les autres navigateurs.

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:

CSS dans Firebug

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.


+1 Pour une réponse beaucoup plus détaillée que la mienne.
BinaryMisfit

Comment avez-vous obtenu ces captures d'écran en fondu? Ressemble à Mac, une chance d'obtenir un effet similaire sur Vista ou XP?
Lazer

@Lazer, Skitch sur Mac (mais les ombres sont en quelque sorte standard et obligatoires, car OS X a des bordures de fenêtre très fines, le cas échéant). Je ne sais pas comment le faire sous Windows.
Arjan

4

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.


Font Finder est exactement ce que je cherchais. Si seulement il y avait une extension similaire pour Chrome.
kangax

@kangax, il y en a de nos jours; voir la réponse d'Alec
Arjan

Et @kangax, de nos jours Firefox et Chrome ont des outils intégrés pour déterminer la vraie police. Plus besoin de deviner.
Arjan

4

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

entrez la description de l'image ici

Vérifiez-le.


Bien, très bien, mais je ne pense pas que ce soit en fait une comparaison de pixels (de nos jours)? Lorsque le CSS dit simplement, 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!
Arjan

@Arjun Je l'ai examiné en détail il y a quelques mois, je vais donc l'expliquer aussi bien que je me souvienne. Sous le capot, cela fait deux choses. Il utilise 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 voyez sans-serifest qu'il correspond correctement à la sans-serifpolice, mais il ne le discerne actuellement plus.
Max

Firefox est mon nouveau meilleur ami pour cela; voir ma réponse mise à jour :-)
Arjan

3

Je ne connais aucun logiciel. Je viens d'utiliser Internet Explorer et j'ai constaté que la police utilisée était:

famille de polices: georgia, "times new roman", times, serif

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:

  • Clic droit sur la page d'accueil
  • Recherche la ligne rel = feuille de style et l'URL de la feuille de style attachée
  • Copiez et collez dans le navigateur et téléchargez le fichier css.
  • Ouvert dans l'éditeur de texte.

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.


Uhuh, Firebug dans Firefox ou Web Inspector dans Safari ...?
Arjan

1
Comme j'ai dit. Je m'ennuyais. Changez pour votre saveur de navigateur et affichez la source Il existe d'autres outils, mais rester simple n'est pas nécessairement la mauvaise approche.
BinaryMisfit

Bon pour le seul fait qu'il enseigne à l'utilisateur autre chose que de toujours compter sur Firefox.
aléatoire

Selon Wikipedia, les deux georgiaet times new romansont des polices de caractères. Alors, que signifie le résultat? Une combinaison de ces deux polices?
Lazer

1

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.


Informations »Les informations sur les éléments d'affichage fonctionnent mieux (elles affichent également les styles hérités et vous n'avez pas besoin de rechercher vous-même).
Arjan

1

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.



-1

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.