Trình tạo thang tỷ lệ chữ

Trình tạo thang tỷ lệ chữ là gì?

Trình tạo thang tỷ lệ chữ biến một kích thước cơ sở và một tỷ lệ mô-đun thành một thang tỷ lệ chữ hoàn chỉnh, nhất quán về mặt toán học, với bao nhiêu bậc tiêu đề lớn hơn và bậc chú thích nhỏ hơn tùy bạn cần. Ngoài kích thước phông thô, nó suy ra chiều cao dòng và giãn chữ tương ứng cho mỗi bậc, cùng một biểu thức clamp() linh hoạt tùy chọn nội suy giữa khung nhìn di động và máy tính bằng một tỷ lệ di động riêng. Nhà thiết kế và lập trình viên front-end dùng nó để dựng các token chữ của một design system, giữ kích thước nhất quán và dán CSS, Sass, Tailwind hoặc JSON sẵn dùng. Nhập bất kỳ tỷ lệ tùy chỉnh nào hoặc chọn tỷ lệ cổ điển, đặt kích thước cơ sở và đơn vị (px hoặc rem), xem trước bằng font-family của bạn rồi sao chép định dạng cần dùng.

Cách sử dụng Trình tạo thang tỷ lệ chữ

1. Nhập bất kỳ tỷ lệ tùy chỉnh nào vào trường tỷ lệ, hoặc chọn một tỷ lệ cổ điển như Quãng tư đúng (1.333) từ danh sách mẫu trong phần cài đặt.
2. Đặt kích thước cơ sở; nó trở thành kích thước văn bản nội dung và điểm neo của thang.
3. Trong cài đặt, chọn tạo bao nhiêu bậc lớn hơn và nhỏ hơn; các bậc nhỏ hơn nằm dưới cơ sở dùng cho chú thích và chữ nhỏ.
4. Tinh chỉnh chiều cao dòng cơ sở và chiều cao dòng chặt cùng giãn chữ ở kích thước lớn, và nhập một font-family để xem trước thang bằng kiểu chữ của bạn.
5. Với chữ đáp ứng, đặt bề rộng khung nhìn tối thiểu và tối đa cùng một tỷ lệ di động để dựng thang clamp() linh hoạt.
6. Chuyển định dạng đầu ra giữa biến CSS, clamp() linh hoạt, Sass, cấu hình Tailwind và JSON, rồi sao chép mã hoặc kích thước của một bậc cụ thể.

Ví dụ

tỷ lệ 1.333, cơ sở 16px, 5 lên / 1 xuống

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

cơ sở 16px, tỷ lệ 1.333, tỷ lệ di động 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

thang bất kỳ, xuất Tailwind

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

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

Tôi có thể dùng tỷ lệ tùy chỉnh chứ không chỉ mẫu có sẵn không?

Có. Nhập bất kỳ số nào vào trường tỷ lệ, như 1.2, 1.5, 1.618 hoặc một giá trị phi tiêu chuẩn như 1.45. Danh sách mẫu trong cài đặt chỉ là lối tắt điền vào cùng trường đó, và chọn một giá trị không khớp mẫu sẽ đơn giản hiển thị Tùy chỉnh.

Các bậc nhỏ hơn (âm) hoạt động thế nào?

Thang được neo tại kích thước cơ sở (bậc 0). Bậc lớn hơn nhân cơ sở với tỷ lệ, còn bậc nhỏ hơn chia, tạo ra các kích thước chú thích và chữ nhỏ dưới cơ sở như sm và xs. Đặt số bậc lớn hơn và nhỏ hơn bạn muốn trong cài đặt.

Chiều cao dòng và giãn chữ được tính thế nào?

Chiều cao dòng chuyển từ giá trị cơ sở của bạn ở kích thước nội dung sang giá trị chặt hơn khi chữ lớn dần, và giãn chữ chuyển từ 0 tại cơ sở sang giá trị cho kích thước lớn của bạn, nên chữ hiển thị lớn hơi chặt hơn và chữ nhỏ hơi rộng hơn. Cả hai đường cong đều điều chỉnh được trong cài đặt.

Thang clamp() linh hoạt là gì?

Nó dựng một font-size: clamp() cho mỗi bậc, lớn dần mượt mà giữa bề rộng khung nhìn tối thiểu và tối đa, dùng tỷ lệ chính của bạn ở bề rộng tối đa và một tỷ lệ di động riêng ở tối thiểu. Chọn định dạng đầu ra CSS clamp() để xuất nó.

Có dữ liệu nào của tôi được gửi lên máy chủ không?

Không. Toàn bộ thang, gồm kích thước, chiều cao dòng, giãn chữ và các giá trị clamp() linh hoạt, được tính cục bộ trong trình duyệt của bạn bằng số học đơn giản. Không có gì được tải lên, nên công cụ hoạt động ngoại tuyến và giữ riêng tư các thiết lập của bạn.