FontLens

Chọn bất kỳ văn bản nào, nhấp chuột phải và kiểm tra ngay lập tức font chữ, kích thước, độ đậm, màu sắc và CSS — sao chép, tùy…

Bạn đã bao giờ truy cập một trang web, chiêm ngưỡng thiết kế chữ và tự hỏi "phông chữ này là gì?" FontLens trả lời câu hỏi đó chỉ với một cú nhấp chuột. Chọn bất kỳ văn bản nào trên bất kỳ trang web nào, nhấp chuột phải và chọn "Kiểm tra phông chữ bằng FontLens." Một bảng điều khiển gọn gàng, tập trung sẽ mở ra ngay trên trang và tiết lộ chính xác cách văn bản đó được tạo kiểu: kiểu chữ, kích thước, độ đậm, chiều cao dòng, màu sắc và mọi chi tiết khác đằng sau thiết kế. Cho dù bạn là một nhà thiết kế đang đảo ngược kỹ thuật một bố cục, một nhà phát triển đang khớp với một thông số kỹ thuật hay đơn giản là tò mò về một tiêu đề đẹp, công cụ này biến bất kỳ trang web nào thành một cuốn sách mở về kiểu chữ. FontLens là một công cụ tìm phông chữ và trình kiểm tra CSS được tích hợp trong một. Nó không chỉ cung cấp tên họ phông chữ cho bạn, mà còn cung cấp cho bạn mã sẵn sàng sử dụng, một môi trường thử nghiệm tương tác để thử nghiệm ý tưởng và các công cụ hỗ trợ tiếp cận để đảm bảo văn bản của bạn dễ đọc. Không cần tài khoản. Không cần đăng ký. Chỉ cần chọn, nhấp chuột phải và kiểm tra. 🔍 Những gì bạn có thể làm – Tiết lộ toàn bộ kiểu chữ của bất kỳ từ nào được chọn: họ phông chữ, kích thước phông chữ, độ đậm phông chữ, chiều cao dòng và màu sắc trong nháy mắt – Xem các kiểu bổ sung dễ bỏ qua, chẳng hạn như khoảng cách chữ, chuyển đổi văn bản và kiểu phông chữ – Sao chép bất kỳ thuộc tính nào chỉ với một cú nhấp chuột, hoặc lấy toàn bộ tập hợp quy tắc dưới dạng một đoạn mã CSS hoàn chỉnh – Chuyển đổi đoạn mã đó sang Tailwind, SCSS hoặc SASS thông qua các tab đơn giản, sau đó sao chép toàn bộ hoặc từng dòng – Thử nghiệm trong bản xem trước trực tiếp, có thể chỉnh sửa: viết lại các từ mẫu, điều chỉnh các giá trị, thay đổi nền và xem nó cập nhật ngay lập tức – Xác định nguồn gốc của phông chữ web với huy hiệu nhà cung cấp (Google Fonts, Adobe Fonts, tự lưu trữ hoặc kiểu chữ hệ thống tích hợp sẵn) – Lưu phông chữ web vào máy tính của bạn bằng nút "Tải xuống phông chữ", được lấy trực tiếp từ nguồn của nó – Kiểm tra độ tương phản màu sắc theo tiêu chuẩn WCAG, với tỷ lệ chính xác cùng với kết quả đạt hoặc không đạt AA và AAA – Chọn và lấy mẫu màu bằng một bộ chọn đầy đủ, bao gồm một ống nhỏ giọt để lấy bất kỳ pixel nào trên màn hình – Chuyển đổi đơn vị đo lường giữa px, rem, pt và em, được áp dụng cho cả trường và mã được xuất 🖱️ Cách thức hoạt động Sử dụng FontLens chỉ mất vài giây. Tô sáng các từ bạn muốn nghiên cứu, nhấp chuột phải vào lựa chọn và chọn "Kiểm tra phông chữ bằng FontLens" từ menu. Bảng điều khiển xuất hiện trên trang hiện tại, được tạo kiểu gọn gàng để không bao giờ xung đột với giao diện của trang web. Từ đó bạn có thể đọc chi tiết, sao chép những gì bạn cần hoặc bắt đầu chỉnh sửa. Bản xem trước trực tiếp là nơi mọi thứ trở nên thú vị. Thay đổi cách viết để kiểm tra một tiêu đề thực, điều chỉnh kích thước, điều chỉnh độ đậm hoặc đặt màu nền mới để xem kiểu chữ hiển thị như thế nào. Các chỉnh sửa của bạn vẫn giữ nguyên khi bạn di chuyển giữa các trang và quay lại sau, vì vậy một ý tưởng bạn bắt đầu trên một trang web đang chờ bạn trên trang tiếp theo. Khi bạn muốn khôi phục các giá trị ban đầu, nút "Đặt lại về trang" sẽ khôi phục mọi thứ mà trang thực sự sử dụng. Cần tài nguyên thô? Đối với một phông chữ web có thể tải xuống, một nút sẽ tìm nạp tệp thực từ vị trí @font-face của nó. Đối với một kiểu chữ đã có sẵn trong hệ điều hành của bạn, FontLens sẽ cho bạn biết đó là một phông chữ tích hợp sẵn, vì vậy bạn biết nó có sẵn mà không cần tải xuống. 🔒 Quyền riêng tư là trên hết FontLens chạy hoàn toàn trong trình duyệt của bạn. Không có thu thập dữ liệu, không theo dõi, không phân tích và không có máy chủ bên ngoài nào liên quan đến việc kiểm tra văn bản. Mọi thứ bạn kiểm tra đều nằm trên máy của bạn. Tiện ích mở rộng thực hiện chính xác một yêu cầu mạng, và chỉ khi bạn cố ý nhấn "Tải xuống phông chữ", tại thời điểm đó nó sẽ liên hệ với nguồn phông chữ đó để truy xuất tệp. Không có gì khác rời khỏi thiết bị của bạn. Các quyền được giới hạn một cách có chủ ý. Quyền menu ngữ cảnh thêm mục nhấp chuột phải. Quyền tab hoạt động cho phép công cụ đọc văn bản bạn đã chọn trên tab mà bạn gọi nó, và không ở nơi nào khác. Bộ nhớ giữ văn bản xem trước của bạn và các tùy chọn đơn vị và định dạng của bạn để chúng được ghi nhớ lần sau. Không có quyền truy cập rộng rãi vào lịch sử duyệt web của bạn và không có quyền máy chủ rộng lớn. 👥 Đối tượng sử dụng – Các nhà thiết kế web muốn xác định một kiểu chữ, thu thập một bảng màu và nhanh chóng sử dụng lại các kiểu – Các nhà phát triển front-end khớp với một mockup hoặc lấy các giá trị họ phông chữ và khoảng cách chính xác vào mã – Các kỹ sư UI và UX xây dựng các hệ thống kiểu thống nhất, tuân thủ thương hiệu – Sinh viên học CSS và kiểu chữ muốn xem các trang web thực được xây dựng như thế nào – Các kiểm toán viên hỗ trợ tiếp cận xác minh rằng văn bản đáp ứng các yêu cầu tương phản WCAG trước khi xuất bản – Các blogger, nhà tiếp thị và độc giả tò mò chỉ đơn giản muốn biết trang web đang sử dụng phông chữ gì ✨ Lý do mọi người luôn giữ nó bên mình – Một cú nhấp chuột phải cho bạn câu trả lời thay vì phải đào bới trong công cụ dành cho nhà phát triển – Mã sẵn sàng sao chép trong CSS thuần túy, Tailwind, SCSS hoặc SASS, vì vậy nó có thể được đưa thẳng vào dự án của bạn – Bản xem trước có thể chỉnh sửa cho phép bạn tạo mẫu lựa chọn kiểu mà không cần chạm vào một dòng mã nào – Bộ kiểm tra độ tương phản tích hợp khả năng truy cập vào quy trình làm việc của bạn thay vì để nó là một suy nghĩ sau – Bộ chọn màu và ống nhỏ giọt có nghĩa là bạn có thể lấy mẫu và sử dụng lại các màu chính xác từ bất kỳ đâu trên trang – Chủ đề sáng và tối tự động tuân theo hệ điều hành của bạn, vì vậy nó cảm thấy thoải mái cả ngày lẫn đêm – Chuyển đổi đơn vị giữa px, rem, pt và em giữ cho đầu ra phù hợp với cách mã của bạn được viết 🎨 Nhìn kỹ hơn vào các chi tiết In typography is more than a name. FontLens surfaces the small decisions that make text feel right, from the weight of a heading to the breathing room in line-height and the subtle tracking of letter-spacing. Seeing these values side by side helps you understand why a design works and how to recreate it. The provider badge adds context too, telling you at a glance whether you are looking at a Google Fonts asset, an Adobe Fonts face, a self-hosted file, or a system default, which is often the first clue when you set out to match or source a typeface. The color tools go beyond a static readout. The picker offers an HSV square with hue and alpha sliders, and it speaks HEX, RGB, and HSL so you can work in whichever format suits you. Pair that with the eyedropper and you can lift the precise shade of any element and drop it into your preview or your notes. 🚀 Bắt đầu kiểm tra Thêm FontLens, tô sáng một vài từ và nhấp chuột phải để tiết lộ kiểu chữ, kiểu dáng và màu sắc đằng sau bất kỳ trang nào. Đó là một công cụ nhanh chóng, riêng tư và thực sự hữu ích cho bất kỳ ai quan tâm đến cách web hiển thị. Cài đặt nó, giữ nó tiện dụng và không bao giờ phải thắc mắc về một phông chữ bí ẩn nữa.