Giới hạn kiểu chữ linh hoạt

Tạo tỷ lệ phông chữ tuyến tính CSS giữa hai chiều rộng khung nhìn.

Giá trị đầu vào

Biểu thức giới hạn CSS

—

CSS được tạo ra là giá trị ban đầu. Ưu tiên đơn vị văn bản tương đối khi thích hợp và kiểm tra thu phóng, tỷ lệ văn bản và tràn.

Công thức

Sử dụng m = 100(f₁−f₀)/(v₁−v₀) và b = f₀−mv₀/100. Kích thước chất lỏng là clamp(f₀, b + m×vw, f₁); f biểu thị kích thước phông chữ và v biểu thị chiều rộng khung nhìn.

Tạo tỷ lệ phông chữ tuyến tính CSS giữa hai chiều rộng khung nhìn.

Ví dụ minh họa

Kích thước phông chữ tối thiểu (px): 16
Kích thước phông chữ tối đa (px): 24
Chiều rộng khung nhìn tối thiểu (px): 400
Chiều rộng khung nhìn tối đa (px): 1200

Biểu thức giới hạn CSS: clamp(16px, calc(12px + 1vw), 24px)
Hệ số khung nhìn: 1 vw
Điểm cắt pixel: 12 px

Phạm vi và giới hạn

CSS được tạo ra là giá trị ban đầu. Ưu tiên đơn vị văn bản tương đối khi thích hợp và kiểm tra thu phóng, tỷ lệ văn bản và tràn.

Các giá trị đầu vào được kiểm tra xem có bị thiếu hay không và phạm vi cho phép. Kết quả nằm ngoài phạm vi số hữu hạn sẽ không được hiển thị. Làm tròn ảnh hưởng đến hiển thị, trong khi phép tính sử dụng độ chính xác số của mô hình.

Kiểm tra đơn vị và giả định của bạn trước khi dựa vào kết quả. Thay đổi nhãn không chuyển đổi đơn vị tiền tệ hoặc đơn vị vật lý.

Phiên bản công thức: c81b657b101d · Ví dụ đã được kiểm tra: 2026-10-30

Phương pháp