FontLens

Tiện ích miễn phí cho Chrome

Đây là font gì? Nhấp phải để xem CSS

Chọn văn bản trên bất kỳ website nào, nhấp phải rồi chọn Inspect font with FontLens. Trình kiểm tra font sẽ mở phía trên trang, hiển thị family, cỡ chữ, độ đậm, chiều cao dòng, màu sắc, CSS để sao chép và nút tải font.

Thêm vào Chrome — miễn phí

Cũng hoạt động trên Edge, Brave, Opera và các trình duyệt Chromium khác.

Trình kiểm tra FontLens: mẫu Ag giữa các đường đo cap-height, x-height và baseline, thuộc tính font cùng đoạn mã Tailwind

Sơ lược

Công dụng
Hiển thị font của văn bản bạn chọn: family, cỡ chữ, độ đậm, chiều cao dòng, màu sắc và các kiểu khác với mặc định, kèm CSS để sao chép.
Cách bắt đầu
Chọn văn bản, nhấp phải rồi chọn Inspect font with FontLens. Mục menu chỉ xuất hiện khi bạn đã chọn văn bản.
Sao chép dưới dạng
CSS, SCSS, SASS hoặc Tailwind, với cỡ chữ tính bằng px, rem, pt hoặc em.
Tệp font
Download font lấy font web từ nguồn @font-face. Hãy kiểm tra giấy phép font trước khi sử dụng.
Dành cho
Nhà thiết kế web, lập trình viên front-end, chuyên gia đánh giá khả năng truy cập và người học CSS.
Giá
Miễn phí. Không cần tài khoản, không có bản trả phí.
Dữ liệu
Hoạt động trong trình duyệt của bạn. Không máy chủ, không phân tích. Yêu cầu duy nhất là lượt tải font do bạn khởi chạy.
Hoạt động trên
Chrome và các trình duyệt Chromium khác cài tiện ích từ Chrome Web Store. Không hỗ trợ Firefox hoặc Safari.
Giới hạn
Đọc CSS của văn bản thật trên trang web. Không đọc văn bản trong ảnh, canvas, PDF hoặc trang riêng của Chrome.
Phiên bản
2.2.0, cập nhật 23 tháng 10, 2026

Hai lần nhấp để xem font

  1. 1

    Chọn văn bản

    Tiêu đề, đoạn văn hoặc nhãn nút trên bất kỳ trang web nào.

  2. 2

    Nhấp phải

    Chọn Inspect font with FontLens. Trình kiểm tra mở phía trên trang, hiển thị family, cỡ chữ, độ đậm, chiều cao dòng và màu sắc.

  3. 3

    Sao chép hoặc chỉnh sửa

    Sao chép CSS hoặc Tailwind, thử cỡ chữ hay màu khác trong phần xem trước trực tiếp, hoặc tải tệp font.

Vì sao mọi người dùng tiện ích

Aa

Tìm tên kiểu chữ

Thấy một tiêu đề bạn thích? Chọn văn bản để xem family, độ đậm và nguồn font: Google Fonts, Adobe Fonts hay chính website đó.

{ }

Khớp với bản thiết kế

So sánh các thông số trên trang trực tiếp với tệp thiết kế, sau đó sao chép quy tắc dưới dạng CSS, SCSS, SASS hoặc Tailwind.

4.5:1

Kiểm tra tương phản

Xem tỷ lệ tương phản cùng dấu AA và AAA, rồi thử văn bản tối hơn hoặc nền sáng hơn trước khi phát hành thiết kế.

Tính năng

  • Mẫu chữ kèm đường đo

    Family đầu tiên trong stack, hiển thị giữa các đường cap-height, x-height và baseline được đo từ chính font đó.

  • định dạng đoạn mã

    CSS, SCSS, SASS và Tailwind. Sao chép toàn bộ đoạn mã hoặc một dòng; định dạng dùng gần nhất sẽ được ghi nhớ.

  • Đơn vị của bạn

    Hiển thị cỡ chữ bằng px, rem, pt hoặc em trong các trường và đoạn mã. rem theo kích thước root của trang.

  • Nguồn font

    Huy hiệu cho biết font đến từ đâu: Google Fonts, Adobe Fonts, máy chủ riêng hoặc font hệ thống trên máy tính.

  • Kiểm tra tương phản

    Tỷ lệ giữa văn bản và nền, kèm dấu AA và AAA cho văn bản thường và lớn; chỉ số cập nhật khi bạn đổi màu.

  • Download font

    Lấy tệp từ nguồn @font-face và đặt tên theo family. Nếu máy chủ chặn, nguồn sẽ mở trong tab mới.

Vì sao tìm font trong DevTools mất nhiều thời gian?

Trang khai báo một danh sách font và trình duyệt dùng font đầu tiên có sẵn. Muốn biết font nào đang dùng, bạn phải mở DevTools, tìm phần tử, xem bảng Computed rồi tìm tệp font trong bảng Network. Cỡ chữ, độ đậm, chiều cao dòng và màu nằm ở nhiều nơi khác nhau.

FontLens đọc kiểu đã tính toán của văn bản bạn chọn rồi đưa mọi thứ vào một bảng: stack family, mẫu của family đầu tiên, các thông số, nguồn font và CSS. Tiện ích đọc CSS của trang nên không thể nhận diện font trong ảnh.

Dữ liệu luôn ở trong trình duyệt

  • Không tài khoản, không máy chủ

    FontLens hoạt động trong trình duyệt của bạn. Không phân tích, không theo dõi.

  • Chỉ đọc phần bạn chọn

    Trình kiểm tra đọc kiểu của văn bản bạn nhấp phải. Không gửi thông tin trang đi đâu cả.

  • Bốn quyền truy cập

    Menu ngữ cảnh cho mục nhấp phải, tab đang mở và quyền truy cập trang để bật trình kiểm tra, cùng bộ nhớ cho văn bản mẫu, đơn vị và định dạng đoạn mã.

Chrome DevTools và FontLens

Chrome DevTools và FontLensChrome DevToolsFontLens
Xem font của một đoạn văn bảnKiểm tra phần tử rồi mở bảng ComputedChọn văn bản, nhấp phải, chọn một mục menu
Sao chép dưới dạng Tailwind hoặc SCSSKhông, phải sao chép từng giá trịTab CSS, SCSS, SASS hoặc Tailwind
Nguồn fontTìm tệp font trong bảng NetworkHuy hiệu: Google Fonts, Adobe Fonts, máy chủ riêng hoặc hệ thống
Tải tệp fontTìm trong Network hoặc Sources rồi lưuMột nút
Kiểm tra tương phảnTrong bộ chọn màu của bảng StylesDấu AA và AAA cạnh phần xem trước trực tiếp
GiáTích hợp sẵnMiễn phí

Câu hỏi thường gặp

Làm sao biết website đang dùng font gì?

Thêm FontLens vào Chrome, chọn văn bản trên trang, nhấp phải rồi chọn Inspect font with FontLens. Bạn sẽ thấy font family, cỡ chữ, độ đậm, chiều cao dòng, màu sắc và nguồn font.

Làm sao sao chép CSS của font từ website?

Trong trình kiểm tra, chọn tab CSS, SCSS, SASS hoặc Tailwind rồi nhấn Copy all, hoặc sao chép riêng từng dòng. Nếu cần, hãy đổi đơn vị sang px, rem, pt hoặc em trước.

Tôi có thể tải font từ website không?

Nếu văn bản dùng font web, Download font sẽ lấy tệp từ nguồn @font-face. Font hệ thống không có tệp để tải. Hãy kiểm tra giấy phép trước khi dùng trong dự án của bạn.

FontLens có nhận diện font trong ảnh hoặc PDF không?

Không. Tiện ích đọc CSS của văn bản thật trên website nên không thể nhận diện font trong ảnh, canvas hoặc PDF.

Làm sao kiểm tra độ tương phản văn bản theo WCAG?

Phần xem trước hiển thị tỷ lệ tương phản giữa màu chữ và nền, kèm dấu AA và AAA cho văn bản thường và lớn. Đổi một trong hai màu để cập nhật dấu.

Có thể hiển thị kích thước bằng rem thay vì px không?

Có. Chuyển đơn vị sang px, rem, pt hoặc em để áp dụng cho các trường và đoạn mã. rem được tính theo cỡ font root của trang và lựa chọn của bạn sẽ được ghi nhớ.

Tiện ích có miễn phí không? Có thu thập dữ liệu không?

Miễn phí, không cần tài khoản. Không máy chủ, không phân tích; yêu cầu duy nhất là lượt tải font do bạn khởi chạy.

Tiện ích có chạy trên Edge, Brave hoặc Opera không?

Hầu hết trình duyệt Chromium đều cài được tiện ích từ Chrome Web Store, gồm Edge, Brave, Opera và Vivaldi. Firefox và Safari không được hỗ trợ.

Các tiện ích miễn phí khác từ PYROCTAL

Đây là font gì? Chỉ hai lần nhấp.

Thêm vào Chrome — miễn phí