Share Tự động thay đổi kích cỡ chữ vừa màn hình với thư viện FitText

[filiallion]

Language

Tiếng Việt

Giao diện website hiện nay đều phải đáp ứng yêu cầu tối thiểu là khả năng tương thích với nhiều thiết bị từ máy tính, máy tính bảng tới điện thoại thông minh (Khả năng responsive). Vì vậy, việc thiết kế các tiêu đề có kích cỡ chữ tương ứng với thiết bị cũng là một vấn đề bắt buộc, không giống như nội dung văn bản nếu không thể trình bày trên một dòng thì có thể xuống dòng mới nhưng với các tiêu đề thì thường theo thẩm mỹ chỉ nên nằm trên một dòng. Để các tiêu đề luôn nằm trên một dòng bằng cách tự động thay đổi kích cỡ chữ, các bạn có thể sử dụng thư viện FitText. Thư viện FitText là một plugin của jQuery nên việc sử dụng nó cũng rất đơn giản.

Các bạn cần tích hợp thư viện jQuery vào website và truy cập địa chỉ https://github.com/davatron5000/FitText.js để tải thư viện FitText. Bây giờ, các bạn có thể tích hợp thư viện FitText vào website với nội dung mã lệnh HTML như sau:

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fittext.js"></script>

Và áp dụng FitText với tiêu đề nào đó như ví dụ sau:

$(function() {
    $('#fittext').fitText();
});

Với cài đặt trên thì tiêu đề sau sẽ được tự động thay đổi kích cỡ chữ theo kích thước màn hình:

<h1 id="fittext">Gextend</h1>

Các bạn có thể tìm hiểu thêm về thư viện FitText tại địa chỉ http://fittextjs.com.