Tạo CSS font stack — Font hệ thống kèm font dự phòng CJK

Công cụ này làm gì

Công cụ tạo CSS font stack dựng sẵn một giá trị font-family để dán ngay, từ những font đã được cài trên thiết bị của người truy cập. Chọn một phong cách, chẳng hạn font giao diện hệ thống gốc, một neo-grotesque như Inter và Helvetica, một serif chuyển tiếp như Charter, hay một font monospace thân thiện với code, và công cụ sẽ liệt kê font tốt nhất trên từng nền tảng theo đúng thứ tự.

Các stack dựa theo bộ sưu tập Modern Font Stacks nổi tiếng, cộng thêm stack cổ điển -apple-system, BlinkMacSystemFont, "Segoe UI" mà nhiều trang web vẫn dùng. Bạn có thể thêm font dự phòng cho tiếng Trung giản thể, tiếng Trung phồn thể, tiếng Nhật, tiếng Hàn, tiếng Ả Rập, tiếng Thái hoặc tiếng Hindi, và font emoji màu ở cuối.

Cách sử dụng

Chọn một Font stack. Phần xem trước bên trái cho thấy nó trông thế nào trên thiết bị bạn đang dùng; bạn có thể sửa văn bản để thử với chữ của mình.
Chọn Font cho các hệ chữ khác nếu trang của bạn có chữ Trung, Nhật, Hàn, Ả Rập, Thái hoặc Hindi.
Bật hoặc tắt Thêm font emoji.
Chọn Đầu ra: một khai báo font-family thuần, một CSS custom property, một mục fontFamily của Tailwind, hoặc một danh sách đơn giản.
Sao chép kết quả hoặc tải xuống dưới dạng tệp .css.

Tên có chứa dấu cách hoặc bắt đầu bằng chữ số sẽ tự động được đặt trong dấu nháy; các từ khóa CSS như system-ui và sans-serif không bao giờ được đặt trong dấu nháy, vì làm vậy sẽ biến chúng thành tên font không tồn tại.

Ví dụ

Giao diện hệ thống với font dự phòng tiếng Trung giản thể:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Mẹo

Dùng một stack cho chữ nội dung và một stack monospace cho code: hai stack hệ thống không tốn chút chi phí tải nào.
Phần xem trước phụ thuộc vào font được cài trên chính thiết bị của bạn, vì vậy hãy kiểm tra trang trên Windows và cả trên điện thoại.
Nếu sau này bạn thêm web font, hãy đặt nó đầu danh sách và giữ stack hệ thống làm phương án dự phòng.

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

› Font stack là gì?

Là danh sách các họ font trong thuộc tính CSS font-family. Trình duyệt dùng font đầu tiên đã được cài trên thiết bị và chuyển sang font tiếp theo nếu không có, cuối cùng là một họ font chung như sans-serif.

› Vì sao cần thêm font tiếng Trung, Nhật hoặc Hàn?

Các font phương Tây như Inter hay Charter không có glyph CJK. Liệt kê PingFang SC, Microsoft YaHei hoặc Noto Sans SC trước họ font chung giúp chữ Trung dùng một font hợp phong cách thay vì font bất kỳ do hệ thống chọn. Tiếng Ả Rập, tiếng Thái và tiếng Hindi (Devanagari) cũng vậy. Tiếng Nga, tiếng Ukraina, tiếng Hy Lạp, tiếng Việt, tiếng Thổ Nhĩ Kỳ, tiếng Ba Lan và các ngôn ngữ dùng chữ Latinh hoặc Kirin khác không cần thêm gì: font hệ thống và font Noto trong mọi stack đã hỗ trợ sẵn.

› Vì sao font emoji được đặt sau sans-serif?

Font emoji chỉ chứa emoji. Đặt chúng ở cuối đảm bảo chữ cái và chữ số thông thường không bao giờ hiển thị bằng font emoji, trong khi emoji vẫn có glyph màu trên mọi nền tảng.

› Các font stack này có cần tải web font không?

Không. Mọi stack đều dùng font có sẵn trên Windows, macOS, iOS, Android hoặc các bản phân phối Linux phổ biến, nên trang tải mà không cần bất kỳ yêu cầu font nào.