Xem trước Google Fonts, tùy chỉnh kích thước, độ đậm, khoảng cách, so sánh phông chữ cạnh nhau
Công cụ nhà phát triển
Về công cụ này
Trình xem trước phông chữ có thể xem trước và so sánh hơn 50 Google Fonts, kiểm soát hoàn toàn kích thước, độ đậm, kiểu dáng, khoảng cách và màu sắc. Nó cung cấp ba chế độ xem — xem trước, mẫu chữ và so sánh — và tạo mã CSS có thể sử dụng trực tiếp, hỗ trợ sao chép một cú nhấp.
Tính năng chính
- Hơn 50 Google Fonts phổ biến, hỗ trợ tìm kiếm và lọc
- Ba chế độ xem: xem trước, mẫu chữ và so sánh
- Kiểm soát typography đầy đủ: kích thước, độ đậm (100–900), kiểu dáng, khoảng cách chữ, chiều cao dòng
- Tùy chỉnh màu văn bản và màu nền, hỗ trợ nhập HEX
- Văn bản xem trước có thể chỉnh sửa, kiểm tra hiệu ứng thời gian thực
- Sao chép đầu ra CSS vào clipboard bằng một cú nhấp
Tình huống sử dụng
- Chọn Google Font phù hợp cho dự án thiết kế web
- So sánh hai phông chữ cạnh nhau trước khi quyết định
- Tạo khai báo CSS font cho stylesheet
- Kiểm tra khả năng đọc của phông chữ ở các kích thước và độ đậm khác nhau
- Duyệt bộ ký tự đầy đủ của phông chữ qua chế độ xem mẫu chữ
fonts
google-fonts
typography
Câu hỏi thường gặp
Trình xem trước phông chữ có những phông chữ nào?
Công cụ bao gồm hơn 50 Google Fonts phổ biến như Roboto, Inter, Poppins, Playfair Display, Montserrat, v.v. Có thể tìm kiếm và lọc danh sách phông chữ để tìm phông chữ lý tưởng.
Có thể so sánh hai phông chữ cạnh nhau không?
Có, tab so sánh cho phép xem hai phông chữ cạnh nhau, mỗi phông có điều khiển kích thước và độ đậm riêng, thuận tiện để lựa chọn giữa các phông chữ tương tự.
Làm thế nào để lấy mã CSS của phông chữ?
Tab xem trước hiển thị khai báo CSS đầy đủ của cài đặt hiện tại, nhấp nút "Sao chép CSS" để sao chép ngay vào clipboard.
Trình xem trước phông chữ có thể sử dụng ngoại tuyến không?
Bản thân công cụ chạy trong trình duyệt, nhưng Google Fonts được tải từ CDN, do đó cần kết nối mạng để hiển thị phông chữ.
Có thể tùy chỉnh văn bản xem trước không?
Có, khu vực xem trước có thể chỉnh sửa — nhấp vào đó để nhập văn bản của bạn và xem hiệu ứng dưới phông chữ đã chọn.