Hướng dẫn về Biểu tượng UI tốt hơn và tốt hơn với Phông chữ Web

Nếu bạn quen với việc sử dụng các định dạng hình ảnh bitmap (như PNG và GIF) để hiển thị các biểu tượng trên một trang web, thì bạn cũng sẽ quen với những thiếu sót của nó. Trước hết, tùy thuộc vào kích thước và số lượng thông tin màu sắc mà biểu tượng có, kích thước tệp biểu tượng có thể rất lớn.

Nếu chúng ta có quá nhiều biểu tượng để đặt vào một trang web, nó cũng có khả năng làm chậm hiệu suất trang web vì nhiều yêu cầu HTTP phải được thực hiện bởi trình duyệt. Mặc dù vấn đề này có thể được giải quyết bằng CSS sprite, kích thước tệp vẫn lớn.

Biểu tượng Bitmap cũng có những thiếu sót về tính linh hoạt và khả năng mở rộng; giả sử chúng ta cần phóng to hoặc thu phóng biểu tượng đến một mức nhất định hoặc xem nó thông qua độ phân giải màn hình rất cao như trên màn hình võng mạc; biểu tượng chắc chắn sẽ nhìn ra mờ.

Chà, nếu bạn tính đến một số vấn đề ở trên, có lẽ bạn cần sử dụng phông chữ biểu tượng.

Sử dụng Phông chữ Biểu tượng

An biểu tượng phông chữ là một tập hợp các biểu tượng được đóng gói trong một phông chữ web mà sau này có thể được nhúng trên một trang web bằng cách sử dụng @mặt chữ. Như Chris tại CSS-trick đã chỉ ra, có nhiều lợi ích của việc sử dụng phông chữ trên hình ảnh để phân phối các biểu tượng;

Phông chữ là một đối tượng dựa trên vectơ, về bản chất, không phụ thuộc vào độ phân giải, do đó biểu tượng sẽ vẫn rõ nét ở các độ phân giải màn hình khác nhau bao gồm cả độ phân giải màn hình rất cao (như mức độ võng mạc).
Nó cũng có thể mở rộng, cho phép nó được mở rộng ở nhiều cấp độ mà không làm giảm chất lượng và độ chính xác.
Vì biểu tượng về cơ bản là một phông chữ, chúng ta cũng có thể kiểm soát màu sắc, độ trong suốt, bóng văn bản và thậm chí thay đổi kích thước của nó thông qua biểu định kiểu
Chúng ta cũng có thể làm động biểu tượng bằng CSS3.
Biểu tượng được gọi với @mặt chữ quy tắc đã được hỗ trợ từ sớm như Internet Explorer 4 (với .eot).
Yêu cầu HTTP ít hơn và kích thước tệp thấp hơn.

Dưới đây là một số phông chữ biểu tượng miễn phí tốt nhất chúng ta có thể tìm thấy:

Phông chữ tuyệt vời
IcoMoon
Biểu tượng truyền thông xã hội
Biểu tượng Zurb Foundation

Hãy chắc chắn rằng bạn đã kiểm tra và tuân theo giấy phép trước khi nhúng nó vào trang web của bạn để tôn vinh thời gian và sự chăm chỉ của tác giả.

@ quy tắc khuôn mặt

Như chúng tôi đã đề cập, các biểu tượng được nhúng bằng @mặt chữ quy tắc thông qua biểu định kiểu xác định mới phông chữ gia đình. Trong ví dụ sau, chúng tôi sẽ sử dụng các Biểu tượng Web;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('phông chữ / websymbols-thường-webfont.eot'); src: url (định dạng 'phông chữ / websymbols-thường-webfont.eot? #iefix') ('embed-opentype'), url ('phông chữ / websymbols-thường-webfont.woff') (url ' Định dạng ('phông chữ / websymbols-thường-webfont.ttf') ('truetype'), url ('phông chữ / websymbols-thường-webfont.svg # WebSymbolsRegular') ('svg');

Sau đó, trong tài liệu HTML, chúng ta chỉ cần thêm các ký tự đại diện cho biểu tượng và thay vì áp dụng mới phông chữ gia đình rộng rãi trong tài liệu, chúng ta có thể làm cụ thể hơn bằng cách thêm một lớp bổ sung vào các phần tử nhất định mà biểu tượng cần được hiển thị, như vậy;

  h
 tôi
 j
 Một
 tôi

Quay lại biểu định kiểu, chúng tôi xác định mới phông chữ gia đình cho lớp mà chúng ta vừa thêm:

 .icon-font font-family: WebSymbolsRegular; cỡ chữ: 12pt;

Demo @ font-face

Sử dụng các yếu tố giả

Nếu biểu tượng được coi là yếu tố phụ, chúng tôi cũng có thể phân phối biểu tượng thông qua yếu tố giả. Giả sử rằng đánh dấu HTML của chúng tôi như sau:

  Đáp lại
 Trả lời tất cả
 Phía trước
 Tập tin đính kèm
 Hình ảnh

Chúng ta có thể làm theo cách này trong biểu định kiểu:

 ul.icon-font.pseudo li: trước font-family: WebSymbolsRegular; lề phải: 5px;  ul.icon-font.pseudo li: nth-child (1): trước nội dung: "h";  ul.icon-font.pseudo li: nth-child (2): trước nội dung: "i";  ul.icon-font.pseudo li: nth-child (3): trước nội dung: "j";  ul.icon-font.pseudo li: nth-child (4): trước nội dung: "A";  ul.icon-font.pseudo li: nth-child (5): trước nội dung: "Tôi";

Phần tử giả demo

Sử dụng riêng Unicode

Có một trường hợp các biểu tượng không được nhúng trong các chữ cái (A, B, C, D, v.v.), nhưng được nhúng trong Sử dụng Unicode riêng tư để giảm thiểu xung đột giữa các ký tự. Giống như trong FontAwgie, tác giả đã may mắn thêm tất cả các mã ký tự trong biểu định kiểu, trông giống như thế này;

 .biểu tượng-kính: trước nội dung: "\ f0c6";

Nhưng khi chúng ta cần nhúng biểu tượng trực tiếp vào HTML, một cái gì đó giống như đoạn mã sau \ sẽ không hiển thị biểu tượng nhọn, vì nó không phải là ký tự hợp lệ được mã hóa trong HTML.

HTML cần một đánh dấu tham chiếu số để kết xuất các ký tự đặc biệt. Chúng tôi đã trình bày về nó một chút trong hướng dẫn trước đây về Nút CSS3; ký tự này được thêm tiền tố với sự kết hợp của ký hiệu dấu và&), một dấu băm (#) và một x sau đó theo số thập lục phân đại diện cho ký tự.

Chẳng hạn, f0c6 là số thập lục phân, do đó, tham chiếu ký tự số trong HTML sẽ là & # xf0c6;, trong FontAwgie mã đó sẽ hiển thị biểu tượng kẹp giấy, thích như vậy;

Trình diễn Unicode

Phông chữ phụ

Các biểu tượng trong bộ sưu tập có thể không cần thiết. Trong trường hợp đó, chúng ta có thể loại bỏ các ký tự không sử dụng bằng cách đặt lại phông chữ cũng sẽ dẫn đến kích thước tập tin phông chữ thấp hơn. May mắn thay, có một công cụ tiện dụng từ FontSquirrel để thực hiện công việc này một cách dễ dàng, trình tạo @ font-face.

Sau khi bạn đi đến trang đó và thêm phông chữ, chọn Chuyên gia. Bạn sẽ thấy một số tùy chọn hơn; lựa chọn Tùy chỉnh tập hợp.

Trong ví dụ này, chúng tôi sử dụng phông chữ Sociolico để hiển thị các biểu tượng phương tiện truyền thông xã hội trong trang web của chúng tôi, nhưng các biểu tượng mà chúng tôi sẽ cần chỉ là Dribble, Facebook và Twitter tương ứng được thể hiện bởi các ký tự này; d, f và t. Vì vậy, hãy đặt các ký tự đó vào trường nhập ký tự đơn như sau:

Và chúng ta đã hoàn thành. Bây giờ chúng tôi có thể tải xuống phông chữ và trong trường hợp của tôi, kích thước phông chữ hóa ra chỉ từ 3Kb đến 5Kb. Cũng nên nhớ rằng các ký tự duy nhất sẽ được hiển thị thành một biểu tượng chỉ d, f và t, trong khi các ký tự khác sẽ chỉ hiển thị thành một chữ cái thông thường.

Suy nghĩ cuối cùng

Một điều mà chúng ta không thể làm khi thực hành điều này là thêm các hiệu ứng rất chi tiết như thế này vào biểu tượng.

Tuy nhiên, nếu thiết kế tổng thể của chúng tôi không yêu cầu chi tiết ở cấp độ đó, phương pháp này có thể là một cách tốt hơn để phục vụ các biểu tượng trong trang web. Nó có tính linh hoạt, khả năng mở rộng, sẵn sàng cho võng mạc với kích thước tệp rất nhỏ, chúng tôi có thể yêu cầu gì khác?

Cuối cùng, nếu bạn muốn tìm hiểu sâu hơn về chủ đề này, bên dưới chúng tôi đã tổng hợp một vài tài liệu tham khảo hữu ích, cũng như bản demo và mã nguồn để tải xuống.

Cách tạo biểu tượng của riêng bạn Webfont - WebDesignerDepot.com
Hiển thị phông chữ và thuộc tính dữ liệu - 24Ways
Sử dụng riêng Unicode - Wikipedia

Bản giới thiệu
Tải xuống nguồn