FontLens

Text auswählen, rechtsklicken und Schriftart, Größe, Stärke, Farbe und CSS sofort prüfen – kopieren, anpassen, vorschauen und…

Sind Sie schon einmal auf einer Seite gelandet, haben die Schrift bewundert und sich gefragt: „Was ist das für eine Schriftart?“ FontLens beantwortet diese Frage mit einem einzigen Klick. Wählen Sie einen beliebigen Text auf einer Webseite aus, klicken Sie mit der rechten Maustaste und wählen Sie „Schrift mit FontLens überprüfen“. Ein übersichtliches, fokussiertes Panel öffnet sich direkt über der Seite und zeigt Ihnen genau, wie dieser Text gestaltet ist: die Schriftart, ihre Größe, Stärke, Zeilenhöhe, Farbe und jedes andere Detail, das dem Design zugrunde liegt. Egal, ob Sie als Designer ein Layout reverse-engineeren, als Entwickler eine Spezifikation abgleichen oder einfach nur neugierig auf eine schöne Überschrift sind – dieses Tool verwandelt jede Webseite in ein offenes Buch der Typografie. FontLens ist ein Schriftsuchprogramm und CSS-Inspektor in einem. Es nennt Ihnen nicht nur die Schriftfamilie, sondern liefert Ihnen auch sofort verwendbaren Code, einen interaktiven Spielplatz zum Testen von Ideen und Barrierefreiheitstools, um sicherzustellen, dass Ihr Text lesbar ist. Kein Konto. Keine Anmeldung. Einfach auswählen, mit der rechten Maustaste klicken und untersuchen. 🔍 Was Sie tun können - Enthüllen Sie die vollständige Typografie der ausgewählten Wörter: Schriftfamilie, Schriftgröße, Schriftstärke, Zeilenhöhe und Farbe auf einen Blick - Sehen Sie zusätzliche Stile, die leicht zu übersehen sind, wie z. B. Buchstabenabstände, Texttransformation und Schriftstil - Kopieren Sie eine einzelne Eigenschaft mit einem Klick oder erfassen Sie die gesamte Regelsammlung als vollständigen CSS-Schnipsel - Konvertieren Sie diesen Schnipsel mithilfe einfacher Tabs in Tailwind, SCSS oder SASS und kopieren Sie dann ganz oder Zeile für Zeile - Experimentieren Sie in einer Live-Vorschau mit Bearbeitungsmöglichkeiten: Schreiben Sie die Beispielwörter um, passen Sie die Werte an, tauschen Sie den Hintergrund aus und beobachten Sie, wie sich alles sofort aktualisiert - Identifizieren Sie, woher eine Web-Schriftart stammt, mit einem Anbieter-Badge (Google Fonts, Adobe Fonts, selbst gehostet oder eine integrierte Systemschriftart) - Speichern Sie eine Web-Schriftart mit dem „Schriftart herunterladen“-Button auf Ihrem Computer, direkt von ihrer eigenen Quelle - Überprüfen Sie den Farbkontrast nach WCAG-Standards, mit dem genauen Verhältnis und den AA- und AAA-Bestanden- oder Fehlgeschlagen-Ergebnissen - Wählen und sampeln Sie Farben mit einem vollständigen Farbwähler, einschließlich einer Pipette, um jedes Pixel auf dem Bildschirm zu erfassen - Wechseln Sie die Maßeinheiten zwischen px, rem, pt und em, angewendet auf die Felder und den exportierten Code 🖱️ So funktioniert es Die Verwendung von FontLens dauert nur wenige Sekunden. Markieren Sie die Wörter, die Sie untersuchen möchten, klicken Sie mit der rechten Maustaste auf die Auswahl und wählen Sie „Schrift mit FontLens überprüfen“ aus dem Menü. Das Panel erscheint über der aktuellen Seite, sauber gestaltet, so dass es nie mit dem Aussehen der Website selbst kollidiert. Von dort aus können Sie die Details lesen, kopieren, was Sie brauchen, oder mit der Bearbeitung beginnen. Die Live-Vorschau macht richtig Spaß. Ändern Sie die Formulierung, um eine echte Überschrift zu testen, passen Sie die Größe an, ändern Sie die Stärke oder legen Sie eine neue Hintergrundfarbe fest, um zu sehen, wie die Schrift wirkt. Ihre Änderungen bleiben bestehen, wenn Sie zwischen den Seiten wechseln und später zurückkehren, sodass eine Idee, die Sie auf einer Website begonnen haben, Sie auf der nächsten erwartet. Wenn Sie die ursprünglichen Werte wiederherstellen möchten, stellt die Schaltfläche „Auf Website zurücksetzen“ alles wieder her, was die Seite tatsächlich verwendet. Benötigen Sie das Rohmaterial? Für eine herunterladbare Web-Schriftart ruft ein Button die echte Datei von ihrem @font-face-Speicherort ab. Für eine Schriftart, die bereits mit Ihrem Betriebssystem geliefert wird, teilt Ihnen FontLens mit, dass es sich um eine integrierte Schriftart handelt, sodass Sie wissen, dass sie ohne Download verfügbar ist. 🔒 Datenschutz zuerst FontLens läuft vollständig in Ihrem Browser. Es findet keine Datenerfassung, kein Tracking, keine Analysen und keine externen Server statt, wenn Text untersucht wird. Alles, was Sie untersuchen, bleibt auf Ihrem Rechner. Die Erweiterung macht genau eine Netzwerkanfrage, und nur, wenn Sie bewusst auf „Schriftart herunterladen“ klicken. Zu diesem Zeitpunkt greift sie auf die eigene Quelle dieser Schriftart zu, um die Datei abzurufen. Nichts anderes verlässt Ihr Gerät. Die Berechtigungen sind bewusst eng gefasst. Die Kontextmenü-Berechtigung fügt den Rechtsklick-Eintrag hinzu. Die aktive Tab-Berechtigung ermöglicht es dem Tool, den Text zu lesen, den Sie auf dem Tab ausgewählt haben, auf dem Sie es aufrufen, und nirgendwo sonst. Der Speicher behält Ihren Vorschautext und Ihre Einheiten- und Formatpräferenzen bei, damit sie beim nächsten Mal erinnert werden. Es gibt keinen umfassenden Zugriff auf Ihren Browserverlauf und keine umfassenden Host-Berechtigungen. 👥 Für wen ist es gedacht? - Webdesigner, die eine Schriftart identifizieren, eine Farbpalette erfassen und Stile schnell wiederverwenden möchten - Frontend-Entwickler, die ein Mockup abgleichen oder genaue Schriftfamilien- und Abstands-Werte in den Code übernehmen - UI- und UX-Ingenieure, die konsistente, markengerechte Schriftsysteme aufbauen - Studenten, die CSS und Typografie lernen und sehen möchten, wie echte Websites aufgebaut sind - Barrierefreiheits-Prüfer, die überprüfen, ob der Text die WCAG-Kontrastanforderungen erfüllt, bevor er veröffentlicht wird - Blogger, Vermarkter und neugierige Leser, die einfach wissen möchten, welche Schriftart eine Website verwendet ✨ Warum die Leute es behalten - Ein Rechtsklick gibt Ihnen die Antwort, anstatt sich durch Entwicklertools zu graben - Der Code ist kopierfertig in einfachem CSS, Tailwind, SCSS oder SASS, sodass er direkt in Ihr Projekt übernommen werden kann - Die bearbeitbare Vorschau ermöglicht Ihnen das Prototyping von Schriftarten, ohne eine einzige Codezeile zu berühren - Der Kontrastprüfer integriert Barrierefreiheit in Ihren Workflow, anstatt sie als nachträglichen Gedanken zu betrachten - Der Farbwähler und die Pipette ermöglichen es Ihnen, genaue Farben von jeder Stelle auf der Seite zu entnehmen und wiederzuverwenden - Helle und dunkle Themes folgen automatisch Ihrem Betriebssystem, sodass es sich Tag und Nacht zu Hause anfühlt - Die Einheitenumschaltung zwischen px, rem, pt und em hält die Ausgabe mit der Art und Weise, wie Ihre Codebasis geschrieben ist, in Einklang 🎨 Ein genauerer Blick auf die Details Typografie ist mehr als ein Name. FontLens deckt die kleinen Entscheidungen auf, die Text richtig wirken lassen, von der Schriftstärke einer Überschrift über den Spielraum in der Zeilenhöhe bis hin zur subtilen Spationierung des Buchstabenabstands. Diese Werte nebeneinander zu sehen, hilft Ihnen zu verstehen, warum ein Design funktioniert und wie Sie es neu erstellen können. Das Anbieter-Badge fügt auch Kontext hinzu und zeigt Ihnen auf einen Blick, ob Sie es mit einem Google Fonts-Asset, einer Adobe Fonts-Schriftart, einer selbst gehosteten Datei oder einer Systemstandardschrift zu tun haben, was oft der erste Hinweis ist, wenn Sie versuchen, eine Schriftart abzugleichen oder zu beziehen. Die Farbabstimmungswerkzeuge gehen über eine statische Anzeige hinaus. Der Farbwähler bietet ein HSV-Quadrat mit Farbton- und Alpha-Reglern und spricht HEX, RGB und HSL, sodass Sie in jedem beliebigen Format arbeiten können. Kombinieren Sie dies mit der Pipette, und Sie können den genauen Farbton jedes Elements aufnehmen und in Ihre Vorschau oder Ihre Notizen einfügen. 🚀 Beginnen Sie mit der Überprüfung Fügen Sie FontLens hinzu, markieren Sie einige Wörter und klicken Sie mit der rechten Maustaste, um die Typografie, Stile und Farben hinter jeder Seite zu enthüllen. Es ist ein schneller, privater und wirklich nützlicher Begleiter für jeden, dem wichtig ist, wie das Web gelesen wird. Installieren Sie es, halten Sie es griffbereit und fragen Sie sich nie wieder nach einer unbekannten Schriftart.