PX sang REM và chiều cao dòng
- Tệp không rời khỏi thiết bị của bạn
- Chạy trên trình duyệt
- Miễn phí, không cần đăng ký, không hình mờ
Converter
Type in any box, the rest follow.Preview
Typography is the craft of making language visible. A good line length and generous leading let the eye glide from one line to the next without losing its place.
Common sizes
Click a row to load it into the converter.| px | rem | em | pt | vw | Line-height |
|---|---|---|---|---|---|
| 10 | 0.625 | 0.625 | 7.5 | 0.694 | 1.7 |
| 12 | 0.75 | 0.75 | 9 | 0.833 | 1.65 |
| 13 | 0.8125 | 0.8125 | 9.75 | 0.903 | 1.63 |
| 14 | 0.875 | 0.875 | 10.5 | 0.972 | 1.6 |
| 15 | 0.9375 | 0.9375 | 11.25 | 1.042 | 1.57 |
| 16 | 1 | 1 | 12 | 1.111 | 1.55 |
| 18 | 1.125 | 1.125 | 13.5 | 1.25 | 1.52 |
| 20 | 1.25 | 1.25 | 15 | 1.389 | 1.5 |
| 24 | 1.5 | 1.5 | 18 | 1.667 | 1.4 |
| 28 | 1.75 | 1.75 | 21 | 1.944 | 1.32 |
| 32 | 2 | 2 | 24 | 2.222 | 1.25 |
| 36 | 2.25 | 2.25 | 27 | 2.5 | 1.23 |
| 40 | 2.5 | 2.5 | 30 | 2.778 | 1.2 |
| 48 | 3 | 3 | 36 | 3.333 | 1.15 |
| 56 | 3.5 | 3.5 | 42 | 3.889 | 1.13 |
| 64 | 4 | 4 | 48 | 4.444 | 1.1 |
| 72 | 4.5 | 4.5 | 54 | 5 | 1.09 |
| 96 | 6 | 6 | 72 | 6.667 | 1.05 |
Type scale
Fluid type with clamp()
Text grows smoothly between two viewport widths and stays fixed outside them.
font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
The quick brown fox
Cách dùng PX sang REM và chiều cao dòng
Chuyển giữa px, rem, em, pt, % và vw bằng cỡ chữ gốc và cha của bạn, và nhận chiều cao dòng cùng độ dài dòng được khuyên cho mọi cỡ. Trang cũng dựng thang chữ module và quy tắc clamp() linh hoạt cho chữ đáp ứng.
- 1
Đặt “Cỡ chữ gốc”, “Cỡ chữ cha” và “Chiều rộng khung nhìn” trong “Ngữ cảnh”.
- 2
Gõ giá trị vào ô bất kỳ trong “Bộ chuyển”; các đơn vị khác theo.
- 3
Đọc “Chiều cao dòng được khuyên” và “Độ dài dòng thoải mái” cho cỡ đó.
- 4
Tùy chọn: dựng “Thang chữ” từ một tỷ lệ, hoặc “Chữ linh hoạt” với quy tắc clamp(), rồi sao chép CSS.
Câu hỏi thường gặp
1rem bằng bao nhiêu pixel?
1rem bằng cỡ chữ gốc (<html>), trình duyệt mặc định 16 px. Đổi “Cỡ chữ gốc” nếu site của bạn dùng cơ số khác.
rem và em khác nhau thế nào?
rem tương đối với cỡ chữ gốc; em và % tương đối với cỡ chữ của phần tử cha. Đặt “Cỡ chữ cha” để chuyển em đúng.
Chiều cao dòng được chọn thế nào?
Nó theo thực hành chữ phổ biến: khoảng 1.5 cho chữ thân và leading chặt hơn cho tiêu đề lớn. Bản bám lưới 4 px cũng được hiện.
Bộ tạo clamp() làm gì?
Nó viết font-size lớn mượt giữa cỡ tối thiểu và tối đa qua hai chiều rộng khung nhìn và cố định ngoài khoảng đó. “Mô phỏng chiều rộng khung nhìn” hiện kết quả ở chiều rộng bất kỳ.
Tôi có chuyển point cho in được không?
Có. pt dùng tỷ lệ CSS 72 pt trên 96 px, nên 12 pt bằng 16 px.