Trình xem trước & thử phông chữ miễn phí
Xem trước hơn 50 phông chữ web-safe và Google Fonts. Kiểm tra với văn bản của bạn, điều chỉnh kích thước và màu sắc, sau đó sao chép CSS ngay lập tức.
Công Cụ Này Làm Gì
Một công cụ xem trước phông chữ render cùng một chuỗi trong nhiều kiểu chữ đồng thời để bạn có thể so sánh chúng cạnh nhau mà không cam kết với một kiểu. Gõ văn bản của bạn một lần ở trên cùng: tên dự án, tiêu đề bạn đang viết, wordmark thương hiệu bạn đang chọn: và mọi phông chữ trong thư viện hiển thị cùng một chuỗi trong mặt riêng của nó. Điều chỉnh kích thước, màu và nền để kiểm tra cách so sánh trông như thế nào ở kích thước và độ tương phản nó sẽ thực sự xuất hiện trong sản xuất. Nhấp vào bất kỳ phông chữ nào để sao chép khai báo CSS font-family của nó. Chuỗi so sánh kiểu chữ kinh điển "The quick brown fox jumps over the lazy dog" là một pangram (mọi chữ cái của bảng chữ cái tiếng Anh xuất hiện ít nhất một lần): hữu ích vì nó luyện tập mọi glyph mà kiểu chữ phải cung cấp trong một câu ngắn duy nhất.
Phông chữ web-safe
Các phông chữ web-safe là các ký tự có sẵn trên tất cả các hệ điều hành chính (Windows, macOS, Linux). Khác với các phông chữ tùy chỉnh phải được tải xuống, các phông chữ web-safe hiển thị ngay lập tức vì đã được cài đặt trên thiết bị của người dùng. Công cụ này tập hợp hơn 30 phông chữ web-safe và hơn 20 Google Fonts phổ biến tải ngay lập tức từ web.
Google Fonts và Kỷ Nguyên Web Font Hosting
Google Fonts ra mắt vào tháng 5 năm 2010 với tư cách là một thư viện kiểu chữ mã nguồn mở miễn phí được lưu trữ trên CDN. Lần ra mắt ban đầu có 18 phông chữ; đến năm 2026, danh mục đã vượt quá 1.500 gia đình, tất cả đều được cấp phép theo SIL Open Font License hoặc các điều khoản cho phép tương tự. Open Sans (Steve Matteson, 2010), Roboto (Christian Robertson, 2011), Lato (Łukasz Dziedzic, 2010), Montserrat (Julieta Ulanovsky, 2011), Source Sans Pro (Paul Hunt cho Adobe, 2012), Inter (Rasmus Andersson, 2016), Poppins (Indian Type Foundry, 2014), Nunito (Vernon Adams, 2011): đây là một trong những kiểu chữ được sử dụng nhiều nhất trên web hiện đại, tất cả đều có sẵn miễn phí thông qua Google Fonts. Cơ chế tải của danh mục đã phát triển trong nhiều năm: ra mắt ban đầu năm 2010 sử dụng các thẻ <link> đến endpoint CSS của Google; từ năm 2018 trở đi nhấn mạnh tham số display=swap để kiểm soát hành vi FOUT/FOIT; Google Fonts API v2 năm 2022 pre-render các tập con để cải thiện hiệu suất; sử dụng hiện đại trên các trang web nhạy cảm về quyền riêng tư thường tự lưu trữ phông chữ để tránh các mối quan tâm về quyền riêng tư và tuân thủ GDPR của CDN Google (một phán quyết của tòa án Đức năm 2022 cụ thể đã phán quyết rằng việc tải Google Fonts từ máy chủ của Google mà không có sự đồng ý của người dùng vi phạm GDPR). Adobe Fonts (trước đây là Typekit, được mua lại năm 2011), Fontshare (phông chữ miễn phí từ Indian Type Foundry, 2021), Bunny Fonts (mirror Google Fonts tôn trọng quyền riêng tư, 2021) là các lựa chọn thay thế chính.
Các danh mục phông chữ
- Phông chữ serif · Georgia, Times New Roman, Palatino. Truyền thống, dễ đọc, trang trọng. Tốt cho phần thân văn bản trong các bài báo và sách.
- Phông chữ sans-serif · Arial, Helvetica, Verdana, Roboto, Open Sans. Hiện đại, sạch sẽ, đa năng. Phổ biến nhất trong thiết kế web.
- Phông chữ monospace · Courier New, Source Code Pro. Chiều rộng cố định. Hoàn hảo cho mã, terminal và tài liệu kỹ thuật.
- Phông chữ display · Impact, Playfair Display, Oswald. Lớn, đậm, trang trí. Lý tưởng cho các tiêu đề và branding.
- Phông chữ tay viết và script bắt chước các kiểu viết tay. Hữu ích một cách tiết kiệm cho thương hiệu phong cách cá nhân hoặc lời mời; gần như không thể đọc ở kích thước thân; nên được sử dụng theo cách chữ hoa được sử dụng (ngắn gọn, có chủ đích).
Phông Chữ Biến: Cuộc Cách Mạng Lặng Lẽ Hiện Đại
Đặc tả OpenType Font Variations (TrueType GX Variations của Apple từ năm 1994 + đóng góp của Adobe, được chuẩn hóa cùng nhau là OpenType 1.8 vào tháng 9 năm 2016) cho phép một tệp phông chữ duy nhất mô tả một gia đình vô hạn các biến thể liên quan. Trong khi một gia đình truyền thống gửi các tệp phông chữ riêng biệt cho Light, Regular, Medium, Bold, Black, cộng với các phiên bản italic của chúng: sáu đến mười tệp mỗi tệp 50-200 KB: một phông chữ biến gửi một tệp duy nhất chứa tất cả các thiết kế tương tự dưới dạng các biến thể liên tục dọc theo các trục (trọng lượng, chiều rộng, độ nghiêng, kích thước quang học và các trục tùy chỉnh tùy ý mà nhà thiết kế kiểu chữ định nghĩa). Hỗ trợ trình duyệt đã đổ bộ vào Chrome 62 (tháng 10 năm 2017), Firefox 62 (tháng 9 năm 2018), Safari 11.0 / 11.1 (2017-2018) và Edge với Chromium (2020). Các bản phát hành phông chữ biến chính bao gồm Roboto Flex (Christian Robertson + Font Bureau, tháng 10 năm 2022) có 13 trục; Recursive (Stephen Nixon, 2019); Inter (Rasmus Andersson) với các trục trọng lượng + độ nghiêng; và hầu hết các gia đình kiểu chữ chính hiện gửi các phiên bản biến cùng với các tệp tĩnh truyền thống. Tiết kiệm băng thông là đáng kể: một tệp phông chữ biến 200 KB thay thế tám tệp tĩnh 100 KB, đồng thời cung cấp tính linh hoạt thiết kế lớn hơn.
Tải Phông Chữ và Vấn Đề FOUT/FOIT
Khi một trình duyệt lấy một tệp phông chữ tùy chỉnh, nó hiển thị gì trong khi đó? Hai chiến lược cực đoan. FOIT (Flash of Invisible Text): không render văn bản nào cho đến khi phông chữ đến, sau đó đột nhiên hiển thị văn bản. Trang trông bị hỏng cho đến khi phông chữ tải. FOUT (Flash of Unstyled Text): render văn bản ngay lập tức trong một phông chữ dự phòng, sau đó chuyển sang phông chữ tùy chỉnh khi nó đến. Trang có thể đọc được từ frame 0 nhưng việc hoán đổi gây khó chịu về mặt thị giác. Thuộc tính CSS font-display (được thêm vào trong CSS Fonts Module Level 4) cho các nhà phát triển quyền kiểm soát: auto (mặc định trình duyệt, thường nghiêng về FOIT), block (FOIT đầy đủ), swap (FOUT đầy đủ: thực tiễn tốt nhất hiện đại chiếm ưu thế), fallback (chặn vô hình ngắn rồi hoán đổi, với dự phòng "đủ tốt" sau vài giây), optional (bỏ qua phông chữ tùy chỉnh hoàn toàn nếu nó không tải đủ nhanh). Đối với điểm Core Web Vitals và Lighthouse vào năm 2026, font-display: swap là khuyến nghị tiêu chuẩn, được ghép nối với gợi ý preload cho các phông chữ quan trọng và một phông chữ dự phòng được chọn cẩn thận có metric tương tự với phông chữ tùy chỉnh (để bố cục không chảy lại khi xảy ra hoán đổi: thuộc tính size-adjust mới trong CSS Fonts Module Level 5 tinh chỉnh điều này).
Chọn Phông Chữ Cho Công Việc
- Văn bản thân UI: stack phông chữ hệ thống trước (Apple SF, Segoe UI, Roboto, theo OS của người dùng) cho độ trễ bằng không và giao diện phù hợp nền tảng. Nếu phông chữ tùy chỉnh được yêu cầu vì lý do thương hiệu, chọn sans nhân văn (Inter, Open Sans, Source Sans Pro) ở 16 px hoặc lớn hơn.
- Đọc dài (bài viết, blog): serif được tối ưu hóa màn hình (Georgia, Merriweather, Lora) ở 18-22 px với line-height hào phóng (1.6-1.8). Serif hỗ trợ theo dõi mắt qua các dòng văn bản dài.
- Wordmark thương hiệu: một mặt hiển thị đặc biệt được sử dụng ở một kích thước lớn duy nhất. Ghép cặp với một mặt thân trung tính hơn. Đầu tư vào kiểu chữ tùy chỉnh hoặc đặt làm ở đây sẽ có lợi nhuận: đó là quyết định kiểu chữ riêng lẻ dễ thấy nhất trong thương hiệu.
- Khối mã: phông chữ lập trình viên chuyên dụng (JetBrains Mono, Fira Code, Cascadia Code) ở 14-15 px. Ligature lập trình là sở thích cá nhân; nhiều nhà phát triển yêu chúng, một số thấy chúng khó hiểu.
- Bảng số: phông chữ với chữ số tabular (chữ số 1 chiếm cùng chiều rộng với 2, 3, v.v.) để các cột số căn chỉnh mà không cần đệm thủ công. Hầu hết các phông chữ hiện đại cung cấp chữ số tabular thông qua thuộc tính
font-variant-numeric: tabular-nums. - Chỉ sử dụng trang trí: phông chữ tay viết, script, mặt hiển thị retro. Sử dụng ngắn gọn và có chủ đích; không bao giờ cho văn bản thân.
Câu hỏi thường gặp
Sự khác biệt giữa phông chữ web-safe và phông chữ tùy chỉnh là gì?
Các phông chữ web-safe được cài đặt sẵn trên máy tính của người dùng và hiển thị ngay lập tức. Các phông chữ tùy chỉnh (Google Fonts, Typekit, v.v.) phải được tải xuống, điều này thêm độ trễ nhưng cung cấp nhiều sự đa dạng hơn. Hầu hết các trang web kết hợp cả hai: các phông chữ web-safe làm fallback và các phông chữ tùy chỉnh làm chính.
Cách sử dụng một Google Font trên trang web của tôi?
Sao chép khai báo CSS font-family được cung cấp bởi công cụ này và dán nó vào CSS của bạn. Các Google Fonts tải qua một thẻ link trong head HTML. Công cụ này đã bao gồm các liên kết phông chữ: chỉ cần áp dụng các quy tắc font-family vào các phần tử của bạn.
Một phông chữ serif tốt cho phần thân văn bản là gì?
Georgia và Merriweather là các phông chữ tuyệt vời cho phần thân văn bản. Chúng rất dễ đọc trên màn hình nhờ khoảng cách tốt và các hình dạng chữ cái phân biệt. Times New Roman quá chật cho web. Cho một serif hiện đại, hãy thử Playfair Display.
Công cụ xem trước này có hoạt động offline không?
Các phông chữ web-an-toàn (Arial, Georgia, Verdana, v.v.) hoạt động offline vì chúng được tải từ hệ điều hành của bạn. Google Fonts trong thư viện yêu cầu một lần tải mạng từ CDN của Google để render: một khi được tải, chúng được lưu vào bộ nhớ cache và bản xem trước hoạt động offline sau đó. Đưa trang offline (chế độ máy bay) sau khi tải ban đầu để xác nhận; các phông chữ được cài đặt OS tiếp tục render, các phông chữ Google sử dụng bất cứ thứ gì được lưu vào bộ nhớ cache.