Typography Chảy là gì?

Typography chảy làm cho văn bản của bạn mở rộng mượt mà trên các kích thước màn hình thay vì nhảy giữa các điểm dừng cố định. Sử dụng hàm CSS clamp(), font-size và line-height điều chỉnh tỷ lệ thuận khi chiều rộng viewport thay đổi — không cần media query.

Cách Tiếp Cận Truyền Thống

Điểm Dừng Cố Định

Thay đổi kích thước đột ngột tại các điểm dừng
Cần nhiều media query
Duy trì nhiều giá trị cho mỗi phần tử
Tỷ lệ không nhất quán giữa các điểm dừng

Typography Chảy

Giải Pháp clamp()

Mở rộng mượt mà, liên tục
Không cần media query
Khai báo duy nhất cho mỗi phần tử
Kích thước hoàn hảo ở bất kỳ viewport nào

Hiểu clamp()

Hàm clamp(min, preferred, max) chấp nhận ba giá trị: kích thước tối thiểu, kích thước ưa thích dựa trên chiều rộng viewport, và kích thước tối đa. Trình duyệt tự động tính toán kích thước phù hợp cho bất kỳ viewport nào.

Ví dụ: font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) mở rộng mượt mà văn bản từ 16px ở viewport 320px đến 24px ở viewport 1440px.

Tại Sao Sử Dụng Máy Tính Này?

Tính toán giá trị ưa thích (tham số giữa) yêu cầu toán học phức tạp: chuyển đổi giá trị pixel thành rem, tính toán độ dốc và giao điểm y của hàm tuyến tính. Máy tính này xử lý tất cả các phép tính và cung cấp cho bạn mã CSS sẵn sàng sản xuất ngay lập tức.

Tính Toán Tự Động

Các công thức toán học phức tạp được tính toán ngay lập tức với kết quả chính xác.

Bản Xem Trước Trực Tiếp

Xem chính xác cách typography của bạn mở rộng trên các kích thước viewport khác nhau.

Mã Sẵn Sàng Sử Dụng

Sao chép mã CSS sẵn sàng sản xuất trực tiếp vào dự án của bạn.

Table of Contents

1. Typography Chảy là gì?
2. Cách Sử Dụng
3. Tính Năng
4. Các Câu Hỏi Thường Gặp

Cách Sử Dụng

Làm theo các bước đơn giản này để tạo CSS typography chảy cho dự án của bạn. Máy tính sẽ hướng dẫn bạn qua từng tham số với bản xem trước thời gian thực và tạo mã ngay lập tức.

Đặt Phạm Vi Viewport Của Bạn

Nhập chiều rộng viewport tối thiểu và tối đa cho thiết kế của bạn. Các giá trị phổ biến là 320px (di động nhỏ nhất) và 1440px (máy tính để bàn tiêu chuẩn). Văn bản sẽ mở rộng tuyến tính giữa các điểm dừng này.

Phạm vi được khuyến nghị: 320px–1440px bao gồm 95% thiết bị từ di động đến máy tính để bàn.

Đặt Kích Thước Font

Sử dụng các thanh trượt hoặc nhập kích thước font tối thiểu và tối đa. Kích thước tối thiểu là kích thước ở viewport nhỏ nhất, kích thước tối đa là kích thước ở viewport lớn nhất.

Bạn cũng có thể nhấp vào một preset (H1–H6, Body, Small) để tải các giá trị typography phổ biến dựa trên các thực hành tốt nhất.

Điều Chỉnh Chiều Cao Dòng

Đặt các giá trị line-height tối thiểu và tối đa. Văn bản lớn hơn thường cần line-height chặt hơn (ví dụ: 1.1–1.2 cho tiêu đề), trong khi văn bản nội dung cần khoảng cách lớn hơn (ví dụ: 1.5–1.7).

Mẹo: Nếu cả hai giá trị giống nhau, một line-height tĩnh sẽ được xuất ra thay vì clamp() để có mã sạch hơn.

Chọn Đơn Vị Đầu Ra

Chọn rem (được khuyến nghị) hoặc px cho đầu ra. Khi sử dụng rem, đặt kích thước Font Cơ Bản để khớp với kích thước font gốc của dự án của bạn (thường là 16px).

rem: Tôn trọng cài đặt trình duyệt của người dùng (khả năng tiếp cận tốt hơn)
px: Kích thước cố định độc lập với kích thước font gốc

Xem Trước và Sao Chép

Kéo thanh trượt viewport để xem trước cách văn bản mở rộng ở các kích thước màn hình khác nhau. Khi hài lòng, nhấp vào Sao Chép để sao chép mã CSS vào bộ nhớ tạm của bạn.

Tính Năng

Máy tính này cung cấp các công cụ toàn diện để tạo typography chảy với độ chính xác và dễ dàng. Mỗi tính năng được thiết kế để hợp lý hóa quy trình làm việc của bạn và đảm bảo kết quả chính xác.

Tạo CSS clamp()

Tạo CSS sẵn sàng sản xuất sử dụng hàm clamp() cho cả font-size và line-height.

Các giá trị độ dốc (vw) được tính toán chính xác
Các giá trị giao điểm (rem hoặc px) chính xác
Đầu ra sạch, được tối ưu hóa

Preset Typography

Tám preset tích hợp bao gồm các nhu cầu typography phổ biến dựa trên các thực hành tốt nhất của ngành.

Tiêu đề H1 đến H6
Văn bản nội dung và văn bản nhỏ
Phạm vi kích thước và line-height được tối ưu hóa

Bản Xem Trước Tương Tác

Một thanh trượt viewport cho phép bạn mô phỏng bất kỳ độ rộng màn hình nào từ 320px đến 1920px.

Bản xem trước tỷ lệ văn bản thời gian thực
Mô phỏng kích thước viewport chính xác
Phản hồi trực quan ngay lập tức

Phân Tích Công Thức

Phần công thức hiển thị phép tính từng bước để có tính minh bạch hoàn toàn.

Chi tiết tính toán độ dốc
Hệ số chiều rộng viewport
Tính toán giao điểm y

Đầu Ra Linh Hoạt

Chuyển đổi giữa đầu ra rem và px với kích thước font cơ bản có thể cấu hình.

Lựa chọn đơn vị rem hoặc px
Kích thước font cơ bản có thể tùy chỉnh
Chuyển đổi chính xác

Chiều Cao Dòng Chảy

Tạo các giá trị line-height chảy sử dụng clamp() để có khả năng đọc tối ưu ở tất cả các kích thước.

Mở rộng tỷ lệ thuận với font-size
Đầu ra tĩnh khi các giá trị khớp
Duy trì khả năng đọc trên các viewport

Các Câu Hỏi Thường Gặp

CSS clamp() là gì?

clamp(min, preferred, max) là một hàm CSS ràng buộc một giá trị giữa tối thiểu và tối đa. Giá trị ưa thích (thường sử dụng đơn vị vw) mở rộng với viewport, nhưng không bao giờ dưới mức tối thiểu hoặc vượt quá mức tối đa.

Ví Dụ Cú Pháp clamp()

/* font-size: clamp(minimum, preferred, maximum) */
font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem);

Tôi nên sử dụng rem hay px?

Sử dụng rem cho hầu hết các trường hợp. Các đơn vị rem tôn trọng cài đặt kích thước font của trình duyệt người dùng, cải thiện khả năng tiếp cận. Chỉ sử dụng px nếu bạn cần kích thước độc lập với kích thước font gốc.

Thực hành tốt nhất: Các đơn vị rem cung cấp khả năng tiếp cận tốt hơn và tôn trọng sở thích của người dùng, làm cho typography của bạn bao gồm hơn.

Tôi nên sử dụng phạm vi viewport nào?

Một phạm vi từ 320px đến 1440px hoạt động tốt cho hầu hết các dự án. 320px bao gồm các màn hình di động phổ biến nhất, và 1440px là chiều rộng máy tính để bàn tiêu chuẩn. Điều chỉnh dựa trên phân tích hoặc thông số kỹ thuật thiết kế của dự án của bạn.

320px: Các thiết bị di động nhỏ nhất (iPhone SE, Android cũ)
1440px: Màn hình máy tính để bàn/máy tính xách tay tiêu chuẩn
Phạm vi tùy chỉnh: Sử dụng dữ liệu phân tích cho đối tượng cụ thể của bạn

Cài đặt "Font Cơ Bản" là gì?

Đây là kích thước font gốc của bạn (giá trị được đặt trên phần tử <html>). Mặc định là 16px. Nếu dự án của bạn sử dụng kích thước font gốc khác, hãy thay đổi điều này để chuyển đổi rem chính xác.

Đặt Kích Thước Font Gốc

html {
  font-size: 16px; /* Base font for rem calculations */
}

Tại sao đầu ra line-height của tôi hiển thị giá trị tĩnh thay vì clamp()?

Khi các giá trị line-height tối thiểu và tối đa giống nhau, không cần mở rộng. Máy tính xuất ra một giá trị tĩnh đơn giản thay vì một clamp() không cần thiết để có CSS sạch hơn, hiệu quả hơn.

Ví dụ: Nếu cả line-height tối thiểu và tối đa đều được đặt thành 1.5, đầu ra sẽ là line-height: 1.5; thay vì line-height: clamp(1.5, 1.5, 1.5);

clamp() có được hỗ trợ trong tất cả các trình duyệt không?

CSS clamp() được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm Chrome 79+, Firefox 75+, Safari 13.1+ và Edge 79+. Để hỗ trợ trình duyệt cũ hơn, hãy cân nhắc cung cấp một font-size dự phòng trước khai báo clamp().

Trình Duyệt	Phiên Bản Tối Thiểu	Ngày Phát Hành	Hỗ Trợ
Chrome	79+	Tháng 12 năm 2019	Hỗ Trợ Đầy Đủ
Firefox	75+	Tháng 4 năm 2020	Hỗ Trợ Đầy Đủ
Safari	13.1+	Tháng 3 năm 2020	Hỗ Trợ Đầy Đủ
Edge	79+	Tháng 1 năm 2020	Hỗ Trợ Đầy Đủ

Ví Dụ Dự Phòng

h1 {
  font-size: 2rem; /* Fallback for older browsers */
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem); /* Modern browsers */
}

Tôi có thể sử dụng điều này cho khoảng cách và các thuộc tính khác không?

Toán học đằng sau clamp() hoạt động cho bất kỳ thuộc tính CSS nào chấp nhận các giá trị độ dài — padding, margin, gap, width, v.v. Sử dụng công thức được tạo ra làm tham chiếu và điều chỉnh tên thuộc tính trong CSS của bạn.

Thuộc Tính Khoảng Cách

padding
margin
gap
border-radius

Thuộc Tính Kích Thước

width / max-width
height / max-height
column-gap / row-gap
border-width

Ví Dụ Khoảng Cách Chảy

.container {
  /* Fluid padding */
  padding: clamp(1rem, 0.5rem + 2vw, 3rem);
  
  /* Fluid gap */
  gap: clamp(0.5rem, 0.25rem + 1vw, 2rem);
  
  /* Fluid max-width */
  max-width: clamp(320px, 90vw, 1200px);
}