Chuyển đổi kiểu chữ
Loading tool...
Trong thiết kế web đáp ứng hiện đại, việc sử dụng các đơn vị đồ họa chữ chính xác là điều tối quan trọng để tạo ra các bố cục linh hoạt và có thể truy cập được. Mặc dù các đơn vị tuyệt đối như pixel (px) có vị trí riêng, nhưng CSS hiện đại cực kỳ ủng hộ các đơn vị tương đối như Root EM (rem) và Element EM (em) để các bố cục có thể mở rộng liền mạch dựa trên cài đặt trình duyệt của người dùng.
Việc chuyển đổi toàn bộ bảng kiểu (stylesheet) từ pixel sang rem có thể tẻ nhạt về mặt toán học. Vì 1 rem bằng kích thước phông chữ gốc của tài liệu (thường là $16$px theo mặc định), nên việc chuyển đổi $24$px sang rem yêu cầu tính toán $24 \div 16$. Tuy nhiên, nếu bạn thay đổi kích thước phông chữ cơ bản đó thành $18$px, tất cả các phép tính trước đó của bạn sẽ trở nên lỗi thời.
Bộ chuyển đổi đồ họa chữ của chúng tôi xử lý các phép tính này một cách linh hoạt. Bạn có thể ngay lập tức xác định kích thước phông chữ cơ bản của mình và chuyển đổi tự do giữa các đơn vị CSS tiêu chuẩn (px, rem, em, pt) và các đơn vị dành riêng cho in ấn (in, cm, mm, picas). Cho dù bạn là một nhà thiết kế phông chữ đang chuyển logo từ bản in sang web hay một nhà phát triển frontend đang xây dựng lại một trang web cũ, công cụ này sẽ cung cấp các giá trị có thể mở rộng chính xác về mặt toán học ngay lập tức.
Cách chuyển đổi các đơn vị CSS
- 1
Nhập kích thước phông chữ cơ bản của dự án của bạn. Giá trị này mặc định là 16px, là tiêu chuẩn mặc định cho Chrome, Safari và Firefox.
- 2
Nhập đại lượng bạn muốn chuyển đổi (ví dụ: 24).
- 3
Chọn đơn vị bắt đầu của bạn từ menu 'Từ' (ví dụ: Pixel).
- 4
Chọn đơn vị mục tiêu của bạn từ menu 'Đến' (ví dụ: Root EM) và nhận giá trị tỷ lệ cuối cùng.
Tại sao nên sử dụng công cụ này?
- ✓Giúp chuyển đổi CSS cũ sang các tiêu chuẩn hiện đại một cách dễ dàng
- ✓Đảm bảo các điểm dừng mở rộng hoàn toàn có thể truy cập
- ✓Kích thước phông chữ cơ bản có thể điều chỉnh để linh hoạt hoàn toàn
- ✓Miễn phí và nhanh chóng, không có cửa sổ bật lên xâm nhập
- ✓Công cụ quan trọng cho các nhà phát triển và thiết kế UI/UX
Hiểu về các đơn vị tương đối
'rem' là gì?
REM là viết tắt của 'Root EM'. Nó tỷ lệ thuận với kích thước phông chữ `` gốc của một tài liệu. Nếu kích thước gốc là 16px, thì 2rem bằng 32px ở mọi nơi trên trang.
'em' là gì?
EM tỷ lệ thuận với kích thước phông chữ của *phần tử cha trực tiếp*. Nếu một `div` cha có kích thước phông chữ là 20px, một phần tử bên trong nó với `1.5em` sẽ tính ra là 30px. Điều này làm cho nó khó quản lý hơn 'rem' nhưng rất mạnh mẽ cho các thành phần mô-đun riêng biệt.
Câu hỏi thường gặp
Tại sao tôi không nên sử dụng pixel (px) cho mọi thứ?
Việc mã hóa cứng các giá trị pixel làm mất đi các tùy chọn trợ năng. Nếu một người dùng khiếm thị tăng kích thước phông chữ mặc định của trình duyệt lên 24px, trang web của bạn sẽ không phóng to đúng cách nếu bạn ép buộc `font-size: 16px;`. Việc sử dụng các đơn vị tương đối (`rem`) cho phép trình duyệt tính toán lại tỷ lệ một cách linh hoạt.
Điểm (pt) là gì?
Điểm là một đơn vị đo lường vật lý được sử dụng chủ yếu trong phương tiện in ấn và phần mềm đồ họa chữ như InDesign hoặc Word. Một điểm bằng chính xác 1/72 inch. Chúng tôi chuyển đổi điều này một cách hợp lý giả định độ phân giải màn hình CSS 96 DPI.
Kích thước phông chữ cơ bản của tôi có quan trọng khi chuyển đổi điểm (pt) sang pixel (px) không?
Không. Các chuyển đổi giữa các đơn vị tuyệt đối (như px, pt, cm, in) là các hệ số nhân cố định và không quan tâm đến kích thước phông chữ cơ bản.
Công cụ liên quan
Tạo Bóng CSS (Shadow)
Tạo mã CSS box-shadow một cách trực quan với các cài đặt độ mờ, độ lan tỏa và màu sắc tùy chỉnh. Một công cụ sáng tạo miễn phí cho các nhà thiết kế và phát triển web.
Lập trình Dụng cụ
Tạo dải màu CSS (Gradient)
Tạo các dải màu CSS tuyến tính và tỏa tròn tùy chỉnh với giao diện trực quan đơn giản. Tạo mã hoàn hảo cho nền trang web của bạn miễn phí.
Lập trình Dụng cụ
Chuyển đổi Màu sắc
Chuyển đổi mã màu giữa các định dạng Hex, RGB, HSL và CMYK ngay lập tức. Công cụ chuyên nghiệp miễn phí cho các nhà thiết kế để đảm bảo tính nhất quán của màu sắc.
Lập trình Dụng cụ