Trình khám phá cặp phông chữ

Trình khám phá cặp phông chữ là gì?

Trình khám phá cặp phông chữ là một công cụ miễn phí chạy trong trình duyệt dành cho nhà thiết kế web, lập trình viên và người sáng tạo nội dung muốn có tổ hợp tiêu đề và nội dung chỉn chu mà không phải lùng sục các thư viện phông. Hai trình chọn độc lập, có thể tìm kiếm cho phép bạn lọc 48 Google Fonts tuyển chọn theo serif, sans, display hay mono và chọn phông cho từng vai trò, trong khi các điều khiển theo vai trò đặt độ đậm, cỡ chữ, giãn dòng và giãn chữ. Bản xem trước trực tiếp hiển thị tiêu đề và đoạn văn của bạn bằng phông thực, và nút xáo trộn gợi ý các cặp ngẫu nhiên khi bạn cần cảm hứng. Khi hài lòng, hãy sao chép CSS được tạo ra theo định dạng bạn thích — một quy tắc @import, một thẻ HTML link hoặc các lệnh import kiểu Fontsource — rồi đưa vào trang đích, giao diện blog, bộ slide hay hệ thống thiết kế.

Cách sử dụng Trình khám phá cặp phông chữ

1. Ở trình chọn tiêu đề, lọc theo serif, sans, display hoặc mono, gõ để tìm và bấm một phông để chọn.
2. Làm tương tự ở trình chọn nội dung để chọn một phông bổ trợ cho văn bản đoạn.
3. Mở phần thiết lập để đặt độ đậm, cỡ chữ, giãn dòng và giãn chữ cho từng vai trò.
4. Gõ tiêu đề và câu của riêng bạn vào ô mẫu, hoặc để trống để dùng văn bản mặc định; nhấn Xáo trộn để có ý tưởng ghép ngẫu nhiên.
5. Chọn định dạng kết quả — @import, <link> hoặc Fontsource — và sao chép CSS được tạo ra vào biểu định kiểu hoặc dự án của bạn.

Ví dụ

Tiêu đề: Playfair Display 700 · Nội dung: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Định dạng: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

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

Làm sao để chọn hai phông chữ?

Mỗi vai trò có trình chọn riêng. Lọc danh mục theo serif, sans, display hoặc mono, gõ một phần tên họ phông để tìm và bấm vào kết quả để chọn. Tiêu đề và nội dung được chọn độc lập, và nút Xáo trộn chọn một cặp ngẫu nhiên giúp bạn.

Tôi có thể chỉnh độ đậm, cỡ chữ, giãn dòng và giãn chữ không?

Có. Mở phần thiết lập để đặt độ đậm, cỡ chữ theo pixel, giãn dòng và giãn chữ (theo em) riêng cho tiêu đề và nội dung. Mọi thay đổi đều xuất hiện cả trong bản xem trước trực tiếp lẫn CSS được sao chép.

Tôi có thể sao chép những định dạng kết quả nào?

Ba: một quy tắc CSS @import, một thẻ HTML <link> kèm gợi ý preconnect, và các lệnh import npm kiểu Fontsource (npm i @fontsource/… cùng các dòng import theo độ đậm). Cả ba đều gồm cùng các quy tắc font-family, độ đậm, cỡ chữ, giãn dòng và giãn chữ cho h1–h3 và body.

Phông chữ đến từ đâu và văn bản của tôi có riêng tư không?

Khi bạn chọn một cặp, trình duyệt chỉ tải hai họ phông đó trực tiếp từ API Google Fonts CSS công khai tại fonts.googleapis.com — một yêu cầu bên thứ ba gửi thẳng từ trình duyệt của bạn, không qua máy chủ của chúng tôi. Văn bản mẫu và thiết lập của bạn hoàn toàn ở lại trên thiết bị.

Có những phông chữ nào?

Một bộ tuyển chọn gồm 48 Google Fonts phổ biến trải khắp serif, sans-serif, display và monospace — gồm Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono và nhiều hơn.