15 công cụ đánh máy, thư viện và khung công tác web hữu ích

Xử lý các kiểu chữ trên web là rất kỳ quặc. Mỗi trình duyệt có thuật toán riêng để kết xuất phông chữ có thể dẫn đến sự khác biệt bất ngờ. Chỉ có một vài thuộc tính CSS mà bạn có thể sử dụng để kiểm soát phông chữ, chẳng hạn như phông chữ, làm mịn phông chữ, trong việc tạo DropCaps, v.v. Trên hết, chúng ta phải giải quyết rất nhiều vấn đề về bố cục khi nói đến phông chữ.

Tin tốt là có những tài nguyên mà bạn có thể sử dụng để chiếm lấy bánh xe khi nói đến kiểu chữ trang web. Đây là 15 công cụ web, thư viện và khung bạn có thể sử dụng đến cuối cùng.

Thêm thông tin về Hongkiat:

9 plugin WordPress để làm nhiều hơn với phông chữ của bạn
20 plugin WordPress typography tốt nhất để tăng cường khả năng đọc
Các biểu tượng UI tốt hơn và tốt hơn với các phông chữ Web

Loại hình

Tóm lại, Loại hình hoạt động tương tự Modernizr, ngoại trừ nó chỉ xác định công cụ trình duyệt để hiển thị phông chữ. Thư viện này thêm các lớp tùy chỉnh dựa trên những khám phá của nó có thể được sử dụng để áp dụng các quy tắc kiểu dáng cụ thể để kết xuất kiểu.

KerningJS

Kerning chưa thể tùy chỉnh để sử dụng trên web - phông chữ hỗ trợ vẫn còn kém vào lúc này - nhưng một tài sản tiêu chuẩn mới đang đến với chúng ta. KerningJS là một thư viện Javascript cung cấp cho bạn một vài thuộc tính mới để kiểm soát tốt hơn, ví dụ như -thư-kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Hãy nhớ rằng ví dụ trên là không chuẩn và chỉ áp dụng với KerningJS.

DropcapJS

Mặc dù việc tạo một dropcap là có thể thực hiện được với các tiêu chuẩn CSS hiện tại, kết quả vẫn chưa hoàn hảo. Đôi khi nó là hết sức không mong muốn. DropcapJS, được phát triển bởi Adobe Web Platform, được giao nhiệm vụ cho phép nhà thiết kế web áp dụng một dropcap hoàn hảo một cách dễ dàng.

LiningJS

LiningJS là một thư viện JavaScript có thêm hàng lớp trong mỗi dòng của đoạn văn của bạn. Điều này cho phép bạn tạo kiểu riêng cho dòng. Nó mô phỏng ý tưởng của :: dòng thứ n (), :: nth-dòng cuối () và ::dòng cuối cùng các lớp giả không có trong CSS. Dưới đây là một ví dụ về cách chúng tôi tạo kiểu cho dòng đầu tiên của đoạn văn với LiningJS:

 p .line [đầu tiên] font-weight: 600; biến đổi văn bản: chữ hoa;

Ngoài ra, LiningJS cũng hỗ trợ dòng văn bản tiếng Trung.

Gạch chân

Gạch chân là một thư viện JavaScript làm cho văn bản gạch chân tốt hơn. Kiểm tra bản demo để xem ý tôi là gì, hãy chắc chắn di chuột qua các dòng. So sánh bản demo với đầu ra gạch dưới của CSS hiện tại trang trí văn bản tiêu chuẩn và có lẽ bạn cũng là một fan hâm mộ của underlineJS.

FlowType

Plugin này sẽ tự động điều chỉnh kích thước phông chữ dựa trên chiều rộng của trình bao bọc cụ thể. FlowType giúp bạn áp dụng số lượng ký tự lý tưởng trên mỗi dòng ở bất kỳ chiều rộng màn hình nào. Thư viện đi kèm với các tùy chọn trong đó người ta có thể đặt chiều rộng màn hình tối thiểu / tối đa, kích thước phông chữ tối thiểu / tối đa và tỷ lệ phông chữ.

HatchShow

HatchShow mở rộng kích thước của một phông chữ để lấp đầy toàn bộ chiều rộng của thùng chứa của nó. Các plugin hoạt động ra khỏi hộp với thuật toán; Tóm lại, nó đo chiều rộng và chiều dài của ký tự phông chữ và nối thêm kích thước phù hợp của phông chữ.

Lưới điện

Lưới điện là một công cụ tuyệt vời để tạo các kiểu cơ bản để sắp xếp kiểu chữ (kích thước, chiều cao dòng và lề) với giao diện người dùng dễ trượt. Nó tạo ra các kiểu trong SCSS, LESS và Stylus để bạn có thể đưa nó ngay vào dự án của mình bất kể bạn sử dụng CSS-Pre xử lý nào.

Loại hình

Loại hình là một công cụ trực tuyến sẽ giúp bạn dễ dàng xác định kích thước phông chữ phù hợp cho trang web của bạn. Công cụ này cung cấp một GUI trực quan đơn giản để chèn kích thước phông chữ cơ bản, tỷ lệ và họ phông chữ bạn muốn sử dụng. Các kết quả sẽ được hiển thị cho bạn để bạn có thể chơi xung quanh với tỷ lệ, để có được giá trị phù hợp. Chỉ cần lấy CSS sau khi bạn hoàn thành.

Quy mô mô đun

Quy mô mô đun là một công cụ để tạo tỷ lệ phông chữ lý tưởng cho văn bản cơ thể và tiêu đề. Nó xuất ra trong Sass nên được sử dụng cùng với thư viện Sass của nó. Thay phiên, bạn có thể sử dụng JavaScript .

Phông chữ rộng

Phông chữ rộng (FTW) là một thư viện Javascript làm cho một phông chữ phù hợp với thùng chứa chiều rộng của nó. Nó sẽ xác định kích thước phông chữ cùng với khoảng cách từ cần thiết cho phông chữ. Nếu bạn muốn tạo một tiêu đề đẹp, đây là thư viện bạn có thể muốn thử.

FFFFallback

FFFFallback, một công cụ tiện dụng cho phép bạn tìm ngăn xếp phông chữ tốt nhất sẽ giảm xuống một cách duyên dáng. Công cụ này có dạng bookmarklet, sẽ phân tích họ phông chữ trên trang của bạn và đề xuất một bộ phông chữ để sử dụng làm dự phòng.

Cặp phông chữ

Google Font là một trong những thư viện phông chữ phổ biến nhất được sử dụng bởi hàng triệu người và lưu trữ trên 500 họ phông chữ. Cặp phông chữ là một tập hợp các Phông chữ Google được ghép nối, nơi bạn có thể tìm thấy sự kết hợp khác nhau giữa các họ phông chữ và khuôn mặt kiểu dễ dàng. Phông chữ làm cho việc chọn cặp chữ trở nên ít áp đảo hơn.

Kiểu cài đặt

Kiểu cài đặt là một tập hợp các quy tắc CSS được thiết lập để xác định tỷ lệ phông chữ phù hợp, nhịp điệu dọc và tỷ lệ đáp ứng của kiểu chữ. TypeSinstall có trong Sass và Stylus cho phép linh hoạt đáp ứng nhu cầu dự án của bạn bằng cách điều chỉnh các biến.

Máy đánh chữ

Máy đánh chữ có lẽ là một trong những bộ khởi động đầy đủ nhất để thiết lập kiểu chữ. Máy in chữ với một số kiểu chữ cơ bản giải quyết tỷ lệ, màu sắc, vốn nhỏ, dropcap, thụt lề, gạch nối, blockquote, khối mã và nhiều thứ khác.

Đọc ngay: Giới thiệu các thiết kế web với kiểu chữ đẹp