Phông chữ Biểu tượng: Chúng hoạt động như thế nào?

Tôi hiểu rằng phông chữ biểu tượng chỉ là phông chữ và rằng bạn có thể nhận được các biểu tượng bằng cách chỉ cần gọi classname của họ, nhưng cách làm biểu tượng phông chữ làm việc?

Tôi đã thử kiểm tra các tài nguyên phông chữ biểu tượng liên quan được tải trong Chrome để xem cách các phông chữ biểu tượng hiển thị các biểu tượng (so với các phông chữ chung) nhưng tôi không thể tìm ra cách điều này xảy ra.

Tôi cũng đã không thành công trong việc tìm kiếm tài nguyên về cách thực hiện "kỹ thuật phông chữ biểu tượng" này, mặc dù có rất nhiều phông chữ biểu tượng có sẵn . Ngoài ra còn có vô số tài nguyên cho thấy cách tích hợp các phông chữ biểu tượng , nhưng dường như không ai chia sẻ hoặc viết về cách thực hiện điều này!

Glyphicons là hình ảnh và không phải là phông chữ. Tất cả các biểu tượng được tìm thấy trong một hình ảnh sprite (cũng có sẵn dưới dạng hình ảnh riêng lẻ) và chúng được thêm vào các phần tử như được định vị backround-image:

Biểu tượng phông chữ thực tế ( FontAwesome , ví dụ) làm liên quan đến tải một phông chữ cụ thể và làm cho việc sử dụng contenttài sản, ví dụ:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Vì thuộc contenttính không được hỗ trợ trong các trình duyệt cũ hơn, các trình duyệt này cũng sử dụng hình ảnh .

Đây là một ví dụ về FontAwesome hoàn toàn thô được sử dụng làm phông chữ, biến ( - bạn có thể không thấy cái này!) Thành xe cứu thương: http://jsfiddle.net/GWqcF/2

Nếu câu hỏi của bạn là làm thế nào một lớp CSS có thể chèn một ký tự cụ thể (ký tự đó sẽ được hiển thị dưới dạng biểu tượng trong phông chữ đặc biệt), hãy xem nguồn cho FontAwesome :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Vì vậy, một chỉ thị nội dung CSS được sử dụng để chèn ký tự (là từ một vùng dành riêng cho mục đích sử dụng riêng của Unicode mà không làm rối các trình đọc khác).

Các biểu tượng webfont hoạt động như thế nào?

Biểu tượng phông chữ web hoạt động bằng cách sử dụng CSS để đưa một glyph cụ thể vào HTML bằng cách sử dụng thuộc tính nội dung. Sau đó, nó sử dụng @font-faceđể tải một webfont dingbat tạo kiểu cho glyph được đưa vào. Kết quả là glyph được tiêm vào sẽ trở thành biểu tượng mong muốn.

Để bắt đầu, bạn sẽ cần một tệp phông chữ web với các biểu tượng bạn cần, được xác định cho các ASCIIký tự cụ thể (A, B, C, !, @, #, etc.)hoặc trong Vùng Sử dụng Riêng của phông chữ Unicode, là các khoảng trắng trong phông chữ sẽ không được sử dụng bởi các ký tự cụ thể trong Phông chữ được mã hóa Unicode.

Đọc thêm, cách tạo biểu tượng webfont tại Responsive Webfont Icons .