FontLens

Sélectionnez n'importe quel texte, cliquez avec le bouton droit et inspectez instantanément sa police, sa taille, son poids, sa…

Vous êtes-vous déjà retrouvé sur une page, admiré la typographie et vous êtes demandé "quelle est cette police ?" FontLens répond à cette question en un seul clic. Sélectionnez n'importe quel texte sur n'importe quel site web, faites un clic droit, et choisissez "Inspecter la police avec FontLens." Un panneau propre et ciblé s'ouvre directement sur la page et révèle précisément comment ce texte est stylisé : la police de caractères, sa taille, son corps, sa hauteur de ligne, sa couleur, et chaque autre détail derrière le design. Que vous soyez un designer qui déconstruit une mise en page, un développeur qui respecte une spécification, ou simplement curieux d'un beau titre, cet outil transforme n'importe quelle page web en un livre ouvert de typographie. FontLens est à la fois un chercheur de polices et un inspecteur CSS. Il ne se contente pas de vous donner le nom de la famille de polices, il vous fournit du code prêt à l'emploi, un terrain de jeu interactif pour tester des idées, et des outils d'accessibilité pour s'assurer que votre texte est lisible. Pas de compte. Pas d'inscription. Il suffit de sélectionner, de faire un clic droit et d'examiner. 🔍 Ce que vous pouvez faire - Révélez la typographie complète de tous les mots sélectionnés : famille de polices, taille de police, corps de police, hauteur de ligne et couleur en un coup d'œil - Voyez des styles supplémentaires faciles à manquer, tels que l'espacement des lettres, la transformation du texte et le style de police - Copiez n'importe quelle propriété d'un simple clic, ou récupérez l'ensemble des règles sous forme de fragment CSS complet - Convertissez ce fragment en Tailwind, SCSS ou SASS via de simples onglets, puis copiez-le en entier ou ligne par ligne - Expérimentez dans un aperçu en direct et modifiable : réécrivez les mots d'exemple, ajustez les valeurs, changez le fond et observez la mise à jour instantanée - Identifiez l'origine d'une police web grâce à un badge de fournisseur (Google Fonts, Adobe Fonts, auto-hébergée ou une police système intégrée) - Enregistrez une police web sur votre ordinateur avec le bouton "Télécharger la police", directement à partir de sa propre source - Vérifiez le contraste des couleurs par rapport aux normes WCAG, avec le rapport exact et les résultats AA et AAA passés ou échoués - Choisissez et échantillonnez des couleurs avec un sélecteur complet, y compris une pipette pour saisir n'importe quel pixel sur l'écran - Changez les unités de mesure entre px, rem, pt et em, appliquées à la fois aux champs et au code exporté 🖱️ Comment ça marche L'utilisation de FontLens ne prend que quelques secondes. Mettez en surbrillance les mots que vous souhaitez étudier, faites un clic droit sur la sélection et choisissez "Inspecter la police avec FontLens" dans le menu. Le panneau apparaît sur la page actuelle, joliment stylisé afin qu'il n'entre jamais en conflit avec l'apparence du site. De là, vous pouvez lire les détails, copier ce dont vous avez besoin ou commencer à éditer. L'aperçu en direct est là où les choses deviennent amusantes. Modifiez le libellé pour tester un véritable titre, ajustez la taille, modifiez le corps, ou définissez une nouvelle couleur d'arrière-plan pour voir comment la police se comporte. Vos modifications restent en place lorsque vous naviguez entre les pages et reviennent plus tard, de sorte qu'une idée que vous avez commencée sur un site vous attend sur le suivant. Lorsque vous souhaitez revenir aux valeurs d'origine, le bouton "Réinitialiser au site" restaure tout ce que la page utilise réellement. Besoin de la ressource brute ? Pour une police web téléchargeable, un bouton récupère le fichier réel depuis son emplacement @font-face. Pour une police de caractères déjà fournie avec votre système d'exploitation, FontLens vous indique qu'il s'agit d'une police intégrée, vous savez donc qu'elle est disponible sans aucun téléchargement. 🔒 La confidentialité d'abord FontLens fonctionne entièrement à l'intérieur de votre navigateur. Il n'y a pas de collecte de données, pas de suivi, pas d'analyses et aucun serveur externe impliqué dans l'inspection du texte. Tout ce que vous examinez reste sur votre machine. L'extension n'effectue qu'une seule requête réseau, et seulement lorsque vous appuyez délibérément sur "Télécharger la police", moment auquel elle se connecte à la source de cette police pour récupérer le fichier. Rien d'autre ne quitte votre appareil. Les autorisations sont délibérément restreintes. L'autorisation du menu contextuel ajoute l'entrée du clic droit. L'autorisation de l'onglet actif permet à l'outil de lire le texte que vous avez sélectionné sur l'onglet où vous l'invoquez, et nulle part ailleurs. Le stockage conserve votre texte d'aperçu et vos préférences d'unité et de format afin qu'elles soient mémorisées la prochaine fois. Il n'y a pas d'accès généralisé à votre historique de navigation et pas d'autorisations d'hôte étendues. 👥 À qui s'adresse-t-il - Les designers web qui souhaitent identifier une police de caractères, capturer une palette et réutiliser rapidement des styles - Les développeurs front-end qui adaptent une maquette ou intègrent des valeurs exactes de famille de polices et d'espacement dans le code - Les ingénieurs UI et UX qui construisent des systèmes typographiques cohérents et conformes à la marque - Les étudiants qui apprennent les CSS et la typographie et qui veulent voir comment les vrais sites sont construits - Les auditeurs d'accessibilité qui vérifient que le texte répond aux exigences de contraste WCAG avant la mise en production - Les blogueurs, les spécialistes du marketing et les lecteurs curieux qui veulent simplement savoir quelle police un site utilise ✨ Pourquoi les gens le gardent - Un seul clic droit vous donne la réponse au lieu de fouiller dans les outils de développement - Le code est prêt à être copié en CSS pur, Tailwind, SCSS ou SASS, il s'intègre donc directement dans votre projet - L'aperçu modifiable vous permet de prototyper des choix de polices sans toucher une seule ligne de code - Le vérificateur de contraste intègre l'accessibilité dans votre flux de travail plutôt que de la laisser comme une réflexion après coup - Le sélecteur de couleurs et la pipette vous permettent d'échantillonner et de réutiliser les couleurs exactes de n'importe où sur la page - Les thèmes clairs et sombres suivent automatiquement votre système d'exploitation, pour un confort optimal de jour comme de nuit - Le changement d'unité entre px, rem, pt et em maintient la sortie alignée avec la façon dont votre base de code est écrite 🎨 Un regard plus attentif sur les détails La typographie est plus qu'un simple nom. FontLens met en lumière les petites décisions qui font que le texte semble juste, du corps d'un titre à l'espace de respiration dans la hauteur de ligne et le suivi subtil de l'espacement des lettres. Voir ces valeurs côte à côte vous aide à comprendre pourquoi un design fonctionne et comment le recréer. Le badge du fournisseur ajoute également du contexte, vous indiquant en un coup d'œil si vous regardez un élément Google Fonts, une police Adobe Fonts, un fichier auto-hébergé ou une valeur par défaut du système, ce qui est souvent le premier indice lorsque vous vous apprêtez à faire correspondre ou à trouver une police de caractères. Les outils de couleur vont au-delà d'une simple lecture statique. Le sélecteur offre un carré HSV avec des curseurs de teinte et d'alpha, et il parle HEX, RVB et HSL afin que vous puissiez travailler dans le format qui vous convient. Associez cela à la pipette et vous pouvez prélever la nuance précise de n'importe quel élément et la déposer dans votre aperçu ou vos notes. 🚀 Commencez à inspecter Ajoutez FontLens, mettez en surbrillance quelques mots, et faites un clic droit pour révéler la typographie, les styles et les couleurs derrière n'importe quelle page. C'est un compagnon rapide, privé et véritablement utile pour quiconque se soucie de la façon dont le web est lu. Installez-le, gardez-le à portée de main, et ne vous posez plus jamais la question d'une police mystérieuse.