Bản Xem Trước Typography
Điều chỉnh font-size, line-height & letter-spacing trực tiếp.
Sao chép CSS chỉ với một cú nhấp chuột.
↑ Nhấp vào văn bản phía trên để chỉnh sửa trực tiếp
Về Công Cụ
Công cụ Bản Xem Trước Typography cho phép bạn điều chỉnh font-size, line-height, letter-spacing và font-weight bằng các thanh trượt và thấy ngay kết quả trong khu vực xem trước trực tiếp.
Hỗ trợ Google Fonts, bao gồm cả phông chữ tiếng Nhật. Khi bạn đã hài lòng với các cài đặt, hãy sao chép kết quả CSS chỉ bằng một cú nhấp chuột. Chỉ có thao tác tải Google Fonts là gửi yêu cầu ra mạng bên ngoài — nội dung văn bản và cài đặt của bạn không bao giờ được truyền đi.
Cách sử dụng
Điều chỉnh thanh trượt
Kéo các thanh trượt font-size, line-height, letter-spacing và font-weight. Hoặc bắt đầu từ một cài đặt sẵn cho các trường hợp phổ biến.
Kiểm tra Bản Xem Trước
Theo dõi những thay đổi ngay lập tức ở khu vực xem trước. Nhấp vào văn bản để chỉnh sửa bằng nội dung của riêng bạn.
Sao chép CSS
Nhấp vào "Sao chép CSS" để sao chép đoạn mã được tạo vào clipboard và dán nó vào bảng định kiểu (stylesheet) của bạn.
Thuật ngữ
- font-size
- Thiết lập kích thước của phông chữ. Có thể chỉ định bằng px, em, rem, % v.v. Mặc định của trình duyệt là 16px.
- line-height
- Thiết lập chiều cao của một dòng. Nên sử dụng giá trị không có đơn vị (ví dụ: 1.75). Đối với văn bản thông thường, mức 1.5–1.8 là phổ biến.
- letter-spacing
- Thiết lập khoảng cách giữa các ký tự. Khuyến nghị sử dụng đơn vị em để thiết kế có khả năng co giãn tốt.
- font-weight
- Thiết lập độ đậm (độ dày) của phông chữ. Giá trị nằm trong khoảng từ 100 (rất mỏng) đến 900 (rất đậm).
- font-family
- Chỉ định kiểu chữ. Có thể liệt kê nhiều phông chữ dự phòng cách nhau bằng dấu phẩy.
- Typography
- Nghệ thuật sắp chữ nhằm làm cho ngôn ngữ viết dễ đọc, dễ nhìn và có tính thẩm mỹ.
- Google Fonts
- Một dịch vụ phông chữ web miễn phí của Google. Các phông chữ được tải thông qua thẻ liên kết CSS hoặc JavaScript và áp dụng qua font-family.
- Web Font
- Phông chữ được tải từ một máy chủ bằng cách sử dụng @font-face. Web font đảm bảo khả năng hiển thị đồng nhất trên các thiết bị.
Câu hỏi thường gặp
- Q.Văn bản của tôi có bị gửi đến máy chủ không?
- Không. Đoạn văn bản xem trước và mọi cài đặt đều được xử lý cục bộ trên trình duyệt của bạn.
- Q.Tại sao việc tải Google Fonts lại liên quan đến các yêu cầu ra bên ngoài?
- Chỉ có chính tệp phông chữ mới được tải xuống từ các máy chủ Google. Văn bản và cài đặt của bạn không bao giờ bị truyền đi.
- Q.Tôi có thể sử dụng những phông chữ không có trong danh sách không?
- Bạn có thể tải bất kỳ Google Font nào bằng cách thêm tên của nó vào trường font-family trong bảng định kiểu (stylesheet) của bạn. Danh sách tích hợp sẵn của công cụ này bao gồm các lựa chọn phổ biến nhất.
- Q.Công cụ này có hoạt động trên thiết bị di động không?
- Có. Các thanh trượt hỗ trợ cả thao tác cảm ứng.
- Q.Tôi có thể nhập giá trị chính xác thay vì dùng thanh trượt không?
- Không hỗ trợ trực tiếp. Hãy sử dụng các cài đặt sẵn cho những giá trị phổ biến, sau đó tinh chỉnh thêm bằng thanh trượt.
Ứng dụng
Thiết kế Web Typography
Tìm kiếm sự kết hợp hoàn hảo giữa kích thước chữ và chiều cao dòng một cách trực quan cho tiêu đề, văn bản chính và chú thích.
Tối ưu Khả năng Đọc Blog
Điều chỉnh chiều cao dòng và khoảng cách chữ hoàn hảo cho các bài viết dài.
Kiểm tra Font Bài Thuyết Trình
Xác minh kích thước chữ và độ đậm trước khi hoàn thiện trình bày.
Học CSS
Hiểu cách hoạt động của từng thuộc tính CSS bằng cách thử nghiệm trực quan.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.